Функции: действие и результат

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

function greet(name) {
  return `Привет, ${name}!`;
}
 
const message = greet("Анна");
console.log(message); // Привет, Анна!

Вызов greet("Анна") запускает команды внутри функции. name - параметр, имя для входного значения внутри функции. "Анна" - аргумент, конкретное значение при вызове. return отдаёт результат коду, который вызвал функцию.

Обратные кавычки вокруг текста позволяют вставить значение внутрь строки: запись ${name} подставляет туда значение переменной name.

Вернуть значение - не то же самое, что вывести

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

function sum(first, second) {
  return first + second;
}
 
const total = sum(5, 3);
console.log(total); // 8

Если убрать return, функция выполнится, но не вернёт результат. JavaScript обозначает отсутствие результата словом undefined. Можно вернуть ответ раньше времени: после return функция больше не выполняет свои инструкции.

function isAdult(age) {
  if (age < 18) {
    return false;
  }
  return true;
}

Три формы записи

Объявление функции удобно, когда нужно дать действию имя:

function calculateArea(width, height) {
  return width * height;
}

Функциональное выражение - функция, сохранённая в переменной. Здесь const не даст случайно заменить её другим значением:

const calculateAreaExpression = function (width, height) {
  return width * height;
};

Стрелочная функция - короткая запись функционального выражения. Знак => отделяет параметры от команд функции. Если справа записано одно выражение, его результат возвращается автоматически:

const calculateAreaArrow = (width, height) => width * height;
const double = (number) => number * 2;

Если инструкций несколько, нужны фигурные скобки и явный return:

const describeArea = (width, height) => {
  const area = width * height;
  return `Площадь: ${area}`;
};

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