Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#База знаний</a>

2 <ul><li>24 апр 2025</li>

3 <li>0</li>

4 </ul>Как пишутся, где применяются и чем отличаются от обычных функций.

5 - Иллюстрация: Polina Vari для Skillbox Media

5 + Иллюстрация: Polina Vari дл�� Skillbox Media

6 Автор статей о программировании. Изучает Python, разбирает сложные термины и объясняет их на пальцах новичкам. Если что-то непонятно - возможно, вы ещё не прочли его следующую публикацию.

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

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

9 Содержание

10 <ul><li><a>Базовый синтаксис</a></li>

11 <li><a>Объявление через переменную</a></li>

12 <li><a>Защита от переопределения</a></li>

13 <li><a>Расширенный синтаксис</a></li>

14 </ul><ul><li><a>Краткая запись с неявным возвратом</a></li>

15 <li><a>Запись с одним параметром</a></li>

16 <li><a>Запись без параметров</a></li>

17 <li><a>Многострочная запись с явным возвратом</a></li>

18 <li><a>Запись с параметрами по умолчанию</a></li>

19 <li><a>Запись с rest-параметром</a></li>

20 </ul><ul><li><a>Область видимости и контекст this</a></li>

21 <li><a>Сценарии применения</a></li>

22 <li><a>Типичные ошибки</a></li>

23 <li><a>Практические задания</a></li>

24 </ul><ul><li><a>Исправьте ошибку с возвратом значения</a></li>

25 <li><a>Перепишите функцию с rest-параметром</a></li>

26 <li><a>Посчитайте количество чашек кофе</a></li>

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

28 (parameter1, parameter2) => { return result; };(parameter1, parameter2) - входные данные (параметры), которые функция получает для обработки. Это могут быть числа, строки и другие значения. Функция может принимать один, несколько или ни одного параметра.

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

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

31 Стрелочная функция (arrow function) - это официальное и самое распространённое название, которое вы встретите в документации ES6.

32 Иногда используют и другие варианты:

33 <ul><li>"функция-стрелка" - неформальное сокращение;</li>

34 <li>"стрелка" - ещё короче, если из контекста понятно, о чём речь;</li>

35 <li>ES6 arrow function - подчёркивает, что синтаксис появился в шестой редакции стандарта.</li>

36 </ul>Также вам могут встретиться названия вроде "жирная стрелка" или "функция без this", но это скорее попытки объяснить поведение или внешний вид, чем общепринятые термины. Старайтесь придерживаться названия arrow function или "стрелочная функция", особенно на этапе изучения языка.

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

38 const functionName = (parameter1, parameter2) => { return result; };После объявления стрелочную функцию можно использовать в любом месте кода в пределах её <a>области видимости</a>. Для этого достаточно указать имя переменной и добавить круглые скобки с аргументами, если они нужны:

39 functionName(value1, value2);Результат выполнения функции можно вывести в консоль:

40 console.log(functionName(value1, value2));Или сохранить в переменную:

41 const resultValue = functionName(value1, value2);Для примера создадим функцию, которая вычисляет сумму двух чисел:

42 // Объявляем стрелочную функцию с двумя параметрами const calculateSum = (firstNumber, secondNumber) => { return firstNumber + secondNumber; }; // Вызываем функцию и выводим результат console.log(calculateSum(2, 3)); // 5Обратите внимание: точки с запятой необходимы после закрывающей фигурной скобки и после инструкций внутри функции. Это связано с правилами JavaScript по завершению инструкций. Хотя язык поддерживает<a>автоматическую вставку точек с запятой</a>, лучше ставить их вручную - это поможет избежать неожиданных ошибок и сделает код более понятным:

43 // ✅ Код с точками с запятой - безопасен const sum = (a, b) => { return a + b; // Завершаем инструкцию }; // Ставим точку с запятой после объявления // ⚠️ Код без точек с запятой - может привести к ошибкам const multiply = (a, b) => { return a * b }JavaScript -<a>динамически типизируемый язык</a>, в котором переменные могут менять свой тип данных прямо во время выполнения программы:

