Arrow function is an alternative form of creating a function in JavaScript. It was introduced in ES6.

They go by name arrow functions, because they are created with arrow symbol - =>.

The main benefit of arrow functions is a short syntax which most of the times increases code readability. They come really handy when you need to quickly create a function that is an argument for another function.

In most cases they can be used interchangeably with regular functions but you need to remember about few differences.

Arrow functions are anonymous functions. It means they cannot have a name. You can bypass it by assigning them to a variable and call them with this variable name.

Let's take a look at the simple conversion from regular function to arrow function.

function add(x, y) {
    return x + y;
}

// we assign an anonymous to a variable
const add = function(x, y) {
    return x + y;
}

// we remove "function" keyword and add an arrow after arguments
const add = (x, y) => {
    return x + y;
}

The code sample above shows 3 ways to declare a function. In the last one we are using =>. Notice we don't need a function keyword anymore to declare a function. We also added => after list of arguments.

Arrow function allow us to use even shorter syntax.

// returns x + y
const add = (x, y) => (
    x + y
)

// the same function in one line
const add = (x, y) => x + y

// you can skip parentheses when using only one argument
const add1 = x => x + 1

If your function contains only the return you can use the short form of arrow functions.

You can omit { } and return keyword and the expression after => will be the value returned from this function.

When you return an object you need to remember about adding ( ).

// this won't work
const createUser = (id, name) => {
    id: id,
    name: name
}

In this case the curly braces used to create the object will conflict with curly braces used to create a function body. You need to add parentheses to ensure you are returning an object.

const createUser = (id, name) => ({
    id: id,
    name: name
})

Using short form to improve code readability

Let's take a look how using short form of arrow function can improve code readability when returning a function from other function.

function createAddFunction(number) {
    return function(x) {
        return x + number
    }
}

createAddFunction is a function which creates other function. This pattern is called currying and you can read about it more at What is Function Currying in JavaScript and When to Use It. You can use it for example to create a function which increments a number by 1.

const add1 = createAddFunction(1)
add1(5) // 6

The definition of createAddFunction can be shortened by using features of arrow function we just learned. Let's take a look at the steps to reduce it to one line.

// initial version
function createAddFunction(number) {
    return function(x) {
        return x + number
    }
}

// changing the inner function to arrow function
function createAddFunction(number){
    return x => x + number
}

// changing the outer function to arrow function
const createAddFunction = number => (
    x => x + number
)

// one line version
const createAddFunction = number => x => x + number

What are the differences between regular and arrow functions

this in arrow functions

The most important difference is how this behaves inside those 2 function declaration types.

Arrow functions do not create its own this but use its value from the place they were defined.

The explanation of this in JavaScript would need a separate blog post, but I will show you few examples illustrating the differences.

const logThisOutside = () => {
    console.log(this)
}

function Button() {
    this.name = 'My Button'
    function logThis() {
        console.log(this)
    }
    const logThisArrow = () => {
        console.log(this)
    }

    logThis() // Window
    logThisArrow() // { name: 'My Button' }
    logThisOutside() // Window
}

new Button()

As you can see logThisArrow and logThisOutside use the value of this from the place they were defined in. It happens because as apposed to regular function, arrow functions do not create its own this, but use the value from the outer scope.

Using this in arrow functions to your advantage

function Button() {
  this.name = 'My Button'

  const that = this
  document.querySelector("button").addEventListener("click", function() {
    console.log('click', this); // Button DOM Element
    console.log('that', that) // { name: 'My Button' }
    this.name = 'Button Clicked' // won't work as expected
    that.name = 'Button Clicked' // name value changed
  });

  document.querySelector("button").addEventListener("click", () => {
    console.log("click arrow", this); // { name: 'My Button' }
    this.name = 'Button Clicked' // name value changed
  });
}

new Button()

We created two event listeners. In one of the we used regular function and arrow function in the other one.

In case of regular function in event listener, when you click on a button this will have a value of DOM element that was clicked. If we would want to change the value of this.name we would have to first create a variable const that = this and then modify it by that.name = 'Button Clicked'. It's a common hack used to modify this from outer scope.

As a mentioned before, arrow functions do not create its own this so you can safely change value of name by this.name = 'Button Clicked.

Accessing arguments in arrow functions

The other feature of arrow functions is they do not create a special variable arguments inside a function body.

Let's see how arguments work in regular function.

function add() {
    console.log(arguments)
}

add(1, 2, 3) // console: [1, 2, 3]

Regular function has access to special arguments variable that stores all arguments that function was called with even if they were not defined between the parenthesis.

Arrow functions do not create arguments variable but there is other solution we can use to achieve the same - rest parameters.

const add = (...args) => {
    console.log(args)
}

add(1, 2, 3) // console: [1, 2, 3]

Summary

Arrow functions offer a short syntax for creating functions. They allow to omit keywords like function and return to improve readability of your code. Please use it we caution because too much nested arrow functions can create code which is confusing for readers.

Arrow functions do not create its own this and arguments special variables which is its main difference from regular functions.

If you want to read about other differences check out MDN Arrow function expressions.

I'm regularly publishing my insights on web development.
Consider subscribing to my newsletter.
Visit my blog at slawkolodziej.com to find out more interesting content.
Follow me on Twitter.