Готовый перевод Modern JS Cheatsheet / Памятка по современному JavaScript: Стрелочные функции

### <a name="arrow_func_concept"></a> Стрелочные функции

В обновлении ES6 JavaScript добавлены *стрелочные функции*, которые являются еще одним способом объявления и использования функций. Вот некоторые их преимущества:

- краткость;
- *this* берется из окружающего контекста;
- неявный возврат.

#### Пример кода

- Краткость и неявный возврат

```js
function double(x) { return x * 2; } // Обычный способ
console.log(double(2)) // 4
```

```js
const double = x => x * 2; // Та же функция, записанная в виде стрелочной функции с неявным возвратом
console.log(double(2)) // 4
```

Связывание с *this*

Внутри стрелочной функции значение *this* равно значению *this* во внешней области видимости. В принципе, со стрелочными функциями вам больше не нужно делать трюк “that = this” перед вызовом функции внутри функции.

```js
function myFunc() {
this.myVar = 0;
setTimeout(() => {
this.myVar++;
console.log(this.myVar) // 1
}, 0);
}
```

#### Подробное объяснение

##### Краткость

Стрелочные функции по ряду причин короче, чем традиционные. Рассмотрим все возможные случаи:

- Явный и неявный возврат

**Явный возврат** - это функция, в теле которой используется ключевое слово **return**.

```js
function double(x) {
return x * 2; // эта функция явно возвращает x * 2, использовано ключевое слово *return*
}
```

При традиционном способе написания функций возврат всегда был явным. Со стрелочными функциями его можно сделать *неявным*. Это значит, что для возврата значения не нужно писать ключевое слово *return*.

Чтобы возврат значения был неявным, код функции должен быть написан в виде однострочного выражения.

```js
const double = (x) => {
return x * 2; // Явный возврат
}
```

Поскольку здесь нет ничего, кроме возвращаемого значения, возврат можно сделать неявным.

```js
const double = (x) => x * 2;
```

Для этого нам просто нужно **убрать фигурные скобки** и ключевое слово **return**. Поэтому это и называется *неявным* возвратом: ключевого слова *return* нет, но функция все равно вернет ```x * 2```.

> **Примечание**: если ваша функция не возвращает никаких значений (с *побочными эффектами*), то в ней нет ни явного, ни неявного возврата.

- Только один аргумент

Если ваша функция принимает только один параметр, вы можете опустить скобки вокруг него. Если мы вернемся к функции *double* в коде выше:

```js
const double = (x) => x * 2; // эта стрелочная функция принимает только один параметр
```

Скобки вокруг этого параметра могут быть отброшены:

```js
const double = x => x * 2; // эта стрелочная функция принимает только один параметр
```

- Без аргументов

Когда стрелочная функция вообще не принимает никаких аргументов, нужно написать пустые скобки, иначе синтаксис будет неверным.

```js
() => { // Скобки есть, все хорошо
const x = 2;
return x;
}
```

```js
=> { // Скобок нет, так работать не будет!
const x = 2;
return x;
}
```

##### this ссылка

Чтобы понять эту тонкость, представленную стрелочными функциями, вы должны понимать, как [this](#this_def) ведёт себя в JavaScript.

В стрелочной функции значение *this* равно значению *this* внешнего окружения. Это означает, что стрелочная функция не создает новый *this*, а получает его из окружения.

Если вы не используете стрелочные функции и хотите получить доступ к переменной из *this* в функции внутри другой функции, вам придется использовать фокус с *that = this* или *self = this*.

Вот, к примеру, использование функции setTimeout внутри функции myFunc:

```js
function myFunc() {
this.myVar = 0;
var that = this; // Тот самый фокус *that = this*
setTimeout(
function() { // В этой области видимости функции создается новый *this*
that.myVar++;
console.log(that.myVar) // 1

console.log(this.myVar) // undefined -- см. объявление функции выше
},
0
);
}
```

Но в случае стрелочных функций *this* берется из окружения:

```js
function myFunc() {
this.myVar = 0;
setTimeout(
() => { // this берется из окружения. В данном случае - из myFunc
this.myVar++;
console.log(this.myVar) // 1
},
0
);
}
```

#### Полезные ресурсы

- [Введение в стрелочные функции - WesBos](http://wesbos.com/arrow-functions/)
- [Стрелочные функции в JavaScript - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
- [Стрелочные функции и лексическое значение *this*](https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4)

Переведено на Нотабеноиде
http://notabenoid.org/book/70916/381875

Переводчики: Tomatoknight, a_popova