44 let userAge = 25; // Сохраняем в переменную число userAge = "двадцать пять"; // Меняем на строку userAge = false; // А потом на булево значениеДинамическая типизация может привести к ошибкам - например, если вы случайно переопределите функцию другим типом данных:

45 // Объявляем функцию обычным способом (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.

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

47 // Функциональное выражение 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, поскольку константы нельзя изменить после присваивания. Благодаря этому наши функции не превратились в строки.

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

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

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

51 const addNumbers = (firstValue, secondValue) => { return firstValue + secondValue; }; console.log(addNumbers(5, 3)); // 8Здесь мы явно указываем возвращаемое значение с помощью return - это называется явным возвратом. Теперь упростим функцию:

52 const addNumbers = (firstValue, secondValue) => firstValue + secondValue; console.log(addNumbers(5, 3)); // 8В новой записи мы опускаем ключевое слово return, но JavaScript всё равно автоматически возвращает результат единственного выражения. Такое поведение стрелочной функции называется неявным возвратом.

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

54 const createPerson = name => ({ name: name }); console.log(createPerson("Нео")); // { name: "Нео" } // Создадим новую переменную и попробуем вернуть объект без круглых скобок const newPerson = name => { name: name }; console.log(newPerson("Нео")); // undefinedВ отличие от стрелочных функций, обычные функции и функциональные выражения всегда требуют явного указания оператора return. Без него они возвращают undefined, даже если внутри выполняются какие-либо действия:

55 // ❌ Без 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Если стрелочная функция принимает один параметр, круглые скобки вокруг него можно опустить. Напишем функцию для вычисления площади квадрата:

56 const calculateSquareSide = (length) => { return length * length; };Теперь уберём круглые скобки вокруг параметра и немного упростим запись:

57 const calculateSquareSide = length => { return length * length; };Поскольку тело функции состоит всего из одного выражения, мы можем ещё больше сократить запись и использовать неявный возврат значения:

58 const calculateSquareSide = length => length * length;Для закрепления давайте попрактикуемся и используем нашу стрелочную функцию для вычисления площади квадратов с разной длиной стороны:

59 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Если стрелочная функция не принимает параметров, перед стрелкой нужно указать пустые круглые скобки. Они показывают, что функция не принимает аргументов. Создадим функцию, которая просто с нами поздоровается:

60 const getWelcome = () => "Привет!"; console.log(getWelcome()); // Привет!Если вы уберёте круглые скобки перед стрелкой, функция не сработает:

61 const getWelcome = => "Привет!"; console.log(getWelcome()); // Uncaught SyntaxError: Unexpected token '=>'Создадим функцию, которая принимает два параметра и возвращает объект с тремя свойствами. Для начала рассмотрим вариант с неявным возвратом:

62 const getPersonInfo = (name, age) => ({ name: name, age: age, greeting: `Привет, меня зовут ${name}!` });Наша функция записана в одну строку, но даже такой объект читать не слишком удобно. Если свойств станет больше или в теле функции появятся дополнительные операции, код станет менее наглядным. В таких случаях лучше использовать явный возврат через return с фигурными скобками:

63 const getPersonInfo = (name, age) => { return { name: name, age: age, greeting: `Привет, меня зовут ${name}!` }; };Сохраним результат работы функции в переменную и выведем его в консоль:

64 const person = getPersonInfo('Тор', 1500); console.log(person); // { name: 'Тор', age: 1500, greeting: 'Привет, меня зовут Тор!' }Напомним про return: как только функция встречает этот оператор, она завершает выполнение и возвращает значение. Поэтому весь код, который вы напишете после return, интерпретатор JavaScript просто проигнорирует:

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

