Функции

Напиши function square(n) { return n * n; } один раз, и square(4) даст 16, square(9) даст 81, и так для любого переданного числа.

Имя для куска работы

Ты уже пользовался функциями, которые написали другие люди: console.log, Math.round и toUpperCase все являются функциями. Функция представляет собой блок кода с именем, который делает одну работу. Ты определяешь её один раз, а потом вызываешь по имени сколько угодно раз. Функции избавляют от копирования одних и тех же строк и позволяют думать о программе крупными частями: «посчитать чаевые, потом разделить счёт», а не длинным списком арифметики.

function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("Ana"));   // Hello, Ana!
console.log(greet("Ji"));    // Hello, Ji!

Определение начинается с ключевого слова function, затем идёт имя функции, затем список параметров в скобках. Параметр является переменной, которая получает значение при вызове функции; здесь это name. Тело в фигурных скобках делает работу. Когда ты вызываешь greet("Ana"), значение "Ana", оно называется аргументом, попадает в параметр name, и тело выполняется.

return возвращает значение

Ключевое слово return завершает функцию и отправляет значение туда, откуда функцию вызвали. Вызов greet("Ana") является выражением, и его значение равно тому, что вернула функция. Поэтому вызов можно поставить внутрь console.log, внутрь вычисления или сохранить в переменной: const msg = greet("Ana");.

Вернуть значение и напечатать его являются разными вещами, и новички их часто путают. Функция, которая только вызывает console.log, показывает что-то на экране, но ничего не возвращает. Её вызов даёт undefined, поэтому результат нельзя использовать в вычислении. Как правило, пусть функции возвращают результаты, а код, который их вызывает, решает, печатать ли.

function addPrint(a, b) {
  console.log(a + b);
}
function add(a, b) {
  return a + b;
}

const x = add(2, 3) * 10;
console.log(x);      // 50
addPrint(2, 3);      // печатает 5, но ничего полезного не возвращает

return ещё и сразу останавливает функцию. Строки после него на том же пути не выполняются. Так можно заранее обработать особые случаи: if (n < 0) return "negative"; в начале функции, а обычный случай ниже.

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

Функция может принимать несколько параметров через запятую, и аргументы сопоставляются по порядку: в add(2, 3) a равно 2, а b равно 3. Если в вызове аргумент пропущен, этот параметр равен undefined. Параметру можно задать значение по умолчанию, которое используется, когда ничего не передано: function tip(bill, rate = 0.15) берёт 0.15, если вызывающий код не передал другую ставку.

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

В современном JavaScript есть и более короткий способ писать маленькие функции, стрелочная функция. const square = (n) => n * n; означает то же, что функция square из начала урока. Когда тело является одним выражением, его значение возвращается автоматически, без фигурных скобок и без слова return. Стрелочные функции ты будешь видеть повсюду в современном коде.

Переменные внутри остаются внутри

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