Основы стрелочных функций в JavaScript

В JavaScript программисты часто работают с функциями — блоками кода, которые можно многократно использовать для различных задач. Это как записать рецепт, а затем снова и снова готовить по нему любимое блюдо.

До 2015 года функции создавали с помощью ключевого слова function. С выходом стандарта ES6 в JavaScript появился альтернативный синтаксис — arrow function, стрелочные функции. Разберёмся, как они устроены и когда их удобно использовать.

Содержание

• Базовый синтаксис
• Объявление через переменную
• Защита от переопределения
• Расширенный синтаксис

• Краткая запись с неявным возвратом
• Запись с одним параметром
• Запись без параметров
• Многострочная запись с явным возвратом
• Запись с параметрами по умолчанию
• Запись с rest-параметром

• Область видимости и контекст this
• Сценарии применения
• Типичные ошибки
• Практические задания

• Исправьте ошибку с возвратом значения
• Перепишите функцию с rest-параметром
• Посчитайте количество чашек кофе

Базовый синтаксис

У стрелочной функции нет собственного имени, и она записывается так:

(parameter1, parameter2) => {
    return result;
};

(parameter1, parameter2) — входные данные (параметры), которые функция получает для обработки. Это могут быть числа, строки и другие значения. Функция может принимать один, несколько или ни одного параметра.

После параметров идёт символ стрелки =>. Он заменяет ключевое слово function, которое используется в обычных функциях. Стрелка визуально отделяет параметры от тела функции и делает запись короче и нагляднее.

В фигурных скобках {…} находится тело функции — блок кода, который выполняется при каждом вызове. Здесь могут проводиться любые действия: вычисления, работа со строками, условия, циклы, вызовы других функций и обработка данных. Например, если функция складывает два числа, она примет их как параметры и вернёт сумму за счёт ключевого слова return.

Объявление через переменную

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

const functionName = (parameter1, parameter2) => {
    return result;
};

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

functionName(value1, value2);

Результат выполнения функции можно вывести в консоль:

console.log(functionName(value1, value2));

Или сохранить в переменную:

const resultValue = functionName(value1, value2);

Для примера создадим функцию, которая вычисляет сумму двух чисел:

// Объявляем стрелочную функцию с двумя параметрами
const calculateSum = (firstNumber, secondNumber) => {
  return firstNumber + secondNumber;
};

// Вызываем функцию и выводим результат
console.log(calculateSum(2, 3)); // 5

// ✅ Код с точками с запятой — безопасен
const sum = (a, b) => {
  return a + b; // Завершаем инструкцию
};              // Ставим точку с запятой после объявления

// ⚠️ Код без точек с запятой — может привести к ошибкам
const multiply = (a, b) => {
  return a * b
}

Защита от переопределения

JavaScript — динамически типизируемый язык, в котором переменные могут менять свой тип данных прямо во время выполнения программы:

let userAge = 25;            // Сохраняем в переменную число
userAge = "двадцать пять";   // Меняем на строку
userAge = false;             // А потом на булево значение

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

// Объявляем функцию обычным способом (function declaration)
function calculatePrice(quantity, price) {
  return quantity * price;
}

console.log(calculatePrice(5, 100)); // 500

// Перезаписываем переменную — теперь это строка, а не функция
calculatePrice = "вычислить цену";

// Делаем новую попытку вызова
console.log(calculatePrice(10, 200)); // TypeError: calculatePrice is not a function

Такие ситуации возникают, когда функция объявлена через function declaration или сохранена в переменную с помощью var или let.

Чтобы избежать случайного переопределения, функции лучше объявлять через const везде, где это возможно. Для этого подойдут функциональные выражения и стрелочные функции — но стрелки обычно компактнее:

// Функциональное выражение
const calculatePrice = function (quantity, price) {
    return quantity * price;
};

console.log(calculatePrice(5, 100)); // 500

calculatePrice = "вычислить цену"; // Ошибка: Assignment to constant variable

// Стрелочная функция
const calculateTotal = (quantity, price) => quantity * price;

