Урок 6. Функции и стрелочные функции

Функция — именованный кусок кода, который можно вызывать сколько угодно раз. Функции избавляют от повторов: код пишется один раз, а используется везде, где нужен. Вы уже пользовались готовыми функциями: console.log, Number, Math.trunc. В этом уроке — свои.

Объявление и вызов

function greet(name) {
  return "Привет, " + name + "!";
}

console.log(greet("Аня"));
console.log(greet("Олег"));

Привет, Аня!
Привет, Олег!

• function greet(name) — объявление: слово function, имя функции и в скобках параметры — имена для значений, которые функция получит.
• В фигурных скобках — тело: код, который выполняется при вызове.
• return возвращает результат и сразу завершает функцию. Код после return не выполняется.
• greet("Аня") — вызов: значение в скобках (аргумент) попадает в параметр name.

Скобки при вызове обязательны. greet без скобок — это сама функция, а не её результат.

Имена функциям дают по действию, обычно глаголом: calcTotal, showMessage, isValid. По имени должно быть понятно, что функция делает, — тогда код читается без комментариев.

Функция без return

Если return нет или он стоит без значения, функция возвращает undefined. Такие функции нужны ради действия — вывести, сохранить, изменить страницу, — а не ради результата.

function printLine(text) {
  console.log("-- " + text + " --");
}

const result = printLine("раздел");
console.log(result);

-- раздел --
undefined

Несколько параметров и значения по умолчанию

Параметров может быть сколько угодно, через запятую. Если при вызове аргумент не передан, параметр получает undefined. Значение по умолчанию задаётся прямо в объявлении:

function power(base, exponent = 2) {
  return base ** exponent;
}

console.log(power(5));
console.log(power(2, 10));

25
1024

Параметр по умолчанию ставят в конец списка: так его можно просто не писать при вызове.

Если число аргументов заранее неизвестно, параметр с тремя точками собирает все переданные значения в массив:

function total(...numbers) {
  let sum = 0;
  for (const n of numbers) {
    sum += n;
  }
  return sum;
}

console.log(total(1, 2, 3));
console.log(total(10, 20, 30, 40));

6
100

Область видимости

Переменная, объявленная внутри функции, видна только в этой функции. Снаружи её нет, а одноимённая переменная снаружи — это другая переменная:

let message = "снаружи";

function show() {
  let message = "внутри";
  console.log(message);
}

show();
console.log(message);

внутри
снаружи

То же касается любого блока в фигурных скобках — тела if или цикла: let и const, объявленные в блоке, живут только в нём. Функция же видит переменные, объявленные снаружи, и может их менять. Но чем меньше функция зависит от внешних переменных, тем проще её понять и проверить: всё нужное лучше передавать параметрами, а результат — возвращать через return.

Функция как значение

В JavaScript функция — такое же значение, как число или строка. Её можно положить в переменную:

const square = function (x) {
  return x * x;
};

console.log(square(7));

49

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

Стрелочные функции

Короткая запись функции — стрелочная функция (arrow function), со знаком =>:

const square = (x) => x * x;
const sum = (a, b) => a + b;
const hello = () => console.log("Привет");

console.log(square(4));
console.log(sum(2, 3));
hello();

16
5
Привет

• Параметры — в скобках перед =>. Без параметров — пустые скобки (). Если параметр один, скобки можно опустить: x => x * x.
• Если после => стоит одно выражение, его значение возвращается само, без return.
• Если нужно несколько команд, тело берут в фигурные скобки — и тогда return обязателен:

const describe = (n) => {
  const kind = n % 2 === 0 ? "чётное" : "нечётное";
  return `${n} — ${kind}`;
};

console.log(describe(7));

7 — нечётное

Чтобы стрелочная функция вернула объект, его берут в круглые скобки: () => ({ ok: true }). Без них фигурные скобки считаются телом функции.

У стрелочных функций нет своего this (о нём — в уроке Объекты и JSON), поэтому методы объектов пишут обычными функциями. Для коротких действий — обработки элементов массива, таймеров, событий — стрелочные функции удобнее.

Функции обратного вызова

Раз функция — значение, её можно передать другой функции как аргумент. Такую функцию называют функцией обратного вызова (callback, колбэк): её вызовут потом, когда придёт время.

function repeat(times, action) {
  for (let i = 1; i <= times; i++) {
    action(i);
  }
}

repeat(3, (n) => console.log("Повтор " + n));

Повтор 1
Повтор 2
Повтор 3

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

Частые ошибки

• Нет return. Функция что-то посчитала, но результат не вернула — вызов даёт undefined.
• return на отдельной строке. return и значение пишут в одной строке. Если перенести значение на следующую строку, движок поставит точку с запятой сразу после return, и функция вернёт undefined.
• Вызов без скобок. const x = greet; кладёт в x саму функцию, а не результат.
• Фигурные скобки в стрелочной функции без return. (a, b) => { a + b } возвращает undefined: при скобках нужен return a + b;.

Коротко

• function имя(параметры) { … return результат; }, вызов — имя(аргументы).
• Без return функция возвращает undefined.
• Значения по умолчанию — function f(a, b = 2); все аргументы в массив — ...numbers.
• Переменные внутри функции и блока видны только там.
• Стрелочная функция: (a, b) => a + b; с фигурными скобками нужен return.
• Функцию можно передать другой функции — это callback.

Проверьте себя

const add = (a, b) => {
  a + b;
};
console.log(add(2, 3));