Если вы устали каждый раз писать длинное ключевое слово function при создании функций и хотите, чтобы ваш JavaScript-код выглядел компактно, то впору задуматься об использовании стрелочных функций. 

Привет! Меня зовут Александр Дудукало, я автор базового курса по JavaScript. В этой статье расскажу, как стрелочные функции помогают сокращать записи функций, делают код визуально чище и как использовать их без потери смысла. Также покажу, чем обычные функции проигрывают стрелочным и почему одно нельзя заменить другим.

Что уже знаем о функциях

Итак, функцию можно объявить, указав ключевое слово function, имя, параметры (если они нужны) и тело, в котором можно выполнить действие и вернуть значение. Для примера напишем функцию, которая вычисляет возраст по году рождения.

function getAge(year) {
 const currentYear = new Date().getFullYear(); // Текущий год
 return currentYear - year;
}

console.log('Возраст:', getAge(1997));

Такой способ объявления функции называется Function Declaration.

Function Declaration — это способ объявления функции, при котором она создается в виде отдельной инструкции, начиная с ключевого слова function, и сразу получает имя.

Когда удобно использовать

• Когда нужно объявить функцию «как команду» в коде

• Когда важно, чтобы функция была видна во всем файле (до ее объявления)

• Для основных «рабочих» функций, которые используются многократно

Также функцию можно записать как выражение и сохранить в переменную. На самом деле, в переменную попадает ссылка на функцию — это важный концепт, о котором я буду подробно рассказывать в следующих статьях. А пока просто запомните, что функцию можно присвоить в переменную (константу) и вызвать через ее имя:

const getAge = function(year) {
 const currentYear = new Date().getFullYear();
 return currentYear - year;
};

console.log('Возраст:', getAge(1997));

Результат в консоли — тот же, но использован другой синтаксис. Он называется Function Expression.

Function Expression — это функциональное выражение, в котором функция создается внутри выражения (обычно присваивания) и может быть анонимной (без имени) или именованной, но не поднимается вверх по коду, как в Function Declaration.

Когда удобно использовать

• Когда нужно передать функцию как значение — например, как обработчик события onclick или как аргумент другой функции.

• Когда функция используется как часть логики внутри другого кода.

• Когда важно контролировать область видимости функции.

Обратите внимание: в примерах я использую const, а не let. Константы отличаются от обычных переменных тем, что в них нельзя переприсвоить значение. В JavaScript функции часто хранят в константах, чтобы случайно не перезаписать их. Поэтому дальше в курсе я тоже буду использовать const, чтобы вы к этому привыкли.

Это все, что вы уже должны знать о функциях. Они удобны, лаконичны, помогают структурировать код и делают его самодокументируемым благодаря говорящим названиям. Но есть ли еще способы описания функций?

30+ бесплатных курсов на IT-темы в Академии Selectel

Для начинающих и опытных специалистов.

Изучить →

Еще один способ — стрелочные функции

Стрелочная функция — это современный способ записи функции в JavaScript, при котором используется специальный синтаксис => (стрелка) вместо ключевого слова function.

Использование стрелочных функций помогает сократить код и сделать его визуально более компактным. Перепишем нашу функцию в формате стрелочной:

// const getAge = function(year) {
//   const currentYear = new Date().getFullYear();
//   return currentYear - year;
// };

const getAge = (year) => {
 const currentYear = new Date().getFullYear();
 return currentYear - year;
};

console.log('Возраст:', getAge(1997));

Мы убрали ключевое слово function и заменили его на стрелку => после круглых скобок с параметрами. Отсюда и название — «стрелочные функции». Код стал короче и читается легче. А саму такую запись называют Arrow Function Expression.

Arrow Function Expression — это функциональное выражение, в котором функция записывается с использованием синтаксиса =>.

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

• Стрелочные функции не имеют своего this, поэтому ведут себя иначе внутри объектов.

• У них нет собственного объекта arguments — вместо него используется rest-синтаксис (...args).

• Стрелочные функции нельзя использовать как конструкторы вместе с new.

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

Здорово, с понятием разобрались. Переходим к видам записи стрелочных функций — обещаю, будет еще короче.

Сокращенная запись

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

Вариант 1. Без круглых скобок при одном параметре:

const getAge = year => {
 const currentYear = new Date().getFullYear();
 return currentYear - year;
};

console.log('Возраст:', getAge(1997));

Здесь мы убрали круглые скобки вокруг параметра year. Так можно делать только если параметр один. Если параметров два и больше, скобки обязательны: ((a, b) => { ... }).

Вариант 2. Неявный return (implicit return):

const getAge = year => new Date().getFullYear() - year;

console.log('Возраст:', getAge(2001));

Фигурные скобки убраны, поэтому результат выражения возвращается автоматически (неявный return). Такая запись максимально короткая и часто используется в простых вычислениях.

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

const getUser = (name, age) => ({
 name: name,
 age: age
});

console.log(getUser('Андрей', 27));

В целом, это самые популярные формы записи стрелочных функций. Особенно часто они используются как колбеки (аргументы) в других функциях.

Практика. Расчет стоимости покупки

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

Конечно, что-то тут можно сделать по-другому — например, использовать встроенные методы и более «умные» техники создания элементов. Но важно, что в примере я использую только те конструкции, которые мы уже проходили.

Пример мини-приложения без стрелочных функций:

// Массив для хранения товаров
const products = [];

// Создаём список <ul> для отображения товаров
const listEl = document.createElement('ul');

// Создаём кнопку "Добавить"
const addButtonEl = document.createElement('button');
addButtonEl.textContent = 'Добавить';

// Обработчик клика по кнопке "Добавить"
addButtonEl.onclick = function () {
 const productName = prompt('Введите название товара');
 const productPrice = Number(prompt('Введите стоимость товара'));

 // Проверка введённых значений
 if (!productName || !productPrice) {
   alert('Введите корректное значение');
   return;
 }

 // Добавляем товар в массив
 products.push({
   name: productName,
   price: productPrice,
 });

 renderList();
};

// Элемент для вывода общей цены
const totalPriceEl = document.createElement('div');

// Функция, создающая <li> для каждого товара
function getItemEl(index, item) {
 const itemEl = document.createElement('li');
 itemEl.textContent = `${index + 1}) ${item.name}, стоимость: ${item.price} руб.`;

 // Кнопка "Удалить" для товара
 const deleteButtonEl = document.createElement('button');
 deleteButtonEl.textContent = 'Удалить';

 deleteButtonEl.onclick = function () {
   products.splice(index, 1); // удаляем товар
   renderList(); // обновляем отображение
 };

 itemEl.append(deleteButtonEl);
 return itemEl;
}

// Функция отрисовки списка и подсчёта общей стоимости
function renderList() {
 let totalPrice = 0;
 listEl.innerHTML = '';

 for (let i = 0; i < products.length; i++) {
   listEl.append(getItemEl(i, products[i]));
   totalPrice += products[i].price;
 }

 totalPriceEl.textContent = `Стоимость покупки: ${totalPrice} руб.`;
}

// Добавляем элементы на страницу
document.body.append(listEl, totalPriceEl, addButtonEl);

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

Пример мини-приложения со стрелочными функциями:

const products = [];

// <ul> для списка товаров
const listEl = document.createElement('ul');

// Кнопка "Добавить"
const addButtonEl = document.createElement('button');
addButtonEl.textContent = 'Добавить';

// Обработчик клика — стрелочная функция
addButtonEl.onclick = () => {
 const productName = prompt('Введите название товара');
 const productPrice = Number(prompt('Введите стоимость товара'));

 // Проверка введённых значений
 if (!productName || !productPrice) {
   alert('Введите корректное значение');
   return;
 }

 products.push({
   name: productName,
   price: productPrice,
 });

 renderList();
};

// <div> для общей стоимости
const totalPriceEl = document.createElement('div');

// Стрелочная функция, создающая <li> для товара
const getItemEl = (index, item) => {
 const itemEl = document.createElement('li');
 itemEl.textContent = `${index + 1}) ${item.name}, стоимость: ${item.price} руб.`;

 const deleteButtonEl = document.createElement('button');
 deleteButtonEl.textContent = 'Удалить';

 deleteButtonEl.onclick = () => {
   products.splice(index, 1);
   renderList();
 };

 itemEl.append(deleteButtonEl);
 return itemEl;
};

// Отрисовка списка и подсчёт стоимости (тоже стрелочная)
const renderList = () => {
 let totalPrice = 0;
 listEl.textContent = '';

 for (let i = 0; i < products.length; i++) {
   listEl.append(getItemEl(i, products[i]));
   totalPrice += products[i].price;
 }

 totalPriceEl.textContent = `Стоимость покупки: ${totalPrice} руб.`;
};

document.body.append(listEl, totalPriceEl, addButtonEl);

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

Подводим итоги

Стрелочные функции делают код короче и лаконичнее. Это особенно важно, когда нужно написать простую функцию. 

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