console.log(calculateTotal(10, 200)); // 2000

calculateTotal = "посчитать сумму"; // Assignment to constant variable

В примерах выше мы объявили функции через const, проверили их работу и попытались присвоить им строковые значения. JavaScript выдал ошибку Assignment to constant variable, поскольку константы нельзя изменить после присваивания. Благодаря этому наши функции не превратились в строки.

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

Читайте также:

Чем различаются var, let и const в JavaScript

Расширенный синтаксис

Мы уже разобрали базовый синтаксис стрелочных функций. Теперь рассмотрим другие способы их записи: сокращённую форму с неявным возвратом, запись с одним параметром, без параметров, многострочную с явным return, а также с параметрами по умолчанию и rest-параметрами.

Краткая запись с неявным возвратом

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

const addNumbers = (firstValue, secondValue) => {
    return firstValue + secondValue;
};

console.log(addNumbers(5, 3)); // 8

Здесь мы явно указываем возвращаемое значение с помощью return — это называется явным возвратом. Теперь упростим функцию:

const addNumbers = (firstValue, secondValue) => firstValue + secondValue;

console.log(addNumbers(5, 3)); // 8

В новой записи мы опускаем ключевое слово return, но JavaScript всё равно автоматически возвращает результат единственного выражения. Такое поведение стрелочной функции называется неявным возвратом.

Неявный возврат без круглых скобок работает для строк, чисел и других типов данных — за исключением объектов. Если стрелочная функция должна вернуть объект, его нужно обернуть в круглые скобки. Иначе JavaScript воспримет фигурные скобки как начало блока кода и вернёт undefined:

const createPerson = name => ({ name: name });
console.log(createPerson("Нео")); // { name: "Нео" }

// Создадим новую переменную и попробуем вернуть объект без круглых скобок
const newPerson = name => { name: name };
console.log(newPerson("Нео")); // undefined

В отличие от стрелочных функций, обычные функции и функциональные выражения всегда требуют явного указания оператора return. Без него они возвращают undefined, даже если внутри выполняются какие-либо действия:

// ❌ Без return функция ничего не возвращает
function computeArea(width, height) {
  width * height;
}

console.log(computeArea(4, 5)); // undefined

// ✅ С return всё работает
function computeArea(width, height) {
  return width * height;
}

console.log(computeArea(4, 5)); // 20

Запись с одним параметром

Если стрелочная функция принимает один параметр, круглые скобки вокруг него можно опустить. Напишем функцию для вычисления площади квадрата:

const calculateSquareSide = (length) => {
    return length * length;
};

Теперь уберём круглые скобки вокруг параметра и немного упростим запись:

const calculateSquareSide = length => {
    return length * length;
};

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

const calculateSquareSide = length => length * length;

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

const calculateSquareSide = length => length * length;

// Передаём в функцию разные значения и сохраняем результаты в переменных
const smallSquare = calculateSquareSide(4);
const mediumSquare = calculateSquareSide(6);
const largeSquare = calculateSquareSide(10);

// Выводим результат в консоль
console.log('Площадь маленького квадрата:', smallSquare);   // Площадь маленького квадрата: 16
console.log('Площадь среднего квадрата:', mediumSquare);    // Площадь среднего квадрата: 36
console.log('Площадь большого квадрата:', largeSquare);     // Площадь большого квадрата: 100

Запись без параметров

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

const getWelcome = () => "Привет!";
console.log(getWelcome()); // Привет!

Если вы уберёте круглые скобки перед стрелкой, функция не сработает:

const getWelcome = => "Привет!";
console.log(getWelcome()); // Uncaught SyntaxError: Unexpected token '=>'

Многострочная запись с явным возвратом

Создадим функцию, которая принимает два параметра и возвращает объект с тремя свойствами. Для начала рассмотрим вариант с неявным возвратом:

const getPersonInfo = (name, age) => ({ name: name, age: age, greeting: `Привет, меня зовут ${name}!` });

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

