CuteMachine

JavaScript Arrow Functions

In this article we will learn how we wrote functions before ES6 and how we can now write more concise JavaScript code with the addition of Arrow Functions.

Function Declarations

Before the arrival of arrow functions in JavaScript land, we declared functions with the function keyword, like in this named function declaration:

function double(x) {
  return x * 2
}

We then could have called the double function passing 3 as the argument to the parameter x, and the function would return 6.

Function Expressions

Because functions are just objects, we can also use the function keyword in expressions. These are called function expressions.

const triple = function(x) {
  return x * 3
}

triple(3)    // returns 9

const timesThree = triple

timesThree(4)    // returns 12

We do not need to name the function in the above function expression because we can call it through the triple variable we assigned it to.

If we want to triple all numbers in an array, we can pass a function to the map() function of a collection.

const numbers = [1, 2, 3]
numbers.map(function(x) {
  return x * 3
})    // returns [3, 6, 9]

Arrow Functions

In ES6, arrow functions were introduced, which makes it much easier to use map(). We could rewrite the above example with arrow functions like so:

const numbers = [1, 2, 3]
numbers.map((x) => {
  return x * 3
})    // returns [3, 6, 9]

But this can be written even more concise. We do not need the parentheses around the x parameter, and we do not need the braces for the function body if we write the function in one line. Furthermore, if we write the arrow function in one line, we do not need the return statement. The following example does the same calculation as the previous example.

const numbers = [1, 2, 3]
numbers.map(x => x * 3)    // returns [3, 6, 9]

If we create functions with two or more parameters, we need to enclose the comma-separated parameter list with parentheses; otherwise, you will get a SyntaxError.

const sum = (a, b) => a + b
sum(38, 4)    // return 42

As in the above example, we do not need to use the return statement because the value of a + b will be returned implicitly. But be careful if you want your function to return an object instead of a simple value.

What will you get when executing the following code?

const sum = (a, b) => { result: a + b }
const s = sum(38, 4)
console.log(s.result)    // ?

You might expect that you will see 42 printed in the console. But you will be disappointed to see a TypeError instead because s is undefined. You get undefined because the braces are interpreted as a function body and not as an object literal. To fix this, you need to enclose the curly braces in parentheses, like so:

const sum = (a, b) => ({ result: a + b })
const s = sum(38, 4)
console.log(s.result)    // returns 42

Arrow Functions And The Invocation Context (this)

To add a method1 to an object in JavaScript we can do the following:

const anObject = {
  a: 40,
  b: 2,
  sum: function() {
    return this.a + this.b
  }
}

anObject.sum()    // returns 42

In JavaScript, you use the this keyword to access the invocation context of a method1.

Now, when we want to use an arrow function in the above example, you will see that it does not work as expected. this will be undefined in the highlighted line.

const o = {
  a: 40,
  b: 2,
  sum: () => {
    return this.a + this.b
  }
}

o.sum()    // Error

When you are somewhat familiar with JavaScript objects and methods, you might think that you can use bind() to bind the correct context to the method. But bind() does not work with arrow functions. In that case, you want to use the function keyword to define your method.

Conclusion

Arrow functions are a great addition to the JavaScript language because it makes our code more readable, especially when used with functional patterns like map(), reduce(), and filter().


  1. A method is just a function that operates on an object.

Posted on CuteMachine.

Jo's Profile ImageWritten by Jo who lives and works in Frankfurt building digital doodah. Stalk him on Twitter.

TOS • Privacy • Disclaimer