Стрелочные функции

Лично я со стрелочными функциями познакомился лет так наверное 5-7 назад, когда был программистом ASP.NET и писал на C#. Затем, я решил полностью погрузиться в javascript, но стрелочные функции, скорее к счастью, пришли и сюда. Я люблю стрелочные функции и уверен вы их полюбите тоже.

Синтаксис

Начнем сразу же с примера:

1
2
[1,2,3,4].map(x=>x*2);
//[2,4,6,8]

А вот как этот же пример выглядел бы в ES5:

1
2
[1,2,3,4].map(function(x){ return x*2; });
//[2,4,6,8]

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

Если все же пояснение нужно, то x перед знаком => является аргументом анонимной функции (как во втором примере). А то, что идет после знака => это результат работы функции. То, что будет возвращено.

В примере выше функция имела лишь один аргумент. Для того, чтобы передать больше аргументов, мы должны просто объединить их в скобки:

1
2
[1,2,3,4].map((item, index) => item*2 + index);
//[2,5,8,11]

До этого мы рассматривали варианты, когда мы сразу возвращали результат. Можем предположить, что нам потребовалось не просто вернуть результат, а провести какие-нибудь дополнительные действия внутри функции. Например, мы хотим вывести в консоль что-нибудь. Для этого нужно использовать фигурные скобки:

1
2
3
4
5
[1,2,3,4].map(item => {
	let res = item * 2;
	console.log(res);
	return res;
});

В общем, это все, что касается синтаксиса стрелочных функций. Можно рваться в бой. Но есть еще одна особенность-фича.

Контекст выполнения в стрелочных функциях

И это хорошая новость, он сохраняется!!! Больше не нужно думать о принудительной привязке контекста через .bind(), $.proxy, городить огород из _this, self, that и прочего добра через замыкания.

Как оно было раньше:

1
2
3
4
5
6
7
8
9
10
function Animal(name){
  this.animalName = name;
  
  setTimeout(function(){
    console.log(this.animalName);
  }, 1000);
}

new Animal('Javier');
//undefined

Сейчас не та глава, чтобы я объяснял почему undefined. Но чтобы это работало, мы писали вот так (один из способов):

1
2
3
4
5
6
7
8
9
10
function Animal(name){
  this.animalName = name;
  
  setTimeout(function(){
    console.log(this.animalName);
  }.bind(this), 1000);
}

new Animal('Javier');
//Javier

Ну а используя стрелочные функции, как я уже упомянул выше, об этом думать не надо:

1
2
3
4
5
6
7
8
9
10
function Animal(name){
  this.animalName = name;
  
  setTimeout(()=>{
    console.log(this.animalName);
  }, 1000);
}

new Animal('Javier');
//Javier

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