const getPersonInfo = (name, age) => {
  return {
    name: name,
    age: age,
    greeting: `Привет, меня зовут ${name}!`
  };
};

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

const person = getPersonInfo('Тор', 1500);
console.log(person); // { name: 'Тор', age: 1500, greeting: 'Привет, меня зовут Тор!' }

Напомним про return: как только функция встречает этот оператор, она завершает выполнение и возвращает значение. Поэтому весь код, который вы напишете после return, интерпретатор JavaScript просто проигнорирует:

const getPersonInfo = (name, age) => {
  console.log('Начало функции');
  
  return {
    name: name,
    age: age,
    greeting: `Привет, меня зовут ${name}!`
  };
  
  // Этот код никогда не выполнится
  console.log('Конец функции');
};

const person = getPersonInfo('Тор', 1500);
console.log(person);

// Вывод в консоли:
// Начало функции
// { name: 'Тор', age: 1500, greeting: 'Привет, меня зовут Тор!' }

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

const getPersonInfo = (name, age) => {
  {
    name: name,
    age: age,
    greeting: `Привет, меня зовут ${name}!`
  };
};

const person = getPersonInfo("Тор", 1500);
console.log(person); // SyntaxError: Unexpected token ':'

Запись с параметрами по умолчанию

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

К примеру, если пользователь не заполнил поле с именем в форме, мы можем использовать стандартное обращение, чтобы вывести понятное сообщение:

const welcomeMessage = (name = "гость") => {
  return `Привет, ${name}!`;
};

console.log(welcomeMessage()); // Привет, гость!
console.log(welcomeMessage("Владимир")); // Привет, Владимир!

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

const userProfile = (name = "гость", age = 18, city = "не указан") => {
  return `Профиль: ${name}, возраст: ${age}, город: ${city}`;
};

console.log(userProfile()); // Профиль: гость, возраст: 18, город: не указан
console.log(userProfile("Максим", 25)); // Профиль: Максим, возраст: 25, город: не указан
console.log(userProfile("Иван", 30, "Москва")); // Профиль: Иван, возраст: 30, город: Москва

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

// Генерируем случайное число от 0 до 99
const getRandom = () => Math.floor(Math.random() * 100);

// Создаём функцию со значением по умолчанию
const showValue = (value = getRandom()) => {
  return `Значение: ${value}`;
};

// Если аргумент не передан, получаем случайное число
console.log(showValue()); // Значение: 73 (у вас будет другое)

// Если аргумент передан, используем переданное значение
console.log(showValue(42)); // Значение: 42

Запись с rest-параметром

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

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

function getUserInfo(name) {
  // Получаем все аргументы начиная со второго
  const hobbies = Array.prototype.slice.call(arguments, 1);
  return `${name} увлекается: ${hobbies.join(', ')}`;
}

console.log(getUserInfo('Алексей', 'рисованием', 'музыкой', 'спортом'));
// Алексей увлекается: рисованием, музыкой, спортом

В стрелочных функциях вместо объекта arguments используются остаточные параметры (rest-параметр). Они записываются с помощью трёх точек перед именем параметра и собирают все оставшиеся аргументы в массив:

const getUserInfo = (name, ...hobbies) => {
  return `${name} увлекается: ${hobbies.join(', ')}`;
};

console.log(getUserInfo('Алексей', 'рисованием', 'музыкой', 'спортом'));
// Алексей увлекается: рисованием, музыкой, спортом

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

// ❌ Неправильно: rest-параметр должен быть последним
const getUserInfo = (...hobbies, name) => {
  return `${name} увлекается: ${hobbies.join(', ')}`;
};

console.log(getUserInfo('рисованием', 'музыкой', 'спортом', 'Алексей'));
// SyntaxError: Rest parameter must be last formal parameter

// Всегда используем явный return
const add = (a, b) => { return a + b; };
const square = x => { return x * x; };
const getMessage = () => { return 'Hello!'; };

Область видимости и контекст this

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

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

В JavaScript обычные функции «всплывают» — это значит, что их можно вызвать ещё до того, как они объявлены в коде:

greetAstronaut(); // Добро пожаловать на борт!

function greetAstronaut() {
  console.log("Добро пожаловать на борт!");
}

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

greetAlien(); // ReferenceError: Cannot access 'greetAlien' before initialization

const greetAlien = () => {
  console.log("Контакт установлен!");
};

greetAlien(); // Контакт установлен!

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

const greetNavigator = function () {
  console.log("Внимание, навигатор!");
};

greetNavigator(); // Внимание, навигатор!

Если не учитывать всплытие, обычные и стрелочные функции ведут себя одинаково — они работают только внутри той области, где были объявлены.

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

{
  const giveOrder = () => {
    const command = "Запустить двигатель";
    console.log(command);
  };

  const relayMessage = function () {
    const message = "Принять сигнал";
    console.log(message);
  };

  // Вызываем функции внутри блока — всё работает
  giveOrder();     // ✅ Запустить двигатель
  relayMessage();  // ✅ Принять сигнал
}

// Вызываем функции и переменные снаружи — получаем ошибки
giveOrder();           // ❌ ReferenceError
console.log(command);  // ❌ ReferenceError
relayMessage();        // ❌ ReferenceError
console.log(message);  // ❌ ReferenceError

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

const crew = {
  title: "Главный инженер",

  // Обычная функция: получает собственный this при вызове
  report: function () {
    console.log("Обычная функция:", this.title);
  },

  // Стрелочная функция: не создаёт свой this, берёт его снаружи
  announce: () => {
    console.log("Стрелочная функция:", this.title);
  }
};

// Обычная функция: this указывает на crew
crew.report();   // Главный инженер

// Стрелочная функция не видит объект crew как this
crew.announce(); // undefined

Контекст — одна из сложных тем в JavaScript. Он тесно связан со стрелочными функциями, явным и неявным связыванием this, методами bind (), call (), apply (), а также с поведением this в классах и конструкторах. Все эти особенности мы обязательно разберём отдельно.

Сценарии применения

У стрелочных функций короткий современный синтаксис, который часто встречается в учебных материалах, библиотеках и проектах. Рассмотрим основные ситуации, в которых с ними чаще всего сталкиваются новички.

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

Например, округлим число до ближайшего целого:

const round = num => Math.round(num);

console.log(round(4.7)); // 5

Методы массивов с колбэками. Колбэк — это функция, которую передают как аргумент в другую функцию, чтобы та вызвала её позже. В массивах колбэки используются для перебора элементов, фильтрации по условиям, поиска нужного значения, преобразования каждого элемента или подсчёта общего результата. Умножим каждое число на 2 с помощью метода map ():

const round = num => Math.round(num);

console.log(round(4.7)); // 5

Читайте также:

Методы массивов в JavaScript: объясняем на пальцах для новичков

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

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Обработка клика по кнопке</title>
  </head>
  <body>
    <button id="myButton">Нажми меня</button>
    <div id="message"></div>

    <script>
      // Находим кнопку по id
      const button = document.getElementById("myButton");

      // Находим блок для вывода сообщения
      const message = document.getElementById("message");

      // Обработчик события "click"
      button.addEventListener("click", () => {
        message.textContent = "Привет! Ты нажал на кнопку.";
      });
    </script>
  </body>
</html>

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

Вызовем функцию с задержкой в две секунды с помощью setTimeout:

setTimeout(() => {
  console.log("Прошло две секунды");
}, 2000); // Прошло две секунды

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

const createGreeting = name => {
  const format = text => text.toUpperCase();
  return `Привет, ${format(name)}!`;
};

console.log(createGreeting("Лев")); // Привет, ЛЕВ!

Типичные ошибки

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

❌ Не указаны скобки при пустых параметрах:

const ping = => "pong";

console.log(ping()); // SyntaxError: Unexpected token '=>'

✅ Скобки обязательны:

const fixedPing = () => "pong";

console.log(fixedPing()); // pong

❌ Отсутствует return в многострочной записи:

const calculatePower = () => {
  const base = 2;
  const exponent = 3;
  base ** exponent;
};

console.log(calculatePower()); // undefined

✅ Добавляем return:

const fixedCalculatePower = () => {
  const base = 2;
  const exponent = 3;
  return base ** exponent;
};

console.log(fixedCalculatePower()); // 8

❌ Возврат объекта без скобок:

const createBadge = () => { label: "Guest" };

console.log(createBadge()); // undefined

✅ Оборачиваем объект в скобки:

const fixedCreateBadge = () => ({ label: "Guest" });

console.log(fixedCreateBadge()); // { label: 'Guest' }

❌ Запись return без фигурных скобок:

const showScore = () => return 100;

console.log(showScore()); // SyntaxError: Unexpected token 'return'

✅ Добавляем фигурные скобки:

const fixedShowScore = () => {
  return 100;
};

console.log(fixedShowScore()); // 100

❌ Вызов функции за пределами её области видимости:

{
  const status = "ready";
  const getStatus = () => status;
}

console.log(getStatus()); // ReferenceError: getStatus is not defined

✅ Вызов функции внутри области видимости:

{
  const status = "ready";
  const getStatus = () => status;

  console.log(getStatus()); // ready
}

❌ Некорректное использование this в объекте:

const profile = {
  name: "Лея",
  getName: () => this.name
};

console.log(profile.getName()); // undefined

✅ Заменяем стрелочную функцию на обычную:

const fixedProfile = {
  name: "Лея",
  getName() {
    return this.name;
  }
};

console.log(fixedProfile.getName()); // Лея

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

Чтобы быстрее понимать чужой (и свой) код, используйте JSDoc — это формат комментариев, который поддерживается в редакторах вроде VS Code. Он показывает описание функции, параметры и возвращаемое значение прямо при наведении.

Напишите /** перед функцией и нажмите Enter — редактор подскажет шаблон. Заполните описание, укажите параметры через @param и результат через @returns.

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

const calculateLoad = (base, extra) => base + extra;

console.log(calculateLoad(10, 15)); 

Если вы всё сделали правильно, в VS Code появится следующее:

Практические задания

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

Исправьте ошибку с возвратом значения

Есть простая стрелочная функция, которая должна возвращать строку с приветствием, но при запуске в консоли выводится undefined — значение не определено. Разберитесь, что не так, и исправьте ошибку:

const getGreeting = () => {
    return
    "Привет из стрелочной функции!";
};

console.log(getGreeting());

const getGreeting = () => {
    return // ← JavaScript вставляет точку с запятой 
    "Привет из стрелочной функции!"; // До этой строки интерпретатор не доходит
};

console.log(getGreeting()); // undefined

const getGreeting = () => {
    return "Привет из стрелочной функции!";
};

console.log(getGreeting()); // Привет из стрелочной функции!

Перепишите функцию с rest-параметром

Перед вами обычная функция, которая умеет складывать любое количество чисел. Перепишите её в виде стрелочной функции с помощью rest-параметра:

function sumArguments() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sumArguments(1, 2, 3));        // 6
console.log(sumArguments(10, 20, 30, 40)); // 100

const sumArguments = (...numbers) => {
  let total = 0;

  // Складываем все числа из массива
  for (let i = 0; i < numbers.length; i++) {
    total += numbers[i];
  }

  return total; // Возвращаем сумму
};

console.log(sumArguments(1, 2, 3));        // 6
console.log(sumArguments(10, 20, 30, 40)); // 100

➤ Дополнительное задание: попробуйте решить задачу с помощью метода массива reduce(). Это позволит заменить цикл for и сделать код короче.

Посчитайте количество чашек кофе

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

totalCups(4);   // 5
totalCups(9);   // 11
totalCups(25);  // 31

const totalCups = (purchased) => {
  return purchased + Math.floor(purchased / 4);
};

console.log(totalCups(4));   // 5
console.log(totalCups(9));   // 11
console.log(totalCups(25));  // 31