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

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

Tomatoknight 29.09.17 в 15:22

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

a_popova 02.10.17 в 15:15

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

Tomatoknight 29.09.17 в 15:26

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

Tomatoknight 29.09.17 в 15:26

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

Tomatoknight 29.09.17 в 15:26

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

Tomatoknight 29.09.17 в 15:27

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

Tomatoknight 29.09.17 в 15:27

- Переменная *this*

a_popova 02.10.17 в 15:16

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

Tomatoknight 29.09.17 в 15:29

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

Tomatoknight 29.09.17 в 15:29

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

Tomatoknight 29.09.17 в 15:30

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

Tomatoknight 29.09.17 в 15:30

Стрелочные функции являются более короткими, чем традиционные во многих случаях. Давайте рассмотрим все возможные случаи:

a_popova 02.10.17 в 15:18

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

Tomatoknight 29.09.17 в 15:30

В теле функции с **явным возвратом** используется ключевое слово *return*.

Tomatoknight 29.09.17 в 15:31

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

Tomatoknight 29.09.17 в 15:32

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

a_popova 02.10.17 в 15:19

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

Tomatoknight 29.09.17 в 15:36

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

Tomatoknight 29.09.17 в 15:36

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

Tomatoknight 29.09.17 в 15:37

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

Tomatoknight 29.09.17 в 15:37

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

Tomatoknight 29.09.17 в 15:38

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

a_popova 02.10.17 в 15:20

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

Tomatoknight 29.09.17 в 15:43

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

Tomatoknight 29.09.17 в 15:44

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

Tomatoknight 29.09.17 в 15:44

Скобки вокруг единственного параметра можно не писать:

Tomatoknight 29.09.17 в 15:44

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

Tomatoknight 29.09.17 в 15:45

Нет аргументов

Tomatoknight 29.09.17 в 15:45

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

a_popova 02.10.17 в 15:21

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

Tomatoknight 29.09.17 в 15:46

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

Tomatoknight 29.09.17 в 15:46

Обращение к *this*

Tomatoknight 29.09.17 в 15:46

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

Tomatoknight 29.09.17 в 15:47

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

Tomatoknight 29.09.17 в 15:48

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

Tomatoknight 29.09.17 в 15:49

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

a_popova 02.10.17 в 15:23

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

Tomatoknight 29.09.17 в 15:51

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

Tomatoknight 29.09.17 в 15:52

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

Tomatoknight 29.09.17 в 15:52

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

Tomatoknight 29.09.17 в 15:52

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

Tomatoknight 29.09.17 в 15:52

- [Введение в стрелочные функции - 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)

Tomatoknight 29.09.17 в 15:54