Пошук уроків, статей та іншого контенту
Дізнайтеся, як створювати функції у вигляді виразів і зберігати їх у змінних. Порівняйте Function Expression із Function Declaration та зрозумійте ключові відмінності між ними.
Function Expression — це спосіб створити функцію як частину виразу та зберегти її у змінній.
const greet = function () {
console.log("Привіт!");
};
greet();У цьому прикладі:
function () { ... } — функція без імені;
функція створюється як значення;
це значення зберігається у змінній greet;
greet() — виклик функції.
Результат:
Привіт!Функція в JavaScript є значенням, як і число, рядок або об’єкт. Тому її можна зберігати у змінній, передавати в іншу функцію та повертати з функції.
Загальний синтаксис має такий вигляд:
const variableName = function (parameters) {
// тіло функції
};Наприклад:
const add = function (a, b) {
return a + b;
};
const result = add(2, 3);
console.log(result);Результат:
5Функція отримує параметри a і b, додає їх та повертає результат.
returnЯк і звичайна функція, Function Expression може повертати значення за допомогою return.
const calculateSquare = function (number) {
return number * number;
};
const square = calculateSquare(4);
console.log(square);Результат:
16Якщо функція не має return, вона повертає значення undefined.
const showMessage = function () {
console.log("Повідомлення показано");
};
const result = showMessage();
console.log(result);Результат:
Повідомлення показано
undefinedФункція без власного імені називається анонімною.
const multiply = function (firstNumber, secondNumber) {
return firstNumber * secondNumber;
};
console.log(multiply(3, 4));У цьому прикладі функція не має імені. Для її виклику використовується ім’я змінної multiply.
Анонімні функції часто використовують, коли функція потрібна лише в одному місці:
const numbers = [1, 2, 3];
numbers.forEach(function (number) {
console.log(number);
});Тут функція передається методу forEach і виконується для кожного елемента масиву.
Function Expression може мати власне ім’я:
const factorial = function calculateFactorial(number) {
if (number <= 1) {
return 1;
}
return number * calculateFactorial(number - 1);
};
console.log(factorial(5));Результат:
120У цьому прикладі:
factorial — ім’я змінної, у якій збережена функція;
calculateFactorial — ім’я самої функції;
усередині функції для рекурсивного виклику використовується calculateFactorial.
Іменовані Function Expression можуть бути корисними для:
рекурсії;
зрозуміліших повідомлень про помилки;
зручнішого налагодження коду.
У JavaScript функції можна створювати двома основними способами.
Function Declaration — це оголошення функції за допомогою окремої конструкції:
function greet() {
console.log("Привіт!");
}
greet();Function Expression — це функція, яка є частиною виразу та присвоюється змінній:
const greet = function () {
console.log("Привіт!");
};
greet();Обидва приклади створюють функцію greet, але правила їхньої роботи відрізняються.
Function Declaration можна викликати до місця її оголошення:
greet();
function greet() {
console.log("Привіт!");
}Це працює завдяки підняттю оголошень функцій — hoisting.
Function Expression не можна надійно викликати до присвоєння функції змінній:
greet();
const greet = function () {
console.log("Привіт!");
};Такий код завершується помилкою, оскільки змінна greet ще не отримала значення функції.
Правильний порядок:
const greet = function () {
console.log("Привіт!");
};
greet();// Function Declaration можна викликати раніше
sayHello();
function sayHello() {
console.log("Привіт!");
}
// Function Expression потрібно спочатку присвоїти змінній
const sayGoodbye = function () {
console.log("До побачення!");
};
sayGoodbye();Для початківців корисно дотримуватися простого правила: спочатку створіть Function Expression, а потім викликайте її.
const і let для Function ExpressionНайчастіше для збереження функції використовують const:
const subtract = function (a, b) {
return a - b;
};Змінну, оголошену через const, не можна переприсвоїти:
const operation = function () {
console.log("Перша операція");
};
// Такий код спричинить помилку:
// operation = function () {
// console.log("Друга операція");
// };Якщо потрібно змінювати функцію, можна використати let:
let operation = function () {
console.log("Перша операція");
};
operation();
operation = function () {
console.log("Друга операція");
};
operation();Проте якщо функцію не потрібно замінювати, краще використовувати const.
Функцію можна передати як аргумент іншій функції.
function processNumber(number, action) {
return action(number);
}
const doubled = processNumber(5, function (number) {
return number * 2;
});
console.log(doubled);Результат:
10У цьому прикладі:
processNumber отримує число та функцію action;
Function Expression передається другим аргументом;
action(number) виконує передану функцію;
результат повертається з processNumber.
Функцію, яку передають іншій функції або повертають із неї, називають callback-функцією.
Розглянемо програму для перевірки оцінок студентів:
const getResult = function (score) {
if (score >= 90) {
return "Відмінно";
}
if (score >= 70) {
return "Добре";
}
if (score >= 50) {
return "Задовільно";
}
return "Потрібно покращити результат";
};
const scores = [95, 78, 62, 40];
scores.forEach(function (score) {
console.log(`${score}: ${getResult(score)}`);
});Результат:
95: Відмінно
78: Добре
62: Задовільно
40: Потрібно покращити результатТут використано дві Function Expression:
getResult зберігає функцію для визначення результату;
функція в forEach виконується для кожної оцінки.
Function Expression зручно використовувати, коли:
функцію потрібно зберегти у змінній;
функцію потрібно передати як аргумент;
функція використовується лише в одному місці;
важливо, щоб функція була доступна тільки після її створення;
потрібно змінювати функцію, якщо змінна оголошена через let.
Наприклад:
const isAdult = function (age) {
return age >= 18;
};
console.log(isAdult(20));
console.log(isAdult(15));Стрілкова функція — це коротший синтаксис Function Expression.
Звичайна Function Expression:
const add = function (a, b) {
return a + b;
};Стрілкова функція:
const add = (a, b) => {
return a + b;
};Якщо тіло складається лише з одного виразу, його можна записати ще коротше:
const add = (a, b) => a + b;На цьому етапі важливо розуміти, що обидва варіанти створюють функцію та зберігають її у змінній. Однак звичайні та стрілкові функції мають додаткові відмінності, пов’язані з this, arguments та конструкторами.
const greet = function () {
console.log("Привіт!");
};
console.log(greet);Цей код виведе саму функцію, а не результат її виконання.
Щоб виконати функцію, потрібно додати круглі дужки:
greet();returnconst add = function (a, b) {
a + b;
};
console.log(add(2, 3));Результатом буде undefined, тому що функція обчислює вираз, але не повертає його.
Правильно:
const add = function (a, b) {
return a + b;
};// Помилка: функція ще не присвоєна змінній
// printMessage();
const printMessage = function () {
console.log("Повідомлення");
};Спочатку потрібно створити функцію, а потім викликати її:
const printMessage = function () {
console.log("Повідомлення");
};
printMessage();Function Expression потрібно присвоювати змінній:
const greet = function () {
console.log("Привіт!");
};Якщо просто написати функцію без використання, вона не матиме практичного ефекту:
function () {
console.log("Привіт!");
}Анонімна функція зазвичай має бути частиною виразу: присвоюватися змінній або передаватися як аргумент.
const greet = function (name) {
console.log(`Привіт, ${name}!`);
};
greet("Олена");У цьому прикладі:
name — параметр функції;
"Олена" — аргумент під час виклику.
Function Expression — це функція, створена як частина виразу.
Найчастіше її зберігають у змінній за допомогою const.
Анонімна Function Expression не має власного імені.
Функцію можна викликати через ім’я змінної: functionName().
Function Expression не можна викликати до її присвоєння змінній.
Function Declaration можна викликати до місця оголошення.
Function Expression можна передавати в інші функції як callback.
Для незмінних посилань на функції зазвичай використовують const.
Стрілкові функції є коротшим варіантом запису функціональних виразів.