Стрелочные функции
Вы уже умеете объявлять функцию, передавать аргументы и отдавать значение через return. Многие повседневные помощники настолько коротки, что полное слово function кажется тяжёлым. JavaScript позволяет писать их стрелкой — токеном => — более компактно.
Что такое стрелочная функция
Это всё ещё функция: принимает вход, выполняет тело, может вернуть результат. Меняется только форма. Обычно её кладут в const, перечисляют параметры, пишут =>, затем короткое выражение или блок { }.
Стрелка рядом с классической функцией
📊 Классическая функция и стрелка
| Идея | Классический стиль | Стрелочный стиль |
|---|---|---|
| именной помощник | function add(a, b) { return a + b; } |
const add = (a, b) => a + b; |
| вернуть одно выражение | return a + b; внутри { } |
выражение после => возвращается само |
| несколько операторов | { } плюс return |
то же правило: { } и return |
| один параметр | (name) |
name => ... (скобки необязательны) |
| без параметров | function hi() { ... } |
const hi = () => ... — пустые () обязательны |
| где живёт | объявление или выражение | почти всегда в переменной |
Оба стиля могут возвращать числа и строки. Стрелка удобна для маленького помощника с ясным именем в const. Классическая function уместна, когда нужен заметный именной блок — оба варианта корректны.
const double = (n) => n * 2;
let answer = double(5);
console.log(answer);
Выражение после стрелки возвращается само
Если после => одно выражение, оно вычисляется и автоматически уходит вызывающему — без { } и без слова return. Здесь double(5) становится 10. Меняйте аргумент — произведение следует за ним.
const label = (score) => {
if (score < 0) {
return "invalid";
}
return "ok";
};
console.log(label(-1));
console.log(label(8));
Фигурные скобки — return пишете вы
Когда тело в { }, JavaScript не возвращает последнюю строку сам. Пишите return, как в классической функции. Ранний выход и многошаговая логика остаются читаемыми.
const greet = name => "Hello, " + name;
let line = greet("Sara");
console.log(line);
Один параметр может обойтись без скобок
Если параметр ровно один, можно писать name => ... без ( ). Место вызова то же: greet("Sara"). При двух и больше параметрах скобки оставляйте.
const hello = () => "Hello";
console.log(hello());
Ноль параметров всё равно требует ()
Без входов пишите пустые скобки перед =>. Пропуск — синтаксическая ошибка. Вызов по-прежнему hello() — пустая пара значит «параметров нет».
const add = (a, b) => a + b;
let total = add(3, 4);
console.log(total);
console.log(add(10, 2));
Дайте имя, затем вызовите
const add = (a, b) => a + b кладёт стрелку под именем add. Вызов как у любой функции: add(3, 4) даёт 7. Один помощник, два вызова — тело заново не пишете.
Стрелка на странице
Соберите приветствие стрелкой, вызовите её и запишите результат в абзац — тот же шаблон страницы, более короткая форма.
<!DOCTYPE html>
<html>
<head>
<title>arrow — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
const welcome = guest => "Hello, " + guest;
let box = document.getElementById("msg");
box.textContent = welcome("Omar");
</script>
</body>
</html>
Абзац показывает Hello, Omar. Стрелка вернула строку; следующая строка положила её на страницу. Меняйте только аргумент, обновите страницу и прочитайте новую строку. Дальше — область видимости: где эти имена видны.
Практика
- Перепишите
function triple(n) { return n * 3; }как стрелкуconstс телом-выражением. - Напишите
const hi = name => "hi " + nameи выведитеhi("Neda"). - Напишите
const ping = () => "pong"и вызовите один раз. - Напишите стрелку с блоком, которая возвращает
"zero"приn === 0, иначе"nonzero". - После
const add = (a, b) => a + bубедитесь, чтоadd(6, 1)даёт7. - В HTML-демо смените только строку аргумента, обновите страницу и прочитайте абзац.
Частые ошибки
- Открыть
{ }после=>и забытьreturn— вызов даётundefined - Убрать
(), когда параметров ноль - Путать
=>с операторами сравнения — стрелка это синтаксис функции, не «больше» - Ждать здесь полный урок про
this— различия привязки на более поздней странице; здесь компактная форма - Думать, что стрелки отменяют знание
return— выражения по-прежнему возвращают; блокам по-прежнему нуженreturn
Кратко
- Стрелочные функции используют
=>и обычно лежат вconst - Голое выражение после
=>возвращается само - Тело
{ }требует явногоreturn - Один параметр может опустить
( ); ноль параметров требуют пустые() - Вызывайте стрелку по имени, как любую функцию
- Обновление страницы может использовать строку, возвращённую стрелкой
- Дальше: область видимости — где живут имена
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху