Стрелочные функции в 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
iTerm2: модный терминал маковода
iTerm2: модный терминал маковода

Как установить и начать пользоваться.

easy
Декомпозиция задач: что это и зачем нужно
Декомпозиция задач: что это и зачем нужно

И как сделать так, чтобы всё шло по плану.

easy
За что не любят программистов

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

easy
Нужно ли вам учить Swift?

Что особенного в этом языке и чем он выгоден.

easy
119 тысяч рублей за то, чтобы делать приложухи — это справедливо?

Краткий гид по работе мобильного разработчика

easy
Что такое канбан
Что такое канбан

Самый узнаваемый атрибут айтишных команд.

easy
Что такое перегрузка операторов
Что такое перегрузка операторов

Для тех, кто пытался, но не понял.

hard
Объясни мне: как опубликовать свой сайт в интернете

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

medium
Роман Халкечев, руководитель направления аналитики в Яндекс.Еде и Лавке
Роман Халкечев, руководитель отдела аналитики в Яндекс.Еде и Лавке

Часть 1: о ШАД и начале карьеры.

medium
easy