Первая функция

В кулинарной книге соус описывают один раз, на отдельной странице. Другие рецепты не повторяют его по шагам, а пишут коротко: «приготовьте соус». Функция, которую вы пишете сами, устроена так же: её шаги записаны в одном месте, а выполнить их можно из любого места программы.

Когда одно и то же вычисление нужно в нескольких местах программы, его записывают один раз — в функции. Функция add получает два числа и возвращает их сумму:

function add(a, b) {
    return a + b;
}

console.log(add(2, 3)); // 5
console.log(add(10, -4)); // 6

Давайте проследим за первым вызовом:

1. add(2, 3) отправляет выполнение в функцию add, где a равно 2, а b равно 3.
2. Инструкция return a + b; считает 5 и возвращает это число туда, откуда функцию вызвали.
3. console.log получает 5 и печатает его.

Второй вызов работает так же, но с другими числами, и печатает 6.

Объявление функции

Слово function начинает объявление функции. Строка function add(a, b) { читается слева направо:

• function — ключевое слово: «объявляю функцию»;
• add — имя функции;
• (a, b) — параметры, имена, которые получают значения при каждом вызове;
• { открывает тело функции — инструкции в фигурных скобках.

После закрывающей фигурной скобки объявления точку с запятой не ставят, а внутри тела каждая инструкция заканчивается ею, как обычно.

Объявление само ничего не вычисляет: тело функции выполняется только при вызове, и при каждом вызове заново. Имена параметров выбирает автор функции: с параметрами x, y и строкой return x + y; функция add работала бы так же.

Вызов и аргументы

Запись add(2, 3) — вызов функции. Числа 2 и 3 в нём называются аргументами: первый попадает в первый параметр, второй — во второй. При каждом вызове параметры получают значения его аргументов, поэтому add(2, 3) и add(10, -4) дают разные суммы.

На собеседовании новичков часто спрашивают, чем параметр отличается от аргумента:

• параметр — имя в объявлении функции, например a;
• аргумент — значение, которое передают при вызове, например 2.

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

function minus(a, b) {
    return a - b;
}

console.log(minus(10, 4)); // 6
console.log(minus(4, 10)); // -6

1. В minus(10, 4) параметр a равен 10, а b равен 4, и функция возвращает 6.
2. В minus(4, 10) аргументы поменялись местами, и результат стал -6.

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

Возврат значения

Инструкция return завершает функцию и возвращает значение, записанное после неё. Сама функция при этом ничего не печатает. Вызов заменяется возвращённым значением, и уже его печатает console.log.

Возвращённое значение можно сразу использовать в вычислении: add(2, 3) + 1 даёт 6.

Частая ошибка

В функции забыли return:

function add(a, b) {
    a + b; // ✗
}

console.log(add(2, 3)); // undefined

Сообщения об ошибке нет, но программа печатает undefined — так JavaScript обозначает отсутствие значения. Сумма вычисляется, а без return функция её не возвращает. Исправление — написать return a + b;, как в первом примере.

Главное

• Функцию объявляют словом function: имя, параметры в круглых скобках, тело в фигурных.
• Аргументы вызова попадают в параметры по порядку: первый в первый, второй во второй.
• return завершает функцию, и вызов заменяется возвращённым значением; без return получается undefined.
• Параметр — имя в объявлении функции, аргумент — значение, которое передают при вызове.