66 const getPersonInfo = (name, age) => { { name: name, age: age, greeting: `Привет, меня зовут ${name}!` }; }; const person = getPersonInfo("Тор", 1500); console.log(person); // SyntaxError: Unexpected token ':'При вызове стрелочной функции иногда важно учитывать случаи, когда пользователь не передаёт аргументы. В таких ситуациях можно задать значения по умолчанию - они подставятся вместо отсутствующих данных.

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

68 const welcomeMessage = (name = "гость") => { return `Привет, ${name}!`; }; console.log(welcomeMessage()); // Привет, гость! console.log(welcomeMessage("Владимир")); // Привет, Владимир!Чтобы задать значение по умолчанию, укажите его после имени параметра через знак равенства. Вы можете установить значения по умолчанию как для одного параметра, так и для нескольких или всех сразу. Рассмотрим пример с тремя параметрами, каждый из которых имеет своё значение по умолчанию:

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

70 // Генерируем случайное число от 0 до 99 const getRandom = () => Math.floor(Math.random() * 100); // Создаём функцию со значением по умолчанию const showValue = (value = getRandom()) => { return `Значение: ${value}`; }; // Если аргумент не передан, получаем случайное число console.log(showValue()); // Значение: 73 (у вас будет другое) // Если аргумент передан, используем переданное значение console.log(showValue(42)); // Значение: 42Бывают ситуации, когда мы не можем заранее определить точное количество аргументов для функции. Например, пользователь может ввести любое количество своих увлечений - два, три, десять или сколько угодно ещё.

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

72 function getUserInfo(name) { // Получаем все аргументы начиная со второго const hobbies = Array.prototype.slice.call(arguments, 1); return `${name} увлекается: ${hobbies.join(', ')}`; } console.log(getUserInfo('Алексей', 'рисованием', 'музыкой', 'спортом')); // Алексей увлекается: рисованием, музыкой, спортомВ стрелочных функциях вместо объекта arguments используются<a>остаточные параметры</a>(rest-параметр). Они записываются с помощью трёх точек перед именем параметра и собирают все оставшиеся аргументы в массив:

73 const getUserInfo = (name, ...hobbies) => { return `${name} увлекается: ${hobbies.join(', ')}`; }; console.log(getUserInfo('Алексей', 'рисованием', 'музыкой', 'спортом')); // Алексей увлекается: рисованием, музыкой, спортомRest-параметр может быть только один - он собирает все оставшиеся аргументы и всегда должен стоять в конце списка параметров. Если вы попытаетесь разместить его в начале или в середине, JavaScript выдаст синтаксическую ошибку. Давайте укажем rest-параметр с ошибкой:

74 // ❌ Неправильно: rest-параметр должен быть последним const getUserInfo = (...hobbies, name) => { return `${name} увлекается: ${hobbies.join(', ')}`; }; console.log(getUserInfo('рисованием', 'музыкой', 'спортом', 'Алексей')); // SyntaxError: Rest parameter must be last formal parameterМы рассмотрели разные способы записи стрелочных функций в JavaScript. При выборе синтаксиса важно учитывать не только личные предпочтения, но и правила, установленные в команде. Например, если в проекте принято использовать явный return с фигурными скобками, более краткие формы записи вам могут не понадобиться - даже если они технически допустимы:

75 // Всегда используем явный return const add = (a, b) => { return a + b; }; const square = x => { return x * x; }; const getMessage = () => { return 'Hello!'; };Область видимости - это часть кода, где функция может обращаться к переменным. В JavaScript есть два основных типа областей видимости: глобальная (доступна во всём коде) и локальная (ограничена блоком кода).

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

77 В JavaScript обычные функции "<a>всплывают</a>" - это значит, что их можно вызвать ещё до того, как они объявлены в коде:

78 greetAstronaut(); // Добро пожаловать на борт! function greetAstronaut() { console.log("Добро пожаловать на борт!"); }А вот стрелочные функции работают только после объявления:

79 greetAlien(); // ReferenceError: Cannot access 'greetAlien' before initialization const greetAlien = () => { console.log("Контакт установлен!"); }; greetAlien(); // Контакт установлен!Всплытие может запутывать и приводить к неожиданным ошибкам. Чтобы сделать код более предсказуемым, обычные функции лучше объявлять как функциональные выражения через const. В этом случае они будут вести себя так же, как стрелочные, - их можно будет вызывать только после объявления:

80 const greetNavigator = function () { console.log("Внимание, навигатор!"); }; greetNavigator(); // Внимание, навигатор!Если не учитывать всплытие, обычные и стрелочные функции ведут себя одинаково - они работают только внутри той области, где были объявлены.

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

82 { 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Область видимости отвечает за то, какие переменные видит функция. Но, помимо этого, у функции есть ещё одна важная особенность -<a>контекст</a>. Он задаётся значением this и показывает, от чьего имени выполняется функция. У обычных функций this зависит от того, как именно они были вызваны. Стрелочные функции не создают собственный контекст this - они наследуют его из внешней области, и это значение остаётся неизменным:

83 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 в классах и конструкторах. Все эти особенности мы обязательно разберём отдельно.

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

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

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

87 const round = num => Math.round(num); console.log(round(4.7)); // 5Методы массивов с колбэками.<a>Колбэк</a> - это функция, которую передают как аргумент в другую функцию, чтобы та вызвала её позже. В массивах колбэки используются для перебора элементов, фильтрации по условиям, поиска нужного значения, преобразования каждого элемента или подсчёта общего результата. Умножим каждое число на 2 с помощью метода map ():

88 const round = num => Math.round(num); console.log(round(4.7)); // 5Обработчики событий.Это функции в JavaScript, которые отслеживают и реагируют на действия пользователя на странице. К таким действиям<a>относятся</a>клик по кнопке, движение мыши, ввод текста, прокрутка страницы и другие события. Попробуем вывести сообщение при клике по кнопке:

89 <!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>Функции как аргументы.Это ситуации, когда одну функцию передают как параметр в другую функцию для её последующего выполнения. Такой подход часто используется в <a>асинхронном программировании</a> - например, при работе с таймерами, запросами к серверу через API или обработке данных.

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

91 setTimeout(() => { console.log("Прошло две секунды"); }, 2000); // Прошло две секундыВложенные функции.Функция может быть объявлена внутри другой функции для реализации вспомогательной логики или ограничения области видимости. Создадим внешнюю функцию, которая будет использовать вложенную функцию для преобразования имени в верхний регистр:

92 const createGreeting = name => { const format = text => text.toUpperCase(); return `Привет, ${format(name)}!`; }; console.log(createGreeting("Лев")); // Привет, ЛЕВ!Стрелочные функции также применяются в более сложных сценариях - при работе с промисами, в цепочках вызовов и в компонентах React. Позже мы разберём их в других разделах, когда перейдём к более продвинутым темам.

93 Стрелочные функции удобны, но есть ситуации, когда лучше использовать обычные функции или функциональное выражение:

94 <ul><li>если нужен собственный контекст this (например, в методах объектов);</li>

95 <li>если необходим доступ к объектам arguments или super;</li>

96 <li>если функция применяется как конструктор (с оператором new).</li>

97 </ul>Это непростые концепции, с которыми мы будем знакомиться постепенно.

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

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

100 const ping = => "pong"; console.log(ping()); // SyntaxError: Unexpected token '=>'✅ Скобки обязательны:

101 const fixedPing = () => "pong"; console.log(fixedPing()); // pong❌ Отсутствует return в многострочной записи:

102 const calculatePower = () => { const base = 2; const exponent = 3; base ** exponent; }; console.log(calculatePower()); // undefined✅ Добавляем return:

103 const fixedCalculatePower = () => { const base = 2; const exponent = 3; return base ** exponent; }; console.log(fixedCalculatePower()); // 8❌ Возврат объекта без скобок:

104 const createBadge = () => { label: "Guest" }; console.log(createBadge()); // undefined✅ Оборачиваем объект в скобки:

105 const fixedCreateBadge = () => ({ label: "Guest" }); console.log(fixedCreateBadge()); // { label: 'Guest' }❌ Запись return без фигурных скобок:

106 const showScore = () => return 100; console.log(showScore()); // SyntaxError: Unexpected token 'return'✅ Добавляем фигурные скобки:

107 const fixedShowScore = () => { return 100; }; console.log(fixedShowScore()); // 100❌ Вызов функции за пределами её области видимости:

108 { const status = "ready"; const getStatus = () => status; } console.log(getStatus()); // ReferenceError: getStatus is not defined✅ Вызов функции внутри области видимости:

109 { const status = "ready"; const getStatus = () => status; console.log(getStatus()); // ready }❌ Некорректное использование this в объекте:

110 const profile = { name: "Лея", getName: () => this.name }; console.log(profile.getName()); // undefined✅ Заменяем стрелочную функцию на обычную:

111 const fixedProfile = { name: "Лея", getName() { return this.name; } }; console.log(fixedProfile.getName()); // ЛеяВ больших проектах легко потеряться: не всегда ясно, что делает функция, какие у неё параметры и что она возвращает.

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

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

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

115 const calculateLoad = (base, extra) => base + extra; console.log(calculateLoad(10, 15));Если вы всё сделали правильно, в VS Code появится следующее:

116 Скриншот: Visual Studio Code / Skillbox MediaВ этом разделе вы потренируетесь применять стрелочные функции на практике. Если что-то не получается, не спешите заглядывать в решение - сначала попробуйте воспользоваться подсказкой или перечитайте нужный раздел. И главное - старайтесь не копировать код, а набирайте его вручную. Так вы быстрее запомните синтаксис и лучше поймёте, как всё работает.

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

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

119 JavaScript умеет автоматически расставлять точки с запятой. Обычно это удобно, но в некоторых случаях такое поведение приводит к неожиданным результатам. Обратите внимание на то, где находится return и что идёт после.

120 Решение

121 После оператора return в коде находится перенос строки. JavaScript воспринимает это как конец инструкции и автоматически добавляет точку с запятой. А когда интерпретатор встречает return, выполнение функции немедленно прекращается. Поэтому в консоли мы видим undefined:

122 const getGreeting = () => { return // ← JavaScript вставляет точку с запятой "Привет из стрелочной функции!"; // До этой строки интерпретатор не доходит }; console.log(getGreeting()); // undefinedЧтобы всё исправить, достаточно перенести приветствие на строку с return:

123 const getGreeting = () => { return "Привет из стрелочной функции!"; }; console.log(getGreeting()); // Привет из стрелочной функции!Перед вами обычная функция, которая умеет складывать любое количество чисел. Перепишите её в виде стрелочной функции с помощью rest-параметра:

124 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Подсказка

125 Rest-параметр записывается с помощью трёх точек … и заменяет объект arguments в стрелочных функциях.

126 Заголовок

127 Создаём стрелочную функцию и заменяем arguments на rest-параметр …numbers. В остальном коде ничего не меняем:

128 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➤ Дополнительное задание: попробуйте решить задачу с помощью метода массива<a>reduce()</a>. Это позволит заменить цикл for и сделать код короче.

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

130 totalCups(4); // 5 totalCups(9); // 11 totalCups(25); // 31Подсказка

131 За каждые четыре купленные чашки кофе покупатель получает одну в подарок. Чтобы посчитать, сколько именно бесплатных чашек он получит, используйте деление с округлением вниз. Например, при покупке девяти чашек: 9 / 4 = 2.25. Но нас интересует только целая часть - 2. Для этого примените метод<a>Math.floor ()</a>, который отбрасывает дробную часть и возвращает целое число.

132 Решение

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

134 const totalCups = (purchased) => { return purchased + Math.floor(purchased / 4); }; console.log(totalCups(4)); // 5 console.log(totalCups(9)); // 11 console.log(totalCups(25)); // 31<a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>