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

Стрелочные функции в 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.

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

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 внутри функции, используя свойства внешнего объекта, — то да, лучше использовать стрелочные функции.

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

Текст:

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

Редактор:

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

Художник:

Алексей Сухов

Корректор:

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

Вёрстка:

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

Соцсети:

Виталий Вебер

Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
Векторы: третий уровень сложности
Векторы: третий уровень сложности

Знакомимся с коллинеарностью.

medium
«Нормально делай и нормально будет»
«Нормально делай и нормально будет»

Даниил Попов о современной андроид-разработке, пользе твиттера и уходе из Авито.

easy
Haskell — ленивый язык программирования
Haskell — ленивый язык программирования

Он сам решает, что и когда нужно посчитать.

easy
Что такое альфа- и бета-версии
Что такое альфа- и бета-версии

Иногда тестировщики — это мы с вами

easy
Контрольная сумма: что это и почему это важно

Рассказываем на примере покупок в магазине.

hard
Что такое RGB и CMYK
Что такое RGB и CMYK

Короткое объяснение цветовых моделей.

easy
130 тысяч рублей за работу бэкенд-разработчика. Что это значит?
130 тысяч рублей за работу бэкенд-разработчика. Что это значит?

Что нужно делать, чтобы получать столько же.

easy
Что такое даркнет

Это не настолько анонимно и не так безопасно, как кажется.

easy
Чем занимаются андроид-разработчики
Чем занимаются андроид-разработчики

И за что получают 103 тысячи рублей.

easy
Как пройти собеседование в ИТ-компанию
Как пройти собеседование в ИТ-компанию

Советы джунам, которые боятся отказа.

easy
Что такое Java и зачем он нужен

Это как JavaScript? Нет!

easy
Чем будем замещать
Чем будем замещать

Бесплатные аналоги необходимого софта

easy
Как работает брелок от домофона

И можно ли использовать его как флешку.

medium
easy