Одной и популярной фичей с появлением ES6 стали стрелочные функции, которые позволяют выполнять краткий способ записи функции в скриптах. В данном посту мы поговорим именно об этой возможности, и разберем возможности использования их в коде.
Для начала стоит привести простой пример, традиционного способа использования функции в ES5. Создадим простую функцию, которая будет получать в качестве параметра число, и умножать его на 2.
function byTwo(Num) {
return Num * 2
}
byTwo(5); // 10
Чтобы сделать подобную операцию, но с использованием стрелочной функции, можно использовать запись такого вида:
var byTwo = Num => Num * 2 byTwo(5); // 10
Получили запись, которая гораздо короче. Таким образом, в данном случае есть возможность не использовать фигурные скобки, а также оператор return. Здесь используется неявный возврат, и так же отсутствуют блоки. Стоит отметить основные отличия поведения стрелочных функций от обычных ES5 функций.
Первое, что бросается в глаза при их использовании, это вариативность синтаксиса. Стоит рассмотреть самые популярные случаи использования стрелочных функций.
Как мы уже знаем параметры функции передаются посредством скобок. Если параметров нет, то скобки можно оставить пустыми. Таким образом, запись стрелочной функции без передачи параметров будет выглядеть таким образом:
() => 52
Однако скобки как оказалось можно не использовать, в результате получаем запись вида:
_ => 52
Кроме того, если в функции не планируется использовать более одного параметра, то по аналогии можно вместо скобок указывать имя параметра.
x => 52 || (x) => 52
Условие «или» в коде обозначает что они являются аналогами.
Если в стрелочной функции используются несколько параметров, то круглые скобки использовать обязательно.
(x, y) => 52
Существует синтаксис для объявления функции function expression, который наглядно отображает что функция является всего лишь разновидностью значения переменной. Результат function expression будет значение. Что касается function statements, то здесь результатом работы функции будет какое-либо действие.
В стрелочных функциях function statements требует наличия фигурных скобок, а также оператор return.
var hungryCat = (cat) => {
if (cat === 'hungry') {
return 'Нужно покормить кота!';
} else {
return 'Кот не голоден!';
}
}
Наличие фигурных скобок в подобных случаях всегда требуют присутствия оператора return.
Литерал объекта представляет из себя список свойств, заключённые в фигурные скобки, в формате «имя: значение». В стрелочных функциях если вы объявляете литерал объекта, то здесь следует выделить их скобками. Таким образом, интерпретатор после определения содержимого внутри скобок, будет возвращать литерал объекта.
x =>({ y: x })
Отличительная особенность стрелочных функции — это анонимность, говоря простым языком они не имеют названий. В свою очередь, их использование может нести некоторые неудобства. Так к примеру, получив ошибку, отследить номер строки где возникла ошибка будет гораздо сложнее, это может замедлить процесс отладки кода. Другая особенность, это отсутствие возможности сослаться на саму себя. Это бывает нужно, когда требуется рекурсия, в других случаях, например, может потребоваться отвязать обработчик событий, и это не сработает.
В зависимости от контекста вызова функции, в классическом выражении this привязывается к различным значениям, которым оно вызвано. Что касается стрелочных функций, то здесь this является лексически привязанным. Проще говоря, ключ this используется в той части кода, в которой содержится стрелочная функция. Для наглядности, давайте рассмотрим пример с функцией setTimeout().
Реализация на ES5:
var obj = {
id: 42,
counter: function counter() {
setTimeout(function() {
console.log(this.id);
}.bind(this), 1000);
}
};
Реализация на ES6:
var obj = {
id: 42,
counter: function counter() {
setTimeout(() => {
console.log(this.id);
}, 1000);
}
};
Отличие этих функций в том, что для ES5 чтобы добраться до нужной функции, нужно использовать .bind(this), иначе this определён не будет. Что касается стрелочной функции в ES6, то тут нет привязки к ключевому слову this. Значение this будет определяться выше, в той области, где оно было определено.
Стрелочные функции не являются альтернативой обычным функциям, стоит это понимать. Использовать их нужно тогда, когда это действительно может быть удобным. К примеру, стрелочные функции могут хорошо подойти там, где нужно делать привязку ключа this к контексту, а не к самой функции. Для callback функций с динамическим контекстом стрелочные функции являются не очень удобными, также, как и в случае объектных методов.
