Пошук уроків, статей та іншого контенту
Дізнайтеся, як return повертає результат і завершує виконання функції. Розберіть, що повертає функція без явного return та чим повернення значення відрізняється від console.log().
returnОператор return використовується всередині функції, щоб:
повернути результат роботи функції;
завершити виконання функції в цьому місці.
Повернуте значення можна зберегти у змінну, передати в іншу функцію або використати у виразі.
function add(a, b) {
return a + b;
}
const result = add(2, 3);
console.log(result); // 5Функція add обчислює суму та повертає її за допомогою return. Значення 5 зберігається у змінній result.
return завершує виконання функціїКоли JavaScript зустрічає return, функція одразу завершується. Команди після return у цій функції не виконуються.
function checkAge(age) {
if (age < 18) {
return "Доступ заборонено";
}
return "Доступ дозволено";
}
console.log(checkAge(16)); // Доступ заборонено
console.log(checkAge(25)); // Доступ дозволеноЯкщо age менше за 18, виконується перший return. Після цього функція завершується, і другий return вже не виконується.
Команди після return можуть бути недосяжними:
function greet() {
return "Привіт";
console.log("Це повідомлення не з'явиться");
}Виклик greet() поверне рядок "Привіт", але console.log після return не виконається.
Функція може повертати будь-яке значення:
число;
рядок;
логічне значення;
масив;
об'єкт;
результат іншого виразу.
function getFullName(firstName, lastName) {
return firstName + " " + lastName;
}
const fullName = getFullName("Олена", "Коваль");
console.log(fullName); // Олена Ковальreturn може містити не лише готове значення, а й вираз:
function square(number) {
return number * number;
}
console.log(square(4)); // 16
console.log(square(7)); // 49Спочатку JavaScript обчислює вираз number * number, а потім повертає отриманий результат.
returnЯкщо функція не має оператора return, вона все одно повертає значення. Це значення — undefined.
function sayHello() {
console.log("Привіт");
}
const result = sayHello();
console.log(result); // undefinedУ цьому прикладі функція виводить текст у консоль, але не повертає цей текст. Тому результат виклику функції дорівнює undefined.
Так само undefined повертається, якщо return написано без значення:
function stopProgram() {
return;
}
console.log(stopProgram()); // undefinedТакий запис може бути корисним, коли потрібно лише завершити функцію:
function printPositive(number) {
if (number <= 0) {
return;
}
console.log("Число додатне");
}
printPositive(-3); // нічого не виводиться
printPositive(5); // Число додатнеreturn і console.log()return та console.log() виконують різні завдання.
returnповертає значення з функції;
завершує виконання функції;
дає змогу використати результат в іншому місці програми.
console.log()виводить значення в консоль;
не повертає це значення з функції;
використовується переважно для перевірки та налагодження програми.
Порівняймо два приклади:
function multiplyWithReturn(a, b) {
return a * b;
}
function multiplyWithLog(a, b) {
console.log(a * b);
}
const firstResult = multiplyWithReturn(3, 4);
const secondResult = multiplyWithLog(3, 4);
console.log(firstResult); // 12
console.log(secondResult); // undefinedПід час виклику multiplyWithLog число 12 з'явиться в консолі, але функція його не повертає. Тому змінна secondResult отримує значення undefined.
Результат функції з return можна використовувати в обчисленнях:
function getPriceWithTax(price) {
return price * 1.2;
}
const totalPrice = getPriceWithTax(100) + 50;
console.log(totalPrice); // 170Функція з console.log() для цього не підходить:
function showPriceWithTax(price) {
console.log(price * 1.2);
}
// Результат лише виводиться в консоль,
// але не може бути використаний у цьому обчисленні.Повернуте значення можна:
function getGreeting(name) {
return `Привіт, ${name}!`;
}
const greeting = getGreeting("Андрій");
console.log(greeting); // Привіт, Андрій!function double(number) {
return number * 2;
}
function printNumber(number) {
console.log(`Число: ${number}`);
}
printNumber(double(6)); // Число: 12function isAdult(age) {
return age >= 18;
}
if (isAdult(20)) {
console.log("Користувач повнолітній");
}Функція isAdult повертає true або false. Це значення можна безпосередньо використати в if.
return часто використовують для перевірки помилкових або особливих випадків на початку функції. Такий підхід називають раннім виходом.
function calculateDiscount(price, discount) {
if (price <= 0) {
return 0;
}
if (discount < 0 || discount > 100) {
return 0;
}
return price - (price * discount) / 100;
}
console.log(calculateDiscount(1000, 10)); // 900
console.log(calculateDiscount(-100, 10)); // 0
console.log(calculateDiscount(1000, 120)); // 0Якщо вхідні дані неправильні, функція одразу повертає 0. Основний розрахунок у такому разі не виконується.
return у функціях із розгалуженнямПереконайтеся, що функція повертає результат у всіх потрібних випадках.
function getTemperatureMessage(temperature) {
if (temperature < 0) {
return "Мороз";
}
if (temperature > 25) {
return "Тепло";
}
return "Прохолодно";
}
console.log(getTemperatureMessage(-5)); // Мороз
console.log(getTemperatureMessage(15)); // Прохолодно
console.log(getTemperatureMessage(30)); // ТеплоЯкщо не передбачити return для певної ситуації, функція поверне undefined:
function getNumberSign(number) {
if (number > 0) {
return "Додатне число";
}
if (number < 0) {
return "Від'ємне число";
}
}
console.log(getNumberSign(0)); // undefinedДля числа 0 жодна умова не виконується, тому функція доходить до кінця без return.
Виправлений варіант:
function getNumberSign(number) {
if (number > 0) {
return "Додатне число";
}
if (number < 0) {
return "Від'ємне число";
}
return "Нуль";
}
console.log(getNumberSign(0)); // Нульfunction validatePassword(password) {
if (password.length < 8) {
return "Пароль має містити щонайменше 8 символів";
}
if (!password.includes("@")) {
return "Пароль має містити символ @";
}
return "Пароль коректний";
}
console.log(validatePassword("abc")); // Пароль має містити щонайменше 8 символів
console.log(validatePassword("password")); // Пароль має містити символ @
console.log(validatePassword("pass@123")); // Пароль коректнийКожен невдалий випадок завершує функцію окремим return. Якщо всі перевірки пройдено, виконується останній return.
console.log() поверне значенняfunction getSum(a, b) {
console.log(a + b);
}
const sum = getSum(2, 3);
console.log(sum); // undefinedЯкщо результат потрібен для подальшої роботи, використовуйте return:
function getSum(a, b) {
return a + b;
}returnfunction getMessage() {
return "Готово";
// Цей код не виконається
console.log("Повідомлення");
}Перемістіть код, який має виконатися, до return.
return у функції з умовоюfunction isPositive(number) {
if (number > 0) {
true;
}
return false;
}У цьому прикладі true просто обчислюється, але не повертається. Правильний варіант:
function isPositive(number) {
if (number > 0) {
return true;
}
return false;
}Ще коротше:
function isPositive(number) {
return number > 0;
}Якщо функція має показати повідомлення користувачу, console.log() може бути достатнім. Якщо результат потрібно зберегти або використати далі, потрібен return.
function getDouble(number) {
return number * 2;
}
const value = getDouble(10);
console.log(value + 5); // 25Створіть функцію getMax, яка приймає два числа та повертає більше з них.
Очікуваний результат:
console.log(getMax(8, 3)); // 8
console.log(getMax(2, 9)); // 9Один із можливих варіантів розв'язання:
function getMax(firstNumber, secondNumber) {
if (firstNumber > secondNumber) {
return firstNumber;
}
return secondNumber;
}
console.log(getMax(8, 3)); // 8
console.log(getMax(2, 9)); // 9return повертає значення з функції.
Після виконання return функція одразу завершується.
Функція без явного return повертає undefined.
return дає змогу зберігати та повторно використовувати результат функції.
console.log() лише виводить значення в консоль і не замінює return.
return без значення також повертає undefined.
Ранній return допомагає завершити функцію, якщо вхідні дані некоректні або виконано потрібну умову.