Оператор return in javascript

JavaScript | Оператор return

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

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

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

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

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

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

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

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

function AB (a,b)return a + b> AB(1,3) 4

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

Стрелочная функция и оператор 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

В теле функции могут присутствовать различные условия. В каждом из этих условий может быть свой собственный оператор 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 , они не конфликтуют друг с другом и отрабатывают внезапное завершение только при выполнении одного из условий.

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

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

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

ReturnStatement : return ;

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

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

Источник

return

Оператор return завершает выполнение текущей функции и возвращает её значение.

Интерактивный пример

Синтаксис

Выражение, значение которого будет возвращено. Если не указано, вместо него возвращается undefined .

Описание

При вызове оператора return в функции её выполнение прекращается. Указанное значение возвращается в место вызова функции. Например, приведённая ниже функция возвращает возведённое в квадрат значение своего аргумента, x (где x – это число):

function square(x)  return x * x; > var demo = square(3); // значение demo будет равняться 9 

Если возвращаемое значение не указано, вместо него возвращается undefined .

Следующие выражения всегда прерывают выполнение функции:

return; return true; return false; return x; return x + y / 3; 

Автоматическая расстановка точек с запятыми

На выражение return влияет автоматическая расстановка точек с запятыми (ASI). Разрыв строки не допускается между ключевым словом return и выражением.

В консоли появится предупреждение «unreachable code after return statement».

Примечание: Начиная с Gecko 40, предупреждение в консоли появляется, если обнаружен недостижимый код после return .

Для того, чтобы избежать данной проблемы (предотвратить ASI), можно использовать скобки:

Примеры

Прерывание функции

Функция немедленно останавливается в точке, где вызывается return .

function counter()  for (var count = 1; ; count++)  // бесконечный цикл console.log(count + "A"); // до 5 if (count === 5)  return; > console.log(count + "B"); // до 4 > console.log(count + "C"); // никогда не появляется > counter(); // Выводит: // 1A // 1B // 2A // 2B // 3A // 3B // 4A // 4B // 5A 

Возвращение функции

function magic(x)  return function calc(x)  return x * 42 >; > var answer = magic(); answer(1337); // 56154 

Спецификации

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 17 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Как правильно использовать return в JavaScript функции

Для чего необходим оператор return в JavaScript функции? Как его использовать внутри функции и что можно делать с возвращаемыми значениями? Сегодня мы поговорим об этом.

Для чего необходим return в JavaScript функции

Это позволяет сделает код более модульным. Есть много разных подходов к написанию кода. Но чаще всего return в JavaScript функции нужен для организации модульного подхода.

Бывают случаи, когда нет возможности применить тернарный оператор или существует необходимость использовать один и тот же фрагмент кода в нескольких местах в рамках одного проекта. В этом случае лучше обернуть его в отдельную функцию. Если речь идет о создании длиной HTML-строки, то наилучший вариант — сохранить ее в отдельной функции для удобства чтения.

Давайте рассмотрим на несколько примеров.

Возврат строки, числа или другого типа данных

function renderGreeeting (name) < // Получаем элемент для рендеринга сообщения приветствия     let app = document.querySelector('#app'); // Создаем приветствие let p = document.createElement('p'); // Создаем тег p p.textContent = `Hi, $! How are you today?`; // Вставляем текст в тег p app.appendChild(p); // Вставляем тег p в UI >

Представим, что мы используем какое-то имя (name), введенное пользователем, для создания некоторой HTML-разметки в пользовательском интерфейсе.

В этом примере можно было бы поступить следующим образом. Сначала создать собственную функцию и вписать внутрь эти строки. После этого можно использовать return, который вернет элемент p в переменной. Это позволит использовать ее в коде в дальнейшем.

function getGreeting (name) < let p = document.createElement('p'); p.textContent = `Hi, $! How are you today?`; return p; > function renderGreeeting (name) < let app = document.querySelector('#app'); // Получаем элемент для рендеринга приветствия app.appendChild(getGreeting(name)); // Вставляем элемент в UI >

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

function getGreeting (name) < // Создаем элементы let wrap = document.createElement('div'); let h1 = document.createElement('h1'); let p = document.createElement('p'); // Добавляем содержимое h1.textContent = `Hi, $!`; p.textContent = 'How are you today?'; wrap.appendChild(h1); wrap.appendChild(p); return wrap; >

Возврат логического типа данных с помощью return в JavaScript функции

Return может быть очень полезным, когда требуется выполнить более сложные проверки, выходящие за рамки простого if … else.

Например, в веб-приложении, которое показывает приобретенные пользователями электронные книги и курсы. Нужно проверить, приобрели ли они продукт, у которого есть доступ к приватной рабочей области Slack. Если да, то пользователь видит кнопку для получения ссылки для приглашения. В противном случае то вместо этого высвечивается сообщение.

Объект «данных о покупке» (data) выглядит примерно так:

Далее необходимо сделать проверку на соответствие одному или нескольким из следующих условий:

• ключ guides существует в data, имеет минимум четыре элемента или…
• ключ academy существует в data, содержит минимум один элемент или…
• имеется ключ otherProducts и одним из элементов в нем содержит резервный ключ со значением true

Если любое из этих условий выполнено, можно показать пользователю кнопку.

function renderSlack () < // Получаем элемент приложения let app = document.querySelector('#app'); // Делаем все проверки if ((data.guides && data.guides.length >3) || (data.academy && data.academy.length > 0) || data.otherProducts && data.otherProducts.filter(function (product) < return product.slack; >).length > 0) < app.innerHTML = 'Join Slack'; > else < app.innerHTML = '
Sorry, you do not have access to Slack.
'; > >

Такой подход основан на слишком сложной логике. Такой код является рабочим, но он не очень читабельный и его трудно поддерживать. Очень легко ошибиться в одном из условий.

В этом случае return в JavaScript функции поможет упростить этот подход. Он вернет true, если у пользователя есть доступ, и false, если нет. В этом случае происходит отдельно запуск каждого условия для проверки с возвратом true или false.

Да, этот код выглядит длиннее. Но он более читабельный. Его легко изменять и контролировать, какие условия проверяются. А читабельность важнее краткости.

function hasSlack () < // Есть ли у клиента минимум 4 купленных продукта if (data.guides && data.guides.length >3) return true; // Является ли клиент членом онлайн-академии if (data.academy && data.academy.length > 0) return true; // Владеет ли клиент другим продуктом, у которого есть доступ к Slack let productsWithSlack = data.otherProducts ? data.otherProducts.filter(function (product) < return product.slack; >):[]; if (productsWithSlack) return true; // Если ничего из этого не соответствует действительности, то доступа для него нет return false; >

Теперь давайте вернемся к функции renderSlack(). И если условия предоставления доступа к Slack когда-либо изменятся, достаточно просто обновить функцию hasSlack(), не внося изменений в остальной код.

function renderSlack () < let app = document.querySelector('#app'); // Получаем элемент приложение // Делаем все проверки if (hasSlack()) < app.innerHTML = 'Join Slack'; > else < app.innerHTML = '
Sorry, you do not have access to Slack.
'; > >

Заключение

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

Источник