Анонимные и стрелочные функции

Давайте поближе познакомимся с анонимными функциями, то есть, с функциями, у которых нет имени:

function () {
    console.log("это анонимная функция");
};

Но просто объявить такую функцию нельзя, возникнет ошибка выполнения такого кода. Это легко поправить, если присвоить эту функцию какой-либо переменной:

let anonym = function() {
    console.log("это анонимная функция");
};

Теперь ошибки синтаксиса возникать не будет. Мало того, мы теперь можем даже вызвать эту функцию через переменную anonym:

anonym();

Вспоминаем этот синтаксис: чтобы вызвать какую-либо функцию, после ее имени нужно записать круглые скобки. После выполнения мы в консоле увидим сообщение «это анонимная функция».

Этот же синтаксис прекрасно сработает и с именованной функцией, например, так:

let anonym = function func() {
     console.log("это анонимная функция");
};
 
anonym();

Правда, если мы попробуем вызвать функцию по ее второму имени:

func();

то возникнет ошибка, что func не определена. Дело в том, что по приоритетам в глобальной области видимости (то есть, вне функции) будет существовать только переменная anonym, но не переменная func. Имя func существует только внутри самой функции, за ее пределами такого имени уже нет.

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

"use strict";
 
(function () {
    console.log("это анонимная функция");
})();

Обратите внимание, чтобы этот код сработал, после директивы “use strict” нужно поставить точку с запятой. Без точки с запятой интерпретатор будет полагать, что мы прописываем аргумент у строки “use strict” и получим синтаксическую ошибку.

Теперь наша функция вызывается непосредственно в том месте, где объявлена. Это называется функциональным выражением. То есть, когда интерпретатор встречает такую запись, он немедленно выполняет код, находящийся внутри анонимной функции. Функция вызывается благодаря круглым скобкам, записанным после ее объявления. Как пример, такие функции часто используют как аргументы callback-функций, о которых мы немного говорили на прошлом занятии. Приведу здесь еще один пример. Вызовем анонимную функцию через секунду после запуска скрипта. Это делается с помощью стандартной JavaScript-функции setTimeout:

setTimeout(function () {
    console.log("это анонимная функция");
}, 1000);

Здесь первый агрумент – это callback-функция, а второй – задержка исполнения в миллисекундах (1000 мс = 1 сек).

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

В новой спецификации стандарта языка JavaScript – ES6 вводится понятие стрелочных функций. Это такое развитие или, скорее, упрощение анонимных функций. Что это такое? Представим, что у нас вот такая анонимная функция:

let anonym = function () {
    console.log("это анонимная функция");
};

Преобразуем ее в стрелочную. Уберем ключевое слово function, а вместо фигурных скобок запишем вот такие символы => - очень похоже на стрелку.

let anonym = () => console.log("это анонимная функция");
 
anonym();

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

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

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

let anonym = () => "это анонимная функция";
 
console.log (anonym() );

Смотрите как элегантно это выглядит. Если мы хотим что-то вернуть, то просто пишем возвращаемое выражение после стрелки. И никакого оператора return! Мало того, его здесь даже нельзя прописать – будет синтаксическая ошибка. Это все работает только в таком виде. То есть, когда телом стрелочной функции выступает какое-либо одно выражение (в данном случае – это строковый литерал), то записывая его без фигурных скобок, оператор return подразумевается.

Как пример можно записать и такое выражение:

let anonym = () => 48+30;

Увидим в консоле результат суммы – число 78. И так далее. Но, если мы поместим тело функции в фигурные скобки, то возврат уже работать не будет:

let anonym = () => {48+30};

Мы получим значение undefined, как правило, означающее, что функция ничего не возвращает. Чтобы все работало, оператор return здесь обязателен:

let anonym = () => {return 48+30};

Фигурные скобки в стрелочных функциях используются, если тело функции содержит более одного выражения:

let anonym = () => {
    let a = 48, b = 30;
    return a+b;
};

Здесь фигурные скобки обязательны и без них код работать уже не будет.

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

let sum = (a, b) => a+b;
 
console.log ( sum(3, 4) );

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

let show = message => "Сообщение: "+message;
 
console.log ( show("привет мир!") );

Во всех других случаях круглые скобки обязательны:

let show = (from, msg) => {
    let text = from+": "+msg;
    return text;
}
 
console.log ( show("Самообразование", "Привет мир!") );

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

Видео по теме