Функции JavaScript

Введение в функции JavaScript

Функция — это переиспользуемый блок кода, выполняющий определённую задачу. Вместо того чтобы повторять одни и те же инструкции повсюду, вы пишете их один раз, даёте им имя и запускаете при необходимости, вызывая функцию. Функции — один из ключевых строительных блоков JavaScript: они помогают организовать код, избежать дублирования и строить сложные программы из небольших, тестируемых частей.

В этой главе рассматривается, как определять функции, передавать данные с помощью параметров, получать данные обратно через return, а также три основные формы, которые вы встретите в реальном коде: объявления функций, выражения функций и стрелочные функции. Также объясняются поднятие (hoisting) и область видимости — два поведения, которые удивляют новичков.

Определение функции

Базовый синтаксис функции

Объявление функции использует ключевое слово function, за которым следуют имя, разделённый запятыми список параметров в скобках и тело из инструкций в фигурных скобках. Тело выполняется только при вызове функции — запись имени функции, за которым следуют скобки.

function greet() {
    console.log("Hello, World!");
}

greet(); // call the function → Outputs: Hello, World!

Само по себе определение функции ничего не делает: ничего не выводится, пока не выполнится greet().

Поднятие функций (Hoisting)

Объявления функций поднимаются (hoisted): движок регистрирует их до выполнения любого кода, поэтому вы можете вызвать объявление даже на строке выше того места, где оно написано.

Это не распространяется на выражения функций или стрелочные функции (рассматриваются ниже) — они доступны только после выполнения строки, в которой присваиваются. Вызов их раньше вызывает ReferenceError или TypeError. Если вы хотите узнать больше о том, почему это происходит, см. область видимости переменных.

Параметры и аргументы функций

Параметр — это имя, указанное в определении функции; аргумент — это фактическое значение, которое вы передаёте при вызове. Внутри тела параметры ведут себя как локальные переменные.

Передача параметров

Если вызвать функцию с меньшим числом аргументов, чем параметров, недостающие будут иметь значение undefined, а не вызовут ошибку:

Параметры по умолчанию

Чтобы избежать undefined, ES6 позволяет задать параметру значение по умолчанию, которое используется только в том случае, если аргумент не передан (или передан undefined).

Rest-параметры

Rest-параметр (записывается как ...name) собирает любое количество оставшихся аргументов в настоящий array, позволяя функции принимать переменное число входных данных. Он должен быть последним параметром.

Rest-параметры имеют тот же синтаксис, что и оператор spread, но выполняют противоположную роль. Подробнее см. rest-параметры и синтаксис spread.

Оператор return

Функция может вернуть значение своему вызывателю с помощью return. Возвращённое значение можно сохранить в переменную или использовать непосредственно в выражении.

return также немедленно останавливает функцию — любой код после него пропускается. Функция без return (или с пустым return;) возвращает undefined.

Анонимные функции и выражения функций

Выражения функций

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

Анонимные функции

Функция выше не имела имени — это анонимная функция. Они широко используются в качестве аргументов других функций, например коллбэков, передаваемых методам array, таким как forEach, или функции setTimeout. (См. введение в коллбэки.)

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

Синтаксис стрелочных функций

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

Стрелочные функции не имеют собственного this

Стрелочные функции не привязывают собственный this; они наследуют его из окружающей области видимости. Это делает их идеальными в качестве коллбэков внутри методов object, где обычная функция потеряла бы this объекта.

Подробнее о том, как this разрешается внутри методов, читайте в методы object, this.

Выбор подходящей формы

• Объявление функции (function foo() {}) — поднимается, хорошо подходит для именованных утилит верхнего уровня, которые можно вызывать из любого места.
• Выражение функции (const foo = function() {}) — создаётся по месту; полезно, когда нужно условно присвоить или передать функцию.
• Стрелочная функция (const foo = () => {}) — кратчайший синтаксис, нет собственного this; предпочтительна для коротких коллбэков.

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

Заключение

Функции позволяют упаковать логику однажды и использовать её повсюду. Вы узнали, как их определять, передавать аргументы (включая значения по умолчанию и rest-параметры), возвращать результаты, а также в чём разница между объявлениями, выражениями и стрелочными функциями — и каковы особенности поднятия и поведения this, которые их отличают. Освоение этих форм — фундаментальный шаг на пути к написанию чистого и поддерживаемого JavaScript.

Практика