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

Синтаксис в стрелочных функциях считается одним из самых удобных и лаконичных для создания функций в JavaScript. «Функции-стрелки» (arrow functions) появились с выходом 6-ой редакции «ECMAScript 6» в июне 2015 года и с тех пор получили большую популярность среди разработчиков. Помимо краткости стрелочные функции не сильно отличаются от обычных, кроме как возможностью пробросить метод this снаружи. Но пойдем по порядку.

Синтаксис

    
    const nameFunc = (param1, param2, param3) => expression            
    

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

const nameFunc - объявляем переменную, куда запишем нашу функцию. Вместо const может быть let.

(param1, param2, param3) - параметры функции (не более 255).

=> - символ стрелочной функции.

expression - тело функции (выражение) - эквивалентно { return expression; }

    
    const countTheBooksOnTheShelves = (shelf1, shelf2, shelf3) => shelf1 + shelf2 + shelf3;
    alert('На полках ' + countTheBooksOnTheShelves(10, 20, 30) + ' книг');
    

Эквивалентной записью в стиле Function Declaration будет

    
    function countTheBooksOnTheShelves(shelf1, shelf2, shelf3) {
        return shelf1 + shelf2 + shelf3;
    }
        
    alert('На полках ' + countTheBooksOnTheShelves(10, 20, 30) + ' книг');    
    

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

    
    const howManyBooksToReadInJS = () => 'Нужно прочитать 1 хорошую книгу по JavaScript - главное не теория, а практика!';
    alert(howManyBooksToReadInJS());
    

Если параметр только один - круглые скобки можно опустить.

    
    const showFavoriteProgrammingLanguage = langName => alert('Мой любимый язык программирования ' + langName);
    showFavoriteProgrammingLanguage('JavaScript');        
    

Все стрелочные функции являются анонимными, которые в свою очередь записываются в переменные. Если допустить ошибку в функции, в console будет видно имя переменной в которую она записана.

Динамическое создание функции

Одной из полезных особенностей стрелочных функций является возможность выбрать тот или иной expression (выражение функции) в зависимости от условий.

    
    let jsPracticeTime = prompt("Сколько часов в день вы практикуете JavaScript?", );

    let showJSLearningIntensity = (jsPracticeTime >= 3) ?
        () => alert('Вы на правильном пути!') :
        () => alert("Надо больше уделять времени практике!");
        
    showJSLearningIntensity();
    

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

Многострочные стрелочные функции

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

    
    let showNamesOfTheProfessionJSProgrammer = () => {
        let name1 = 'Frontend Developer';
        let name2 = 'WEB-разработчик';
        let name3 = 'TypeScript Developer';
        
        return name1 + name2 + name3;
    }
        
    alert('Ключевые слова для поиска работы JS разработчиком: ' + showNamesOfTheProfessionJSProgrammer());
    

При такой записи появляются фигурные скобки {} и return, который уже обязателен, чтобы получить результат.

Итого

Стрелочные функции - это один из способов написания функции наряду с Function Declaration и Function Expression. «Функции-стрелки» отличают: лаконичность синтаксиса, наглядность, особенность работы с this и необязательным return при однострочной записи. В свою очередь возможности работы с this являются особой изюминкой стрелочных функций, которая и придает им особую ценность.