Пошук уроків, статей та іншого контенту
Function declaration, function expression та стрілкові функції — синтаксис, hoisting і коли що обирати.
У JavaScript функції — це «функції першого класу» (first-class citizens): їх можна зберігати в змінних, передавати як аргументи, повертати з інших функцій — так само, як число чи рядок. Це фундаментальна властивість мови, на якій тримаються колбеки, вищі функції та більшість асинхронного коду.
Класичний спосіб оголосити функцію — з ключовим словом function та іменем:
function add(a, b) {
return a + b;
}
add(2, 3); // 5Function declaration повністю підіймається (hoisting) — і саме оголошення, і тіло функції. Тому її можна викликати ще до рядка, де вона визначена в коді:
sayHi(); // "Привіт" — працює, хоча виклик перед оголошенням
function sayHi() {
console.log("Привіт");
}Функція, збережена у змінній. На відміну від declaration, підіймається лише сама змінна (як при let), не її значення:
const add = function (a, b) {
return a + b;
};
add(2, 3); // 5sayHi(); // ReferenceError: Cannot access 'sayHi' before initialization
const sayHi = function () {
console.log("Привіт");
};Коротший синтаксис, доданий у ES2015. Особливо зручний для невеликих функцій та колбеків:
const add = (a, b) => a + b; // неявний return для однорядкового тіла
const greet = (name) => {
// фігурні дужки — потрібен явний return
return `Привіт, ${name}!`;
};
const square = (x) => x * x;
const sayHi = () => console.log("Привіт"); // без параметрів — порожні дужкиНайважливіша відмінність стрілкових функцій — вони не мають власного this (беруть його з навколишнього коду) і не можуть бути конструкторами (new). Це не «скорочений синтаксис для всього» — це інший інструмент із іншою поведінкою, детально розглянемо this у модулі «JavaScript під капотом».
Function declaration — для іменованих, самостійних функцій верхнього рівня (утиліти, обробники).
Function expression — коли функція є значенням, яке передається чи присвоюється умовно.
Arrow function — для коротких колбеків (map, filter, then) та коли потрібно зберегти зовнішній this.
Виклик function expression до її оголошення в коді — на відміну від declaration, це кидає помилку.
Використання стрілкової функції там, де потрібен власний this (наприклад, метод об'єкта) — див. приклад нижче.
const counter = {
count: 0,
increment: () => {
this.count++; // this тут НЕ counter — це поширена пастка
},
};Усі три способи створюють функції, що поводяться однаково при виклику — різниця в тому, коли їх можна викликати (hoisting) і чи мають вони власний this. Обирайте на основі контексту використання, а не особистої звички.
Спробуйте самостійно
Перепишіть function declaration function double(x) { return x * 2; } спочатку як function expression, потім як стрілкову функцію з неявним return.