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

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

Текст:

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

Редактор:

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

Художник:

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

Корректор:

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

Вёрстка:

Никита Кучеров

Соцсети:

Олег Вешкурцев

Веб-разработка — это новый черный
А мы знаем толк в моде и поможем освоить новую специальность за полгода.
Посмотреть
Фронтенд — это новый черный
Еще по теме
prev
next
Векторы: третий уровень сложности
Векторы: третий уровень сложности

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

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

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

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

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

Почему Ruby — особенный язык

Потому что он прост как JavaScript и многогранен как С++.

Как задавать размеры шрифта в вёрстке
Как задавать размеры шрифта в вёрстке

Всё просто, но есть нюанс.

Как работает беспроводная зарядка
Как работает беспроводная зарядка

Всё дело в магнитном поле.

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

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

Как стать контент-менеджером (и зачем)
Как стать контент-менеджером (и зачем)
Объясни мне: как устроен интернет
Объясни мне: как устроен интернет

Часть 1: Компьютеры и сеть.

Объясняем объекты

Главное понятие современных подходов к программированию.

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

Говорят, что это одновременно C++ и Haskell.

Зачем нужен нормализатор CSS
Зачем нужен нормализатор CSS

Хорошая практика веб-разработчиков.

Я ничего не понимаю в ИТ. С чего начать?

Простой план для начинающих.

easy