Пошук уроків, статей та іншого контенту
Навчіться створювати функції за допомогою декларації function. Розберіть синтаксис, виклик функції та особливість Function Declaration, пов'язану з hoisting.
Function Declaration — це спосіб оголосити функцію за допомогою ключового слова function.
Функція — це іменований блок коду, який можна виконувати багато разів. Вона допомагає:
не дублювати однаковий код;
розділяти програму на зрозумілі частини;
передавати дані для обробки;
повертати результат.
Базовий синтаксис:
function functionName() {
// код функції
}Наприклад:
function sayHello() {
console.log("Привіт!");
}У цьому прикладі:
function — ключове слово для створення функції;
sayHello — ім’я функції;
() — місце для параметрів;
{} — тіло функції, тобто код, який буде виконано.
Саме оголошення функції ще не запускає її код.
Щоб виконати функцію, потрібно викликати її за іменем і додати круглі дужки:
function sayHello() {
console.log("Привіт!");
}
sayHello();Результат:
Привіт!Функцію можна викликати кілька разів:
function sayHello() {
console.log("Привіт!");
}
sayHello();
sayHello();
sayHello();Результат:
Привіт!
Привіт!
Привіт!Кожен виклик запускає код усередині функції заново.
Функція може отримувати дані ззовні. Для цього використовують параметри.
function greet(name) {
console.log(`Привіт, ${name}!`);
}
greet("Олена");
greet("Андрій");Результат:
Привіт, Олена!
Привіт, Андрій!name — це параметр функції. Він працює як локальна змінна, у яку під час виклику потрапляє передане значення.
"Олена" та "Андрій" — це аргументи, тобто фактичні значення для параметра.
Функція може мати кілька параметрів:
function showUser(name, age) {
console.log(`${name} має вік ${age} років.`);
}
showUser("Марія", 25);Результат:
Марія має вік 25 років.Порядок аргументів має значення:
function subtract(firstNumber, secondNumber) {
console.log(firstNumber - secondNumber);
}
subtract(10, 3); // 7
subtract(3, 10); // -7Функція може не лише виконувати дію, а й повертати результат за допомогою return.
function add(firstNumber, secondNumber) {
return firstNumber + secondNumber;
}
const result = add(5, 3);
console.log(result);Результат:
8Ключове слово return:
повертає значення з функції;
завершує виконання функції.
function getMessage() {
return "Функція повернула це повідомлення";
console.log("Цей код не виконається");
}
console.log(getMessage());Код після return у цій функції недосяжний.
Результат:
Функція повернула це повідомленняПовернений результат можна:
зберегти у змінну;
передати в іншу функцію;
використати в умові;
одразу вивести в консоль.
function multiply(firstNumber, secondNumber) {
return firstNumber * secondNumber;
}
const product = multiply(4, 6);
if (product > 20) {
console.log("Результат більший за 20");
}returnЯкщо функція не має return, вона повертає спеціальне значення undefined.
function showMessage() {
console.log("Повідомлення");
}
const result = showMessage();
console.log(result);Результат:
Повідомлення
undefinedВиведення повідомлення в консоль і повернення значення — це різні дії:
function printSum(firstNumber, secondNumber) {
console.log(firstNumber + secondNumber);
}
function getSum(firstNumber, secondNumber) {
return firstNumber + secondNumber;
}
const printedResult = printSum(2, 3);
const returnedResult = getSum(2, 3);
console.log(printedResult); // undefined
console.log(returnedResult); // 5Якщо результат потрібен для подальших обчислень, використовуйте return.
Для параметра можна вказати значення за замовчуванням. Воно буде використане, якщо аргумент не передали або передали undefined.
function greet(name = "гість") {
console.log(`Привіт, ${name}!`);
}
greet("Ірина");
greet();Результат:
Привіт, Ірина!
Привіт, гість!Важлива особливість Function Declaration — hoisting, або підняття оголошення.
JavaScript обробляє оголошення функцій до виконання іншого коду в поточній області видимості. Тому Function Declaration можна викликати навіть до рядка, у якому вона оголошена:
sayHello();
function sayHello() {
console.log("Привіт!");
}Результат:
Привіт!Це працює саме для декларації функції:
calculate();
function calculate() {
console.log("Обчислення виконано");
}Однак навіть якщо JavaScript дозволяє такий порядок, зазвичай краще спочатку оголошувати функції, а потім їх викликати. Так код легше читати:
function calculate() {
console.log("Обчислення виконано");
}
calculate();Функція створює власну область видимості. Змінні, оголошені всередині функції, доступні лише в ній:
function showMessage() {
const message = "Внутрішнє повідомлення";
console.log(message);
}
showMessage();Звернутися до message за межами функції не можна:
function showMessage() {
const message = "Внутрішнє повідомлення";
}
showMessage();
// Викличе помилку, тому що message існує лише всередині функції
console.log(message);Зовнішні змінні можуть бути доступні всередині функції:
const siteName = "Fullstack";
function showSiteName() {
console.log(siteName);
}
showSiteName();Проте функції краще робити максимально незалежними та передавати необхідні дані через параметри:
function showSiteName(name) {
console.log(name);
}
showSiteName("Fullstack");Розглянемо функцію, яка обчислює вартість товарів із урахуванням знижки:
function calculateDiscountedPrice(price, discount = 0) {
const discountAmount = price * discount / 100;
return price - discountAmount;
}
const firstPrice = calculateDiscountedPrice(1000, 20);
const secondPrice = calculateDiscountedPrice(500);
console.log(`Ціна зі знижкою: ${firstPrice} грн`);
console.log(`Ціна без знижки: ${secondPrice} грн`);Результат:
Ціна зі знижкою: 800 грн
Ціна без знижки: 500 грнФункція:
отримує ціну та відсоток знижки;
використовує значення 0, якщо знижку не передали;
обчислює суму знижки;
повертає фінальну ціну.
Оголошення функції створює її:
function sayHello() {
console.log("Привіт!");
}Виклик функції запускає її:
sayHello();Це різні операції. Якщо тільки оголосити функцію, але не викликати її, код усередині не виконається:
function sayHello() {
console.log("Привіт!");
}
// Нічого не відбудетьсяfunction sayHello() {
console.log("Привіт!");
}
sayHello; // Функція не викликаєтьсяДля виклику потрібні дужки:
sayHello();returnfunction add(firstNumber, secondNumber) {
firstNumber + secondNumber;
}
const result = add(2, 3);
console.log(result); // undefinedПотрібно явно повернути результат:
function add(firstNumber, secondNumber) {
return firstNumber + secondNumber;
}function greet(name) {
console.log(name);
}
greet("Олена");У цьому прикладі:
name — параметр;
"Олена" — аргумент.
function introduce(name, profession) {
console.log(`${name} — ${profession}`);
}
introduce("Програміст", "Олег");Результат буде неправильним, оскільки аргументи передані не в тому порядку:
Програміст — ОлегПравильний виклик:
introduce("Олег", "Програміст");function createMessage() {
const message = "Привіт!";
return message;
}
console.log(message); // ПомилкаПотрібно використовувати значення, яке повернула функція:
const message = createMessage();
console.log(message);Хоча Function Declaration можна викликати до оголошення, такий стиль може ускладнювати читання коду. У більшості випадків зручно дотримуватися послідовності:
оголосити функцію;
викликати функцію.
Створіть функцію calculateAverage, яка:
приймає три числа;
обчислює їхнє середнє арифметичне;
повертає результат.
Приклад розв’язання:
function calculateAverage(firstNumber, secondNumber, thirdNumber) {
return (firstNumber + secondNumber + thirdNumber) / 3;
}
const average = calculateAverage(10, 20, 30);
console.log(average);Результат:
20Function Declaration створюється за допомогою ключового слова function.
Функція має ім’я, параметри та тіло.
Щоб виконати функцію, її потрібно викликати за іменем із круглими дужками.
Параметри отримують дані під час виклику функції.
return повертає результат і завершує виконання функції.
Якщо return відсутній, функція повертає undefined.
Function Declaration підтримує hoisting, тому її можна викликати до оголошення.
Змінні, створені всередині функції, доступні лише в її області видимості.
Функції допомагають повторно використовувати код і структурувати програму.