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

Недавно мы делали проект с колесом фортуны. И был там странный способ определять функции — стрелочный. Это способ сэкономить строки кода и сделать код читаемым, но также с его помощью можно превратить код в кашу. Разберём, как устроены стрелочные функции в JavaScript.

О чём речь

В проекте с колесом у нас был такой фрагмент кода:

// создаём функцию, которая нарисует колесо в сборе
const setupWheel = () => {
  // сначала секторы
  createConicGradient();
  // потом текст
  createPrizeNodes();
  // а потом мы получим список всех призов на странице, чтобы работать с ними как с объектами
  prizeNodes = wheel.querySelectorAll(".prize");
};

В комментарии написано, что мы объявляем функцию, но в коде нет стандартной формы объявления function(){}. Вместо этого идёт константа, потом оператор присваивания, скобки, стрелка и какой-то код. Так вот, это и есть пример объявления стрелочной функции. Сейчас объясним подробнее.

Как объявить стрелочную функцию

Чтобы объявить стрелочную функцию, делают так:

let ИмяФункции = (Аргумент1, Аргумент2…) => ДействияФункции

Вместо let можно использовать const — результат будет такой же. Получается, что мы как бы объявляем переменную, которая что-то умеет делать. Чтобы использовать такую переменную, нужно написать её имя и в скобках передать аргументы — точно так же, как и при использовании обычной функции.

Вот самый простой пример использования стрелочной функции:

let sum = (a, b) => a + b;

Здесь мы объявили функцию sum(), которой передаются два аргумента. Внутри функции они складываются, а результат сложения возвращается при вызове функции. По этой причине вызов sum(2,3) вернёт число 5.

Простой калькулятор на JavaScript

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

let sum = (a, b){

  return a + b;

  alert(a + b);

}

Чем стрелочные функции отличаются от обычных

На самом деле отличий почти нет — это такие же функции, как и обычные. Например, let sum = (a, b) => a + b; — это то же самое, как если бы мы сделали так:

let sum = function(a, b) {

  return a + b;

};

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

👉 Единственное, чем на самом деле отличаются стрелочные и обычные функции, — это возможность пробросить метод объекта this снаружи, а не обращаться к его вложенному значению внутри функции. Но если вы уже дошли в проектах до таких тонкостей — вы уже знаете достаточно, чтобы разобраться в этом самостоятельно, коллега.

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

Действительно полезное свойство стрелочных функций — возможность выбрать содержимое функции в зависимости от значений других переменных.

Допустим, если мы пишем вежливого чат-бота, то делаем такую логику:

спрашиваем, сколько человеку лет;
если ему меньше 18, то говорим ему «Привет»;
иначе говорим «Здравствуйте».

Запишем это в виде стрелочной функции:

// спрашиваем возраст
let age = prompt("Сколько вам лет?", 18);

// определяем код, который будет выполняться внутри функции
// если возраст меньше 18 лет — внутри функции окажется код из первой строки
let welcome = (age < 18) ?
  () => alert('Привет') :
  // а если возраст больше 18 — то внутри функции окажется эта строка
  () => alert("Здравствуйте!");

// приветствуем человека в чате
welcome();

Зачем они нужны, если есть обычные?

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

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

Вывод простой: если вы задаёте себе этот вопрос — вам пока не нужны стрелочные функции. Но знать о них стоит уже сейчас.

Текст и иллюстрации:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Мария Дронова