Пошук уроків, статей та іншого контенту
Дізнайтеся, що таке функції, навіщо вони потрібні та як допомагають уникати дублювання коду. Розберіть базову модель функції: отримати дані, виконати певну логіку та, за потреби, повернути результат.
Функція — це окремий блок коду, який виконує певну дію. Функцію можна викликати один або багато разів у різних місцях програми.
Функції допомагають:
розділяти програму на зрозумілі частини;
не дублювати однаковий код;
повторно використовувати логіку;
передавати дані для обробки;
отримувати результат роботи.
Базова модель функції:
функція отримує дані;
виконує певну логіку;
за потреби повертає результат.
Функцію можна оголосити за допомогою ключового слова function:
function greet() {
console.log("Привіт!");
}У цьому прикладі:
function — ключове слово для створення функції;
greet — назва функції;
() — місце для параметрів;
{} — тіло функції, тобто код, який вона виконує.
Саме оголошення функції ще не запускає її. Щоб виконати код усередині функції, її потрібно викликати:
function greet() {
console.log("Привіт!");
}
greet();Результат:
Привіт!Функцію можна викликати кілька разів:
function greet() {
console.log("Привіт!");
}
greet();
greet();
greet();Результат:
Привіт!
Привіт!
Привіт!Функція може отримувати дані ззовні. Для цього використовують параметри.
function greet(name) {
console.log(`Привіт, ${name}!`);
}
greet("Олена");
greet("Андрій");Результат:
Привіт, Олена!
Привіт, Андрій!name — це параметр функції. Він працює як локальна змінна, у яку потрапляє передане значення.
"Олена" та "Андрій" — це аргументи, тобто конкретні значення, передані під час виклику функції.
Функція може мати кілька параметрів:
function introduce(name, age) {
console.log(`Мене звати ${name}, мені ${age} років.`);
}
introduce("Олена", 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(2, 3);
console.log(result);Результат:
5Коли JavaScript виконує return, функція одразу завершує роботу та передає значення назовні.
Повернений результат можна:
записати у змінну;
передати іншій функції;
використати в умові;
вивести в консоль;
використати в математичному виразі.
function multiply(firstNumber, secondNumber) {
return firstNumber * secondNumber;
}
const price = multiply(20, 3);
const total = price + 10;
console.log(total); // 70returnФункція може виконувати дію, але нічого явно не повертати:
function showMessage(message) {
console.log(message);
}
const result = showMessage("Навчання JavaScript");
console.log(result); // undefinedЯкщо у функції немає return, її результатом буде undefined.
Це не означає, що функція не виконалася. Вона вивела повідомлення в консоль, але не повернула значення для подальшого використання.
Порівняйте:
function showMessage(message) {
console.log(message);
}
function getMessage(message) {
return message;
}
showMessage("Перша функція");
const message = getMessage("Друга функція");
console.log(message);Перша функція виконує дію — виводить повідомлення. Друга функція повертає текст, тому його можна зберегти у змінній.
Без функції однакову логіку довелося б повторювати:
const firstName = "Олена";
console.log(`Привіт, ${firstName}!`);
const secondName = "Андрій";
console.log(`Привіт, ${secondName}!`);
const thirdName = "Марія";
console.log(`Привіт, ${thirdName}!`);За допомогою функції цей код можна зробити коротшим:
function greet(name) {
console.log(`Привіт, ${name}!`);
}
greet("Олена");
greet("Андрій");
greet("Марія");Якщо формат привітання зміниться, достатньо змінити код усередині функції:
function greet(name) {
console.log(`Вітаємо, ${name}! Бажаємо успіхів.`);
}
greet("Олена");
greet("Андрій");
greet("Марія");Усі виклики автоматично використовуватимуть нову логіку.
Розглянемо функцію для розрахунку вартості товарів із податком:
function calculateTotal(price, taxRate) {
const tax = price * taxRate;
return price + tax;
}
const phonePrice = calculateTotal(1000, 0.2);
const bookPrice = calculateTotal(500, 0.2);
console.log(phonePrice); // 1200
console.log(bookPrice); // 600Функція calculateTotal:
отримує ціну товару та ставку податку;
обчислює суму податку;
додає податок до початкової ціни;
повертає загальну вартість.
Зверніть увагу: функція не знає, для якого саме товару виконується розрахунок. Вона просто отримує числа й обробляє їх. Це робить функцію універсальною.
Для параметра можна задати значення за замовчуванням. Воно використовується, якщо аргумент не передали:
function greet(name = "гість") {
return `Привіт, ${name}!`;
}
console.log(greet("Олена"));
console.log(greet());Результат:
Привіт, Олена!
Привіт, гість!Змінні, оголошені всередині функції, доступні лише в цій функції:
function calculateSquare(number) {
const square = number * number;
return square;
}
console.log(calculateSquare(4));Змінна square існує тільки всередині calculateSquare. Звернутися до неї за межами функції не можна:
function calculateSquare(number) {
const square = number * number;
return square;
}
console.log(square); // ПомилкаТакий принцип називається областю видимості. На початковому етапі достатньо запам’ятати: внутрішні змінні функції призначені для її роботи та не доступні зовні.
Функцію також можна зберегти у змінній:
const add = function (firstNumber, secondNumber) {
return firstNumber + secondNumber;
};
console.log(add(4, 6)); // 10У цьому випадку функція не має власної назви, а виклик відбувається через ім’я змінної add.
Для початку найчастіше використовують звичайне оголошення функції:
function add(firstNumber, secondNumber) {
return firstNumber + secondNumber;
}Обидва варіанти можуть виконувати однакову роботу.
У JavaScript є короткий синтаксис функцій — стрілкові функції:
const add = (firstNumber, secondNumber) => {
return firstNumber + secondNumber;
};
console.log(add(2, 8)); // 10Якщо функція складається з одного виразу, її можна записати ще коротше:
const add = (firstNumber, secondNumber) => firstNumber + secondNumber;
console.log(add(2, 8)); // 10На початку вивчення функцій важливо добре зрозуміти звичайний синтаксис із function. Стрілкові функції можна використовувати як коротший альтернативний запис.
function sayHello() {
console.log("Привіт!");
}Цей код не виведе повідомлення, доки функцію не викличуть:
sayHello();sayHello; // функція не викликається
sayHello(); // функція викликаєтьсяДужки () після назви функції означають її виклик.
returnfunction add(firstNumber, secondNumber) {
firstNumber + secondNumber;
}
const result = add(2, 3);
console.log(result); // undefinedЩоб результат був повернений, потрібно написати return:
function add(firstNumber, secondNumber) {
return firstNumber + secondNumber;
}
console.log(add(2, 3)); // 5returnfunction getNumber() {
return 10;
console.log("Цей код не виконається");
}Після return функція завершується, тому код нижче не виконається.
function divide(dividend, divisor) {
return dividend / divisor;
}
console.log(divide(10, 2)); // 5
console.log(divide(2, 10)); // 0.2Передавайте аргументи в тому порядку, у якому оголошені параметри.
Створіть функцію calculateDiscount, яка:
отримує початкову ціну товару та відсоток знижки;
обчислює суму знижки;
повертає ціну після знижки.
Приклад використання:
function calculateDiscount(price, discountPercent) {
const discount = price * discountPercent / 100;
return price - discount;
}
const finalPrice = calculateDiscount(1000, 15);
console.log(finalPrice); // 850Спробуйте змінити початкову ціну та відсоток знижки й перевірте результат.
Функція — це блок коду для виконання певної логіки.
Функцію спочатку оголошують, а потім викликають.
Параметри дають змогу передавати дані у функцію.
Аргументи — це конкретні значення, передані під час виклику.
return повертає результат роботи функції.
Після виконання return функція завершується.
Функції допомагають повторно використовувати код і уникати дублювання.
Змінні, оголошені всередині функції, доступні лише в її області видимості.
Якщо функція нічого не повертає, її результатом є undefined.