Пошук уроків, статей та іншого контенту
Розберіть різницю між параметрами й аргументами функції та навчіться передавати дані під час виклику. Дізнайтеся, як задавати значення параметрів за замовчуванням.
Функція може отримувати дані ззовні й використовувати їх під час виконання. Наприклад, функція може привітати користувача, якщо отримує його ім’я.
function greet(name) {
return `Привіт, ${name}!`;
}
const message = greet("Олена");
console.log(message); // Привіт, Олена!У цьому прикладі:
name — параметр функції;
"Олена" — аргумент, переданий під час виклику;
greet("Олена") — виклик функції.
Параметр — це змінна, яку оголошують у дужках під час створення функції.
function add(a, b) {
return a + b;
}Тут a і b — параметри функції add.
Параметри працюють як локальні змінні: вони доступні всередині функції та містять передані значення.
Аргумент — це конкретне значення, яке передають функції під час її виклику.
const result = add(3, 5);
console.log(result); // 8У цьому виклику:
3 — аргумент для параметра a;
5 — аргумент для параметра b.
Параметри описують, які дані очікує функція, а аргументи містять фактичні дані.
Аргументи передають через кому. Їхній порядок має значення: перший аргумент відповідає першому параметру, другий — другому і так далі.
function introduce(name, age) {
return `Мене звати ${name}, мені ${age} років.`;
}
console.log(introduce("Іван", 25));
// Мене звати Іван, мені 25 років.
console.log(introduce("Марія", 30));
// Мене звати Марія, мені 30 років.Якщо змінити порядок аргументів, результат також зміниться:
console.log(introduce(25, "Іван"));
// Мене звати 25, мені Іван років.JavaScript не перевіряє, чи відповідає тип аргументу призначенню параметра. Тому розробник має передавати значення в правильному порядку та правильного типу.
Функція може не мати параметрів. У такому разі дужки після її назви залишаються порожніми.
function getWelcomeMessage() {
return "Ласкаво просимо!";
}
console.log(getWelcomeMessage());
// Ласкаво просимо!Таку функцію можна викликати без аргументів.
Якщо функція очікує параметр, але відповідний аргумент не передано, значенням параметра буде undefined.
function showMessage(message) {
console.log(message);
}
showMessage();
// undefinedundefined означає, що значення не було задано.
Якщо параметр використовується в обчисленні, це може призвести до неочікуваного результату:
function multiply(number, multiplier) {
return number * multiplier;
}
console.log(multiply(5));
// NaNNaN означає, що результат не є коректним числом. Параметр multiplier має значення undefined, тому обчислення 5 * undefined не дає звичайного числа.
Щоб функція мала коректне значення навіть без аргументу, параметру можна задати значення за замовчуванням.
Синтаксис:
function functionName(parameter = defaultValue) {
// тіло функції
}Приклад:
function greet(name = "гість") {
return `Привіт, ${name}!`;
}
console.log(greet("Олена"));
// Привіт, Олена!
console.log(greet());
// Привіт, гість!Якщо аргумент передано, використовується він. Якщо аргумент не передано, використовується значення "гість".
function calculatePrice(price, quantity = 1) {
return price * quantity;
}
console.log(calculatePrice(100, 3)); // 300
console.log(calculatePrice(100)); // 100Параметр quantity за замовчуванням дорівнює 1. Тому виклик calculatePrice(100) означає обчислення 100 * 1.
function createUser(name = "Невідомий", role = "користувач") {
return `${name}: ${role}`;
}
console.log(createUser());
// Невідомий: користувач
console.log(createUser("Олена"));
// Олена: користувач
console.log(createUser("Олена", "адміністратор"));
// Олена: адміністраторundefined і значення за замовчуваннямЗначення за замовчуванням використовується не лише тоді, коли аргумент зовсім не передали, а й тоді, коли явно передали undefined.
function greet(name = "гість") {
return `Привіт, ${name}!`;
}
console.log(greet());
// Привіт, гість!
console.log(greet(undefined));
// Привіт, гість!Інші значення, зокрема null, не запускають значення за замовчуванням:
function greet(name = "гість") {
return `Привіт, ${name}!`;
}
console.log(greet(null));
// Привіт, null!У цьому випадку null є переданим значенням, тому JavaScript не замінює його на "гість".
Параметр зі значенням за замовчуванням може бути перед будь-якими іншими параметрами, але на практиці зручніше розміщувати такі параметри наприкінці.
function createMessage(text, prefix = "Повідомлення") {
return `${prefix}: ${text}`;
}
console.log(createMessage("Файл збережено"));
// Повідомлення: Файл збережено
console.log(createMessage("Помилка підключення", "Помилка"));
// Помилка: Помилка підключенняЯкщо потрібно пропустити параметр, який стоїть раніше, але передати наступний, можна використати undefined.
function describeProduct(name, category = "загальний", price = 0) {
return `${name}, категорія: ${category}, ціна: ${price} грн`;
}
console.log(describeProduct("Книга", undefined, 250));
// Книга, категорія: загальний, ціна: 250 грнЗначення за замовчуванням може бути не лише рядком або числом. Це може бути результат виразу чи виклику іншої функції.
function getCurrentYear() {
return new Date().getFullYear();
}
function showYear(year = getCurrentYear()) {
return `Рік: ${year}`;
}
console.log(showYear(2024)); // Рік: 2024
console.log(showYear()); // Поточний рікВираз для значення за замовчуванням обчислюється тоді, коли відповідний аргумент не передано або він дорівнює undefined.
function calculateOrder(productName, price, quantity = 1, discount = 0) {
const total = price * quantity;
const finalPrice = total - discount;
return `${productName}: ${finalPrice} грн`;
}
console.log(calculateOrder("Книга", 300));
// Книга: 300 грн
console.log(calculateOrder("Навушники", 1500, 2));
// Навушники: 3000 грн
console.log(calculateOrder("Рюкзак", 2000, 1, 250));
// Рюкзак: 1750 грнФункція calculateOrder має чотири параметри:
productName — назва товару;
price — ціна однієї одиниці;
quantity — кількість, за замовчуванням 1;
discount — знижка, за замовчуванням 0.
Завдяки значенням за замовчуванням функцію можна викликати як із повним набором аргументів, так і лише з обов’язковими.
function square(number) {
return number * number;
}
square(4);number — параметр, а 4 — аргумент. Це різні поняття.
function divide(dividend, divisor) {
return dividend / divisor;
}
console.log(divide(10, 2)); // 5
console.log(divide(2, 10)); // 0.2Зміна порядку аргументів змінює результат.
function add(a, b) {
return a + b;
}
console.log(add(5));
// NaNДля другого параметра не передано значення. Якщо параметр необов’язковий, задайте йому значення за замовчуванням:
function add(a, b = 0) {
return a + b;
}
console.log(add(5)); // 5null використає значення за замовчуваннямfunction greet(name = "гість") {
return `Привіт, ${name}!`;
}
console.log(greet(null));
// Привіт, null!null — це окреме передане значення, а не відсутність аргументу. Якщо потрібно замінювати і null, це треба зробити окремою перевіркою.
function add(a, b) {
return a + b;
}
console.log(add("5", 2)); // 52Якщо один з аргументів є рядком, оператор + об’єднає значення як текст. Перед викликом функції переконайтеся, що аргументи мають потрібний тип.
Створіть функцію getFullName, яка приймає firstName і lastName та повертає повне ім’я.
Створіть функцію getTemperature, яка приймає температуру за Цельсієм і параметр unit зі значенням за замовчуванням "°C".
Створіть функцію calculateArea, яка приймає ширину та висоту. Висота має за замовчуванням дорівнювати 1.
Створіть функцію welcomeUser, яка приймає ім’я зі значенням за замовчуванням "користувач" і повертає вітальне повідомлення.
Приклад одного з розв’язків:
function calculateArea(width, height = 1) {
return width * height;
}
console.log(calculateArea(5, 3)); // 15
console.log(calculateArea(5)); // 5Параметр — змінна в оголошенні функції.
Аргумент — конкретне значення під час виклику функції.
Аргументи передаються параметрам у тому самому порядку.
Якщо аргумент не передано, параметр отримує значення undefined.
Значення за замовчуванням задають після знака =.
Значення за замовчуванням використовується, якщо аргумент не передано або передано undefined.
null не замінюється значенням за замовчуванням.
Значення за замовчуванням допомагають робити параметри необов’язковими та запобігають неочікуваним результатам.