JavaScript: Arrow functions

Intro

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 function 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;
};

Arrow function allow us to use even shorter syntax.

// returns 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 the return keyword and the expression after => will be the value returned from this function.

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

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

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. 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;

// Arrow function 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. 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 logThisOutsideuse the value of this from the place they were defined in. It happens because as opposed 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]