return: результат функции

До сих пор наши функции в основном печатали результат через console.log. Но иногда результат нужен не человеку, а самой программе – например, чтобы сохранить его в переменную, использовать в другом вычислении или проверить в условии.

Для этого функция должна вернуть значение. В JavaScript это делает return:

order-total.jsjs

1function orderTotal(price, count) {2  return price * count;3}45const total = orderTotal(90, 3);6console.log(total);

Консоль

270

orderTotal(90, 3) возвращает 270, поэтому после выполнения весь вызов можно воспринимать как обычное значение:

запись в коде

const total = orderTotal(90, 3);

что получается после вызова

const total = 270;

Разница лишь в том, что число 270 программа получила, выполнив функцию.

Что можно написать после return

После return можно указать готовое значение, переменную или выражение:

return-forms.jsjs

1return 300;2return price;3return price * count;

В последнем случае сначала вычислится price * count, а функция вернёт получившийся результат. За один вызов функция возвращает одно значение. Посмотрим весь путь значения по шагам:

Вызов: аргументы внутрь – результат наружу

function orderTotal(price, count) {

return price * count;

}

const total = orderTotal(90, 3);

Вызов: выполнение прыгает в тело функции, аргументы 90 и 3 легли в параметры.

console.log(total);

Вызов: выполнение прыгает в тело функции, аргументы 90 и 3 легли в параметры.

Сначала вычисляется выражение: 90 * 3 → 270.

Выражение свернулось – return вернёт 270 и завершит вызов.

Вызов завершён и превратился в своё значение – 270 легло в total.

Печатаем 270.

Вызов – прыжок в тело и обратно: внутрь уходят аргументы, наружу – значение return.

console.log показывает, return возвращает

Здесь легко запутаться. Если функция что-то напечатала в консоли, может показаться, что это и есть её результат. Но вывод в консоль и результат функции – разные вещи.

Посмотрим на обычную функцию суммы:

sum-log.jsjs

1function sum(a, b) {2  console.log(a + b);3}45const result = sum(2, 3);6console.log(result);

Консоль

undefined

Первую 5 напечатала сама функция – сработал console.log(a + b). Но затем мы отдельно попросили вывести result и получили undefined. Значит, функция показала сумму в консоли, но наружу её не передала.

Чтобы результат вызова можно было сохранить и использовать дальше, его нужно вернуть:

sum-return.jsjs

1function sum(a, b) {2  return a + b;3}45const result = sum(2, 3);6console.log(result);

Консоль

Теперь всё иначе: sum(2, 3) возвращает 5, и это значение попадает в result. Поэтому полезно разделять две вещи: console.log(...) показывает значение человеку, return отдаёт значение программе.

С результатом вызова можно работать

После return вызов функции ведёт себя как обычное значение. Его необязательно сначала сохранять в переменную – можно использовать там же, где вы использовали бы число, строку или другое значение.

Сохранить:

save-result.jsjs

1const price = double(50);

Использовать в выражении или условии:

call-in-expression.jsjs

1const finalPrice = double(50) + 20;23if (double(60) > 100) {4  console.log('Дорого');5}

Передать другой функции:

chain-calls.jsjs

1addTen(double(5));

Сначала double(5) возвращает 10, затем получается addTen(10), который возвращает 20. Так функции соединяются друг с другом: одна возвращает результат, а другая использует его дальше.

Но у вложенности есть цена – читаемость: чем больше вызовов внутри вызовов, тем труднее следить за порядком вычислений. Если цепочка разрастается, промежуточный результат лучше положить в переменную с понятным именем:

Промежуточные переменные с именами

1const step1 = addTen(double(5));  // 202// 503const step2 = addTen(double(step1));4console.log(step2);

Глубокая вложенность

1console.log(addTen(double(addTen(double(5)))));

Возвращать можно разные значения

is-adult.jsjs

1function isAdult(age) {2  return age >= 18;3}45console.log(isAdult(20));6console.log(isAdult(14));

Консоль

true

false

Здесь выражение age >= 18 даёт true или false, поэтому одно из этих значений и становится результатом функции. Позже функции будут возвращать также строки, массивы, объекты и другие значения.

return завершает текущий вызов

До сих пор мы смотрели на return как на способ получить результат из функции. Но у него есть ещё одно важное свойство: как только JavaScript встречает return, текущий вызов заканчивается. Всё, что находится ниже, в этом вызове уже не выполняется:

after-return.jsjs

1function test() {2  console.log('до');3  return 5;4  console.log('после');5}67console.log(test());

Консоль

до

Функция успела напечатать до, затем дошла до return 5 и сразу закончила работу. Поэтому строка console.log('после') недостижима.

При этом следующий вызов test() снова начнёт выполнение функции с первой строки: завершается вызов, а не сама функция.

Иногда нужно просто выйти

Если главная задача return в конкретном месте – остановить функцию, возвращать значение необязательно. Можно написать просто return; – вызов закончится точно так же, а его результатом станет undefined:

submit-order.jsjs

1function submitOrder(total) {2  if (total <= 0) {3    console.log('Корзина пуста');4    return;5  }6  console.log('Заказ отправлен');7}89submitOrder(1200);10submitOrder(0);

Консоль

Заказ отправлен

Корзина пуста

Если сумма заказа равна нулю, отправлять заказ дальше бессмысленно. Функция сообщает о проблеме и заканчивает текущий вызов через return. Поэтому до строки console.log('Заказ отправлен') пустая корзина вообще не доберётся.

Ту же проверку можно записать и привычным if..else – обе версии работают одинаково:

ранний return

1if (total <= 0) {2  console.log('Корзина пуста');3  return;4}5console.log('Заказ отправлен');

if..else

1if (total <= 0) {2  console.log('Корзина пуста');3} else {4  console.log('Заказ отправлен');5}

Пока проверка одна, оба варианта читаются одинаково хорошо – выбирайте любой. Разница появляется, когда проверок несколько: каждая новая ветка else вкладывает код на уровень глубже, а return держит все проверки на одном уровне. Это и показывает следующая секция.

Ранний выход

Допустим, заказ можно оформить, только если он оплачен и указан адрес. Без раннего выхода можно написать так:

checkout-nested.jsjs

1function checkout(isPaid, hasAddress) {2  if (isPaid) {3    if (hasAddress) {4      return 'Заказ оформлен';5    } else {6      return 'Укажите адрес';7    }8  } else {9    return 'Сначала оплатите заказ';10  }11}

Это работает. Но читать такую функцию неудобно: основная логика всё глубже уезжает вправо. Проще сначала проверить причины, по которым продолжать нельзя. Условия при этом переворачиваются: в начало функции поднимается то, что раньше лежало в ветках else, – и каждый такой случай сразу завершает вызов через return:

checkout.jsjs

1function checkout(isPaid, hasAddress) {2  if (!isPaid) {3    return 'Сначала оплатите заказ';4  }5  if (!hasAddress) {6    return 'Укажите адрес';7  }8  return 'Заказ оформлен';9}1011console.log(checkout(true, false));12console.log(checkout(true, true));

Консоль

Укажите адрес

Заказ оформлен

Функция идёт сверху вниз. Если заказ не оплачен – ответ уже известен, поэтому продолжать незачем: return сразу завершает вызов. Если с оплатой всё хорошо, проверяем адрес. Нет адреса – снова сразу выходим. До последней строки доходят только заказы, которые прошли обе проверки.

Плохой случай? Разобрались с ним и вышли. Хороший случай идёт дальше.

// теперь вы знаете

return вычисляет выражение справа и возвращает получившееся значение – одно за вызов
Вызов функции становится значением: его можно сохранить, сравнить, передать дальше
console.log показывает значение человеку, return отдаёт его программе
return завершает текущий вызов: код ниже не выполняется, а return; возвращает undefined
Ранний выход: плохой случай – разобрались и вышли, хороший идёт дальше

Проверьте себя

Что появится в консоли?

function double(x) {
  return x * 2;
}
console.log(double(4));

8

undefined

x * 2

ничего

Что появится в консоли?

function hello() {
  console.log('привет');
}
console.log(hello());

привет один раз

привет, затем undefined

undefined, затем привет

ничего

Что НЕ появится в консоли?

function test() {
  console.log('до');
  return 5;
  console.log('после');
}
console.log(test());

после

до

5

появится всё

Функция-приветствие

Допишите тело greet(name): функция возвращает строку «Привет, <имя>!» – не печатает, а именно возвращает. Шаблон и вызовы менять не нужно.

function greet(name) {
  // верните строку через return
}

console.log(greet('Ира'));
console.log(greet('Макс'));

1function greet(name) {2  return `Привет, ${name}!`;3}45console.log(greet('Ира'));6console.log(greet('Макс'));7

Функция возвращает значение – а печатать его или нет, решает вызывающий код. Именно поэтому проверка смогла сравнить результат с образцом.

Бесплатная доставка

Напишите функцию freeDelivery(total), возвращающую true, если сумма заказа не меньше 1000, и false в остальных случаях.

function freeDelivery(total) {
  // верните результат сравнения
}

1function freeDelivery(total) {2  return total >= 1000;3}4

Выражение total >= 1000 вычисляется в true или false – это значение и возвращается. if здесь не нужен.

Скидка и доставка

Допишите тело discountPrice(price): функция возвращает цену со скидкой 200. Строки с console.log ниже готовы – они подставляют результат вашей функции в выражение и печатают его.

function discountPrice(price) {
  // верните цену со скидкой 200
}

console.log(discountPrice(1000) + 300);
console.log(discountPrice(500) + 300);

1function discountPrice(price) {2  return price - 200;3}45console.log(discountPrice(1000) + 300);6console.log(discountPrice(500) + 300);7

Функция только возвращает цену со скидкой, а вызывающий код использует результат в выражении: прибавляет доставку и печатает.

Цепочка вызовов

Функция double уже написана. Допишите addDelivery(price), возвращающую цену плюс 300 доставки. Вызов в конце передаёт результат одной функции другой – не меняйте его.

function double(x) {
  return x * 2;
}

function addDelivery(price) {
  // верните цену с доставкой
}

console.log(addDelivery(double(400)));

1function double(x) {2  return x * 2;3}45function addDelivery(price) {6  return price + 300;7}89console.log(addDelivery(double(400)));10

Внутренний вызов вычислился первым: double(400) → 800. Его результат стал аргументом addDelivery(800) → 1100 – функции соединились в цепочку.

Появится ли в консоли «Заказ отправлен»?

function submitOrder(total) {
  if (total <= 0) {
    return;
  }
  console.log('Заказ отправлен');
}
submitOrder(0);

Порог скидки

Напишите функцию printDiscount(total): если сумма меньше 1000 – напечатайте «Скидки нет» и выйдите из функции через return; – без else. Иначе напечатайте «Скидка 10%». Вызовы уже написаны – не меняйте их.

function printDiscount(total) {
  // проверка с return; затем печать скидки
}

printDiscount(1500);
printDiscount(300);

1function printDiscount(total) {2  if (total < 1000) {3    console.log('Скидки нет');4    return;5  }6  console.log('Скидка 10%');7}89printDiscount(1500);10printDiscount(300);11

Маленькая сумма напечатала своё сообщение и завершила вызов через return; – значение возвращать не нужно. До печати скидки доходят только суммы от 1000, и else не понадобился.

Большее из двух

Напишите функцию max(a, b), возвращающую большее из двух чисел. Если числа равны – верните любое из них.

function max(a, b) {
  // сравните и верните большее
}

1function max(a, b) {2  if (a > b) return a;3  return b;4}5

Два return без else: если a больше – вышли сразу, иначе выполнение само дошло до return b. Ранний выход в самом маленьком виде.

Цена билета

Финальная задача урока. Напишите ticketPrice(age): до 12 лет – 150, с 12 до 59 – 300, с 60 – 100. Постройте функцию на ранних выходах, без else.

function ticketPrice(age) {
  // ранний выход: проверили - вышли
}

1function ticketPrice(age) {2  if (age < 12) return 150;3  if (age < 60) return 300;4  return 100;5}6

Три случая – три выхода, и цепочка проверок читается сверху вниз без единого else. Функцию проверяют пять тестов с разными возрастами, включая граничные 12 и 60.

Предыдущий урокПараметры и аргументы Следующий урок Function Expression и функция как значение

← → переключают уроки · не работают при фокусе в полях ввода