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 variableconst add = function (x, y) {  return x + y;};// we remove "function" keyword and add an arrow after argumentsconst add = (x, y) => {  return x + y;};

Arrow function allow us to use even shorter syntax.

// returns x + y// the same function in one lineconst add = (x, y) => x + y;// you can skip parentheses when using only one argumentconst 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 workconst 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 versionfunction createAddFunction(number) {  return function (x) {    return x + number;  };}// changing the inner function to arrow functionfunction createAddFunction(number) {  return (x) => x + number;}// changing the outer function to arrow functionconst createAddFunction = (number) => (x) => x + number;// Arrow function versionconst 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]