Главная » Хабрахабр » [Из песочницы] Стрелочные функции VS Обычные функции

[Из песочницы] Стрелочные функции VS Обычные функции

Привет, Хабр! Представляю вашему вниманию перевод статьи "When (and why) you should use ES6 arrow functions — and when you shouldn’t" автора Cynthia Lee.

Это новый, лаконичный способ написания функций. Стрелочные функции — наиболее популярная фишка ES6.

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

Теперь то же самое при помощи стрелочной функции.

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

Намного короче! Мы можем опустить фигурные скобки и оператор return ( если нет блока, но об этом позже).

Давайте разберемся, чем отличается новый способ от привычного.

Синтаксис

Первое, на что вы быстро обратите внимание, различные вариации синтаксиса. Давайте посмотрим на основные:

1. Без параметров

Если у функции нет параметров, вы можете просто написать пустые круглые скобки перед =>

() => 42

На самом деле, можно вообще без скобок!

_ => 42

1. Один параметр

Круглые скобки тоже не обязательны

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

3. Несколько параметров

Вот тут уже нужны скобки

(x, y) => 42

4. Инструкции

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

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

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

5. Тело фунцкии — блок

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

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

6. Литерал объекта

Если функция возвращает объектный литерал, его нужно заключить в круглые скобки.

x =>({ y: x })

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

Обратите внимание, что стрелочные функции – анонимны, у них нет имени.

Это создает некоторые сложности:

  1. Трудно дебажить

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

  2. Нельзя присвоить переменной

    Если вам нужна ссылка внутри функции на саму себя для чего-то (рекурсия, обработчик событий, который необходимо отменить), ничего не выйдет

Главное преимущество: нет своего this

В обычных функциях this указывает на контекст, в котором эта функция вызвана. this стрелочной функции такой же как this окружения, в котором объявлена стрелочная функция.

Например, посмотрите на функцию setTimeout ниже:

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

В примере выше требуется использовать .bind(this), чтобы передать контекст в функцию. Иначе this будет undefined.

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

В этом примере не нужно привязывать this. Стрелочная функция возьмет значение this из замыкания.

Когда не следует использовать стрелочные функции

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

Вот несколько примеров, когда вам вряд ли захочется их использовать.

1. Методы объекта

Когда вы вызываете cat.jumps, количество жизней не уменьшается. Это происходит потому, что this не привязан ни к чему, и наследует значение из замыкания.

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

2. Функции обратного вызова с динамическим контекстом

Если вам нужен динамический контекст, стрелочная функция — плохой вариант.

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

Если нажать на кнопку, мы получим TypeError. Это связано с тем, что this не привязан к кнопке.

3. Когда ухудшается читаемость кода

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

Когда точно стоит использовать стрелочные функции

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

Также мне очень нравится использовать стрелочные функции во всяких map и reduce — код так лучше читается.


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

[Перевод] Мои любимые примеры функционального программирования в языке Kotlin

Давайте посмотрим и обсудим некоторые простые, но выразительные функции, написанные на языке Kotlin. Одной из замечательных особенностей Kotlin является то, что он поддерживает функциональное программирование. Работа с коллекциями Есть множество разнообразных функций. Kotlin поддерживает удобную работу с коллекциями. Нам нужно ...

[Перевод] 10 цитат плохих дизайнеров

Эта статья подходит к вопросу с другой стороны — в ней я хотел бы поговорить о том, какие признаки указывают на плохого дизайнера. В Интернете есть множество материалов о том, как выявить хорошего дизайнера. Ниже приведу десять цитат, которые помогут ...