Arrow Functions Discussion Questions

Objectives

Arrow functions are a cool new feature of ES6. They introduce a different syntax and carry slightly different behavior than function expressions.

Take a look at the following code examples and return values with your table partners. Without looking anything up, see if you can deduce the differences and similarities in how arrow functions behave.

Examples

Arrow Function Shortcuts

var playMusic = function (music) {
    return "Playing some " + music
}
playMusic("Jazz") // "Playing some Jazz"
const playMusic = (music) => {
  return "Playing some " + music
}
playMusic("Jazz") // "Playing some Jazz"

const playMusic = music => {
  return "Playing some " + music
}
playMusic("Jazz") // "Playing some Jazz"

const playMusic = music => {
  "Playing some " + music
}
playMusic("Jazz") // undefined
const playMusic = music =>  "Playing some " + music
playMusic("Jazz") // "Playing some Jazz"
const playMusic = music =>  (
  "Playing some " + music
 )
playMusic("Jazz") // "Playing some Jazz"
const readBooks = (book1, book2) => {
  return `I read '${book1}' and '${book2}'`
}
readBooks("The Old Man and the Sea", "1984") // "I read 'The Old Man and the Sea' and '1984'"
const readBooks = (book1, book2) =>  `I read '${book1}' and '${book2}'`
readBooks("The Old Man and the Sea", "1984") // "I read 'The Old Man and the Sea' and '1984'"
const readBooks = book1, book2 =>  `I read '${book1}' and '${book2}'` // Syntax Error 

with this

class Cat {
  constructor(){
    this.kittens = ["Maru", "Grumpy", "Shadow"]
  }

  feedKitten(name){
    console.log(`Feeding ${name}`)
  }

  feedKittens(){
    this.kittens.forEach(function(kitten){
      this.feedKitten(kitten)
    })
  }
}
let cat = new Cat()
cat.feedKittens() // Uncaught TypeError: Cannot read property 'feedKitten' of undefined
class Cat {
  constructor(){
    this.kittens = ["Maru", "Grumpy", "Shadow"]
  }

  feedKitten(name){
    console.log(`Feeding ${name}`)
  }

  feedKittens(){
    this.kittens.forEach(function(kitten){
      this.feedKitten(kitten)
    }.bind(this))
  }
}
let cat = new Cat()
cat.feedKittens()
// outputs:
Feeding Maru
Feeding Grumpy
Feeding Shadow
class Cat {
  constructor(){
    this.kittens = ["Maru", "Grumpy", "Shadow"]
  }

  feedKitten(name){
    console.log(`Feeding ${name}`)
  }

  feedKittens(){
    this.kittens.forEach((kitten) => {
      this.feedKitten(kitten)
    })
  }
}
let cat = new Cat()
cat.feedKittens()
// outputs:
Feeding Maru
Feeding Grumpy
Feeding Shadow
class Cat {
  constructor(){
    this.kittens = ["Maru", "Grumpy", "Shadow"]
  }

  feedKitten(name){
    console.log(`Feeding ${name}`)
  }

  feedKittens(){
    this.kittens.forEach( kitten => this.feedKitten(kitten) )
  }
}
let cat = new Cat()
cat.feedKittens()
// outputs:
Feeding Maru
Feeding Grumpy
Feeding Shadow
Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us