JavaScript | Оператор return

Зачем нужен оператор return в JavaScript?

Оператор return остановит работу Функции или Цикла и вернёт значение, которое находится справа от него. Значение может быть вычисляемым (одна переменная), а может быть выражением (несколько переменных, между которыми есть другие операторы — сложение, умножение, возведение в степень и т.п..). Оператор return является одним из разновидностей операторов внезапного завершения. Слово «return» является зарезервированным словом в языке JavaScript и его нельзя использовать при именовании переменных и функций.

Видео на тему «Функция возвращает»

Простой пример для функции. Представьте, что вы хотите получить сумму двух чисел. Вы ПЕРЕДАЁТЕ в функцию два ПАРАМЕТРА. Внутри тела функции происходит сложение.

Если вы просто запишете функцию в таком виде, то ничего дельного не произойдёт:

function AB (a,b){a + b}
AB(1,3)

JavaScript конечно же выполнит сложение в функции, но НЕ ВЕРНЁТ результат вам обратно для ваших последующих вычислений. Вы же хотите получить число после работы функции, верно?

Сложили два числа в функции, но не вернули результат сложения - JavaScript — Сложили два числа в функции, но не вернули результат сложения — JavaScript

Это очень похоже на диалог с другим человеком, когда вы разговариваете — вы ртом транслируете свои мысли собеседнику, но иногда в своей голове вы прокручиваете более сложные рассуждения, не открывая рта при этом. Ваше долгое молчание может вызвать у собеседника смущение. Он вас спросит: «Ты чего молчишь? Что ты думаешь по этому поводу?». Вам нужно будет ОТКРЫТЬ РОТ и СКАЗАТЬ то, что вы думаете. Иначе вас никто другой не поймёт. В JavaScript всё тоже самое.

Так вот если вы хотите получать результат вычислений, тогда вам нужно его ВЕРНУТЬ, то есть выполнить работу оператора return. Только он умеет возвращать из функции нужные значения. Всегда держите в голове три вида функций — одни функцию ДЕЛАЮТ, другие ВОЗВРАЩАЮТ, третьи ДЕЛАЮТ и ВОЗВРАЩАЮТ. Иного не дано.

Нашу функцию нужно будет переписать так:

function AB (a,b){return a + b}

AB(1,3)
4

В этот раз мы получим ВОЗВРАЩЁННОЕ значение из тела функции.

Функция сложила два числа и вернула итоговое значение - JavaScript — Функция сложила два числа и вернула итоговое значение — JavaScript

Стрелочная функция и оператор return

Стрелочные функции были созданы для упрощения восприятия обычных функций в коде программ на JavaScript. Это упрощение привело к тому, что символ стрелки «=>» по сути является оператором return. То есть, всё что будет расположено справа от стрелки, будет возвращено после работы функции.

Предлагаю сравнить две функции (классическую и стрелочную):

// классическая
function AB (a,b){return a + b}
// стрелочная
(a,b)=>(a + b)

Хочу обратить внимание на «лаконичное тело» стрелочной функции. Оно заключено в круглые скобки (не фигурные). Также помните, что все стрелочные функции анонимные, поэтому у неё нет имени.

Пример работы:

AB(2,3)
5

var x = (a,b)=>(a + b)
x(2,3)
5

В обоих случаях мы получим ВОЗВРАЩЁННОЕ значение 5. Но в стрелочной функции мы не увидим оператора return, хотя по факту операция возвращения значения там есть.

Классическая функция с оператором return - стрелочная без - JavaScript — Классическая функция с оператором return — стрелочная без — JavaScript

Условия в функции и несколько операторов return

В теле функции могут присутствовать различные условия. В каждом из этих условий может быть свой собственный оператор return. То есть в одной функции может быть несколько ВОЗВРАТОВ.

Давайте представим, что мы передаём в функцию значение температуры за окном, а функция ВОЗВРАЩАЕТ нам строку с предложением под определённую температуру.

Пример:

function temp(t){
   if(t<-10){return "Очень холодно"}
   else if(t<5){return "Холодно"}
   else if(t<16){return "Прохладно"}
   else if(t<26){return "Идеально"}
   else {return "Жарко"}
}

Результат работы функции:

temp(10)
"Прохладно"
temp(-5)
"Холодно"
temp(-14)
"Очень холодно"
temp(23)
"Идеально"
temp(40)
"Жарко"

Несколько операторов return в одной функции - JavaScript — Несколько операторов return в одной функции — JavaScript

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

Синтаксис оператора return

ReturnStatement _{[Yield, Await]} :

return ;

return [не LineTerminator здесь] Expression _{[+In, ?Yield, ?Await]} ;

Примечание

Оператор return заставляет функцию прекращать выполнение и, в большинстве случаев, возвращает значение вызывающей стороне. Если выражение не указано, возвращаемое значение является undefined (не определено). В противном случае возвращаемое значение является значением Expression. Оператор return может не возвращать значение вызывающей стороне в зависимости от окружающего контекста. Например, в блоке try запись завершения оператора return может быть заменена другой записью завершения во время оценки блока finally.

Семантика времени выполнения: оценка

ReturnStatement : return ;

1. Вернуть Completion { [[Type]]: return, [[Value]]: undefined, [[Target]]: empty }.

ReturnStatement : return Expression ;

1. Пусть exprRef будет результатом вычисления Expression. 
2. Пусть exprValue будет ? GetValue(exprRef). 
3. Если ! GetGeneratorKind() является async, установить exprValue на ? Await(exprValue). 
4. Вернуть Completion { [[Type]]: return, [[Value]]: exprValue, [[Target]]: empty }.

Информационные ссылки

Стандарт ECMAScript — Раздел «12.6.2 Keywords and Reserved Words» — https://tc39.es/ecma262/#prod-ReservedWord

Оператор continue

Стандарт ECMAScript — Раздел «14.8 The continue Statement» — https://tc39.es/ecma262/#sec-continue-statement

Оператор break

Стандарт ECMAScript — Раздел «14.9 The break Statement» — https://tc39.es/ecma262/#sec-break-statement

Стандарт ECMAScript — Раздел «14.10 The return Statement» — https://tc39.es/ecma262/#sec-return-statement

Стандарт ECMAScript — Раздел «14.14 The throw Statement» — https://tc39.es/ecma262/#sec-throw-statement

ECMAScript | Условные обозначения