Функции: объявления, выражения и стрелочные функции
Определяйте функции тремя способами, изучайте поднятие объявлений, используйте параметры и возвращаемые значения и пишите лаконичные стрелочные функции.
«Функции: объявления, выражения и стрелочные функции» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Что такое функции?
Функции — это повторно используемые блоки кода. Они принимают входные данные (параметры), выполняют логику и, при необходимости, возвращают результат. В JavaScript функции являются значениями первого класса: их можно присваивать переменным, передавать как аргументы и возвращать из других функций.
Объявления функций
Объявление функции создаёт именованную функцию с помощью ключевого слова function. Объявления поднимаются — их можно вызывать до того, как они встретятся в коде.
function greet(name) {
return `Hello, ${name}!`;
}
// Can call before declaration due to hoisting:
console.log(greet('Alice')); // 'Hello, Alice!'Функциональные выражения
Функциональное выражение присваивает функцию переменной. Оно не поднимается (переменная поднимается со значением undefined). Функциональные выражения могут быть анонимными или именованными.
const multiply = function(a, b) {
return a * b;
};
console.log(multiply(3, 4)); // 12
// Named function expression (name useful in stack traces):
const factorial = function fact(n) {
return n <= 1 ? 1 : n * fact(n - 1);
};Стрелочные функции
Стрелочные функции — это компактный синтаксис, появившийся в ES6. У них нет собственного this — они наследуют this из внешней области видимости. Они отлично подходят для обратных вызовов и коротких функций.
// Standard arrow:
const add = (a, b) => a + b;
// Single parameter (no parens needed):
const double = n => n * 2;
// No parameters:
const greet = () => 'Hello!';
// Multi-line body needs {} and return:
const process = (x) => {
const result = x * 2;
return result + 1;
};Параметры и аргументы
Параметры — это имена, указанные в определении функции. Аргументы — значения, переданные при вызове функции. Лишние аргументы игнорируются, а отсутствующие имеют значение undefined.
function info(name, age) {
console.log(`${name} is ${age}`);
}
info('Alice', 30); // 'Alice is 30'
info('Bob'); // 'Bob is undefined'Параметры по умолчанию
ES6 позволяет задавать значения параметров по умолчанию. Значение по умолчанию используется, если аргумент равен undefined (в том числе если он вообще не был передан).
function greet(name = 'World') {
return `Hello, ${name}!`;
}
console.log(greet()); // 'Hello, World!'
console.log(greet('Alice')); // 'Hello, Alice!'Оператор return
По умолчанию функции возвращают undefined. Используйте return, чтобы вернуть значение. Функция завершается при первом встретившемся return — последующий код не выполняется.
function divide(a, b) {
if (b === 0) return null; // early return
return a / b;
}
console.log(divide(10, 2)); // 5
console.log(divide(10, 0)); // nullОстаточные параметры
Остаточный параметр ...args собирает все оставшиеся аргументы в массив. Он должен быть последним параметром. В современном коде он заменяет устаревший объект arguments.
function sum(...numbers) {
return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10Функции как значения (первоклассные функции)
Функции можно хранить в переменных, передавать другим функциям в качестве аргументов (обратных вызовов) и возвращать из функций. Это позволяет использовать мощные шаблоны, например методы массивов и обработчики событий.
const numbers = [3, 1, 4, 1, 5];
const sorted = numbers.sort((a, b) => a - b); // callback
console.log(sorted); // [1, 1, 3, 4, 5]Чистые функции
Чистая функция возвращает один и тот же результат для одинаковых входных данных и не имеет побочных эффектов (не изменяет DOM, не выполняет сетевые запросы и не изменяет глобальное состояние). Чистые функции легко тестировать, отлаживать и анализировать.
// Pure:
const add = (a, b) => a + b;
// Impure (side effect: mutates external state):
let total = 0;
function addToTotal(n) { total += n; }Немедленно вызываемые функциональные выражения (IIFE)
IIFE выполняется сразу после определения. Исторически их использовали для создания частной области видимости. Сегодня они нужны реже благодаря модулям и блочной области видимости, но всё ещё встречаются в старых кодовых базах.
(function () {
const secret = 'hidden';
console.log('IIFE ran');
})();
// secret is not accessible hereБыстрая проверка
Какое из следующих утверждений верно для стрелочных функций?
Повторение: функции JavaScript
Объявления функций поднимаются. Функциональные выражения и стрелочные функции не поднимаются. Стрелочные функции компактны и не имеют собственного this. Используйте параметры по умолчанию для обработки отсутствующих аргументов. Функции являются значениями первого класса — свободно передавайте их между частями кода.
Часто задаваемые вопросы
Урок «Функции: объявления, выражения и стрелочные функции» бесплатный?
Да — полный текст урока «Функции: объявления, выражения и стрелочные функции» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Функции: объявления, выражения и стрелочные функции»?
Определяйте функции тремя способами, изучайте поднятие объявлений, используйте параметры и возвращаемые значения и пишите лаконичные стрелочные функции. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Функции: объявления, выражения и стрелочные функции»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Переменные: let, const, var и область действия
- Типы данных: string, number, boolean, null, undefined
- Функции: объявления, выражения и стрелочные функции
- Поток управления: if, else, switch, for, while