Обложка канала

Frontender's notes

Годные заметки, новости, видео и интересные статьи для Frontend разработчиков.

Frontender's notes

5 лет назад
Открыть в
​​🎯Функции-стрелки в JavaScript.🚀

Существует ещё более простой и краткий синтаксис для создания функций, который часто лучше, чем синтаксис Function Expression.
Он называется «функции-стрелки» или «стрелочные функции» (arrow functions), т.к. выглядит следующим образом:

let func = (arg1, arg2, ...argN) => expression

Такой код создаёт функцию func с аргументами arg1..argN и вычисляет expression с правой стороны с их использованием, возвращая результат.
Другими словами, это более короткий вариант такой записи:

let func = function(arg1, arg2, ...argN) {
return expression;
};

Давайте взглянем на конкретный пример:

let sum = (a, b) => a + b;
/* Более короткая форма для:
let sum = function(a, b) {
return a + b;
};
*/
alert( sum(1, 2) ); // 3

То есть, (a, b) => a + b задаёт функцию с двумя аргументами a и b, которая при запуске вычисляет выражение справа a + b и возвращает его результат.
Если у нас только один аргумент, то круглые скобки вокруг параметров можно опустить, сделав запись ещё короче:

let sayHi = () => alert("Hello!");
sayHi();

Функции-стрелки могут быть использованы так же, как и Function Expression.
Например, для динамического создания функции:

let age = prompt("Сколько Вам лет?", 18);

let welcome = (age < 18) ?
() => alert('Привет') :
() => alert("Здравствуйте!");

welcome(); // теперь всё в порядке
Поначалу функции-стрелки могут показаться необычными и трудночитаемыми, но это быстро пройдёт, как только глаза привыкнут к этим конструкциям.
Они очень удобны для простых однострочных действий, когда лень писать много букв.
// тоже что и
// let double = function(n) { return n * 2 }
let double = n => n * 2;

alert( double(3) ); // 6
Если нет аргументов, указываются пустые круглые скобки:
let sayHi = () => alert("Hello!");
sayHi();

Функции-стрелки могут быть использованы так же, как и Function Expression.
Например, для динамического создания функции:

let age = prompt("Сколько Вам лет?", 18);
let welcome = (age < 18) ?
() => alert('Привет') :
() => alert("Здравствуйте!");
welcome(); // теперь всё в порядке

Поначалу функции-стрелки могут показаться необычными и трудночитаемыми, но это быстро пройдёт, как только глаза привыкнут к этим конструкциям.
Они очень удобны для простых однострочных действий, когда лень писать много букв.