When and why it is worth using ES6 arrow functions, and when not

Hi, Habr! I present to you the translation of Cynthia Lee’s article " When (and why) you should use the ES6 arrow functions - and when you should not ".

Arrow functions are the most popular feature of ES6. This is a new, concise way of writing functions.

function timesTwo(params) { return params * 2 } timesTwo(4); // 8 

Now the same with the arrow function.

 var timesTwo = params => params * 2 timesTwo(4); // 8 

Much shorter! We can omit the curly braces and the return operator (if there is no block, but more on that later).

Let's see what makes the new way different from the usual.

Syntax

The first thing you quickly notice is the different variations of syntax. Let's look at the main ones:

1. Without parameters

If the function has no parameters, you can simply write empty parentheses before =>

 () => 42 

In fact, you can do without brackets!

 _ => 42 

1. One parameter

Parentheses are also optional.

 x => 42 || (x) => 42 

3. Several parameters

Here we need brackets

 (x, y) => 42 

4. Instructions

Normally, a functional expression returns a value, while the instruction is responsible for the action.

It must be remembered that in the case of pointer functions, if we have a set of actions / instructions, it is necessary to use curly braces and the return operator.
Here is an example of the arrow function used with the if statement:

 var feedTheCat = (cat) => { if (cat === 'hungry') { return 'Feed the cat'; } else { return 'Do not feed the cat'; } } 

5. The body of the function - block

Even if your function simply returns values, but its body is in curly brackets, the return statement is required.

 var addValues = (x, y) => { return x + y } 

6. Object literal

If the function returns an object literal, it must be enclosed in parentheses.

 x =>({ y: x }) 

Arrow functions - anonymous

Please note that the pointer functions are anonymous, they have no name.

This creates some difficulties:

1. Difficult to debug
   
   When this happens, you cannot track the function name and the line number where the error occurred.
   
2. Cannot be assigned to a variable.
   
   If you need a reference inside a function to itself for something (recursion, an event handler that needs to be canceled), nothing happens
   

Main advantage: do not have this

In normal functions, this points to the context in which this function is called. This arrow function is the same as this environment in which the arrow function is declared.

For example, look at the setTimeout function below:

 // ES5 var obj = { id: 42, counter: function counter() { setTimeout(function() { console.log(this.id); }.bind(this), 1000); } }; 

In the example above, you need to use .bind (this) to pass the context to the function. Otherwise, this will be undefined.

 // ES6 var obj = { id: 42, counter: function counter() { setTimeout(() => { console.log(this.id); }, 1000); } }; 

In this example, you do not need to bind this. The arrow function will take the value of this from the closure.

When not to use arrow functions

Now, I think it has become clear that the switch functions do not replace the usual ones.

Here are some examples where you might not want to use them.

1. Object methods

When you call cat.jumps, the number of lives does not decrease. This is because this is not tied to anything, and inherits the value from the closure.

 var cat = { lives: 9, jumps: () => { this.lives--; } } 

2. Callback functions with dynamic context

If you need a dynamic context, the switch function is a bad option.

 var button = document.getElementById('press'); button.addEventListener('click', () => { this.classList.toggle('on'); }); 

If you click on the button, we get a TypeError. This is due to the fact that this is not tied to the button.

3. When code readability deteriorates

With ordinary functions, it is always clear what you want to say. With arrows, given the various variations of syntax, some things become less obvious.

When exactly is it worth using arrow functions

Arrow functions are perfect for cases where you do not need your own function context.

I also like to use the arrow functions in all sorts of map and reduce - the code is better read.