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

Новый JavaScript стандарт ES6 принес много улучшений языка, в том числе оператор spread, деструктуризацию объектов, новые типы переменных и тд. И на вершине всех этих потрясающих нововведений находятся стрелочные функции — новый лаконичный способ написания функций.

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

Функции в ES5

Давайте начнем с того, как вообще определить функцию в ES5 JavaScript. Для этого нам понадобится ключевое слово function. К примеру, если нам нужна функция, которая умножает число на 5, то мы можем написать ее таким образом:

JS
function myFunction (num) {
    return num * 5;
}

Если мы захотим, то можем записать результат выполнения функции в переменную.

JS
const myFunction = function(num) {
    return num * 5;
}

Ваша первая стрелочная функция

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

JS
const myFunction = (num) => {
    return num * 5;
}

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

Убираем необязательные скобки

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

JS
const myFunction = num => {
    return num * 5;
}

Неявный return

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

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

JS
const myFunction = num => num * 5;

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

JS
const printName = (first, last) => console.log(`${first} ${last}`);

Используем стрелочные функции в Map и Filter

Одно из наиболее частых мест, где вы можете увидеть использование стрелочных функций - это JavaScript методы для работы с массивами, такие как map, reduce, filter и тд. Используя их с этими методами, становится возможным полноценное преобразование массива одной строкой.

Давайте рассмотрим два примера: один с map, а другой с filter. В примере с map мы умножим каждый элемент массива на 5.

JS
const multiplyArray = [1,2,3,4,5].map( num => num * 5);

Второй пример с фильтром, допустим мы хотим отфильтровать все числа, которые нечетные:

JS
const filteredArray = [1,2,3,4,5].filter( num => num % 2 == 0);

Контекст this и стрелочные функции

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

JS
const user = {
    first: "Ivan",
    last: "Popov",
    getName: function() {
        this.first + " " + this.last
    }
}

В примере выше мы создали объект user со свойствами имя и фамилия. Внутри функции мы обращаемся к ним, вызывая this.first и this.last.

Если функция в ES5 определена в объекте, this относится к самому объекту.

Когда функция определены внутри объекта, он автоматически привязывается к самому объекту. Следовательно, с помощью функций ES5 мы можем ссылаться на свойства объекта, используя «this».

Стрелочные функции не связаны с контекстом объекта.

Однако, когда вы используете стрелочные функции, все немного меняется. В примере ниже в getName вместо обоих свойств будет выведено undefined. Причина в том, что у стрелочных функций ключевое слово this не привязано в объекту user. Понимание этой особенности довольно важно.

JS
const user = {
    first: "Ivan",
    last: "Popov",
    getName: () => {
        return this.first + " " + this.last
    }
}

В заключении

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