Для чего нужен return в javascript
Зачем нужен return вообще кроме окончания функцыи?
Простой 6 комментариев
функция всегда что-то возвращает. чтобы указать, что именно функция должна возвратить, используется ключевое слово return. это и есть его суть. даже если его(return) нет в теле функции, функция все равно вернет undefined по умолчанию.
эта функция вернет undefined, т.к. ключевого слова return нет.
эта функция вернет строку ‘i love js’, т.к. вы явно на это указали с помощью ключевого слова return.
вернет сумму двух чисел
вернет сумму двух чисел
следующие две функции возвращают undefined. первая явно, вторая неявно
вернет другую функцию
как только в функции встречается это ключевое слово, интерпретатор немедленно останваливает выполненние функции(выходит из нее) и возвращает то что написано после этого ключевого слова. именно поэтому этот цикл выполнит всего лишь одну итерацаю, а не 100, как и должно, и вернет 1.
Инструкция return в JavaScript
Пусть у нас есть функция, которая выводит на экран квадрат переданного числа:
Пусть мы хотим не выводить значение на экран, а записать в какую-нибудь переменную, вот так:
Итак, давайте перепишем нашу функцию так, чтобы она не выводила результат на экран, а возвращала его в переменную:
После того, как данные записаны в переменную, их можно, например, вывести на экран:
А можно сначала как-то изменить эти данные, а затем вывести их на экран:
Можно сразу выполнять какие-то действия с результатом работы функции перед записью в переменную:
А можно не записывать результат в переменную, а сразу вывести его на экран:
Использование функций в выражении
Функции в функциях
Функции, конечно же, не обязательно должны быть одинаковыми. Пусть, например, у нас есть функция, возвращающая квадрат числа, и функция, возвращающая куб числа:
Давайте с помощью этих функций возведем число 2 в квадрат, а затем результат этой операции возведем в куб:
Пусть теперь у нас есть функция, возвращающая квадрат числа, и функция, находящая сумму двух чисел:
Найдем с помощью этих функций сумму квадрата числа 2 и сумму квадрата числа 3 :
Пусть у вас есть функция, возвращающая квадратный корень из числа, и функция, округляющая дробь до трех знаков в дробной части:
С помощью этих функций найдите квадратный корень из числа 2 и округлите его до трех знаков в дробной части.
Пусть у вас есть функция, возвращающая квадратный корень из числа, и функция, возвращающая сумму трех чисел:
Пусть у вас есть функция, округляющая дробь до трех знаков в дробной части:
Тонкое место return
Что выведется на экран в результате выполнения следующего кода:
Что выведет каждый из алертов в результате выполнения следующего кода:
Что выведет каждый из алертов в результате выполнения следующего кода:
Цикл и return
Пусть у нас есть функция, возвращающая сумму чисел от 1 до 5 :
Пусть теперь мы расположим return внутри цикла, вот так:
Что выведется на экран в результате выполнения следующего кода:
Объясните почему. Что хотел сделать автор данного кода? Исправьте ошибку автора.
Применение return в цикле
То, что return расположен внутри цикла, не всегда может быть ошибкой. В следующем примере сделана функция, которая определяет, сколько первых элементов массива нужно сложить, чтобы сумма стала больше или равна 10 :
Приемы работы с return
Давайте перепишем этот код в более сокращенной форме, избавившись от ненужной здесь переменной result :
Дана следующая функция:
Перепишите ее в сокращенной форме согласно изученной теории.
JavaScript | Оператор return
Зачем нужен оператор return в JavaScript?
Оператор return остановит работу Функции или Цикла и вернёт значение, которое находится справа от него. Значение может быть вычисляемым (одна переменная), а может быть выражением (несколько переменных, между которыми есть другие операторы — сложение, умножение, возведение в степень и т.п..). Оператор return является одним из разновидностей операторов внезапного завершения. Слово «return» является зарезервированным словом в языке JavaScript и его нельзя использовать при именовании переменных и функций.
Видео на тему «Функция возвращает»
Простой пример для функции. Представьте, что вы хотите получить сумму двух чисел. Вы ПЕРЕДАЁТЕ в функцию два ПАРАМЕТРА. Внутри тела функции происходит сложение.
Если вы просто запишете функцию в таком виде, то ничего дельного не произойдёт:
JavaScript конечно же выполнит сложение в функции, но НЕ ВЕРНЁТ результат вам обратно для ваших последующих вычислений. Вы же хотите получить число после работы функции, верно?
Сложили два числа в функции, но не вернули результат сложения — JavaScript
Это очень похоже на диалог с другим человеком, когда вы разговариваете — вы ртом транслируете свои мысли собеседнику, но иногда в своей голове вы прокручиваете более сложные рассуждения, не открывая рта при этом. Ваше долгое молчание может вызвать у собеседника смущение. Он вас спросит: «Ты чего молчишь? Что ты думаешь по этому поводу?». Вам нужно будет ОТКРЫТЬ РОТ и СКАЗАТЬ то, что вы думаете. Иначе вас никто другой не поймёт. В JavaScript всё тоже самое.
Нашу функцию нужно будет переписать так:
В этот раз мы получим ВОЗВРАЩЁННОЕ значение из тела функции.
Функция сложила два числа и вернула итоговое значение — JavaScript
Стрелочная функция и оператор return
Предлагаю сравнить две функции (классическую и стрелочную):
Хочу обратить внимание на «лаконичное тело» стрелочной функции. Оно заключено в круглые скобки (не фигурные). Также помните, что все стрелочные функции анонимные, поэтому у неё нет имени.
Классическая функция с оператором return — стрелочная без — JavaScript
Условия в функции и несколько операторов return
Давайте представим, что мы передаём в функцию значение температуры за окном, а функция ВОЗВРАЩАЕТ нам строку с предложением под определённую температуру.
Результат работы функции:
Несколько операторов return в одной функции — JavaScript
Синтаксис оператора return
return ;
Оператор return заставляет функцию прекращать выполнение и, в большинстве случаев, возвращает значение вызывающей стороне. Если выражение не указано, возвращаемое значение является undefined (не определено). В противном случае возвращаемое значение является значением Expression. Оператор return может не возвращать значение вызывающей стороне в зависимости от окружающего контекста. Например, в блоке try запись завершения оператора return может быть заменена другой записью завершения во время оценки блока finally.
Семантика времени выполнения: оценка
ReturnStatement : return ;
Возвращаемые значения функций
Для нас в этом курсе имеется ещё один важный момент. Посмотрим внимательнее на возвращаемое значение функций. Некоторые функции не возвращают существенное значение после завершения, но некоторые возвращают, и важно понимать что это за значение и как использовать его в своём коде и как сделать так чтобы ваши собственные функции возвращали полезные значения. Мы объясним всё это ниже.
| Необходимые навыки: | |
|---|---|
| Цели: | Понять что такое возвращаемое значение функции и как его использовать. |
Что из себя представляют возвращаемые значения?
Если вы посмотрите на функцию replace() на MDN reference page, вы увидите секцию под названием Return value. Очень важно знать и понимать какие значения возвращаются функциями, так что мы пытаемся включать эту информацию везде, где это возможно.
Некоторые функции не возвращают значения( на наших reference pages, возвращаемое значение обозначено как void или undefined в таких случаях). Например, в функции displayMessage() которую мы сделали в прошлой статье, в результате выполнения функции не возвращается никакого значения. Функция всего лишь отображает что-то где-то на экране.
В основном, возвращаемое значение используется там, где функция является чем-то вроде вспомогательного звена при вычислениях. Вы хотите получить результат, который включает в себя некоторые значения. Эти значения вычисляются функцией, которая возвращает результат так, что он может быть использован в следующих стадиях вычисления.
Использование возвращаемых значений в ваших собственных функциях
Тоже самое может быть написано вот так:
Но первую версию написать быстрее и она более компактна.
Мы возвращаем результат вычисления Math.floor(Math.random()*number) каждый раз когда функция вызывается. Это возвращаемое значение появляется в момент вызова функции и код продолжается. Так, например, если мы выполним следующую строчку:
и 3 вызова random() вернут значения 500, 200 и 35, соответственно, строчка будет выполнена как если бы она была такой:
Активное обучение: наша собственная, возвращающая значение функция
Теперь напишем нашу собственную возвращающую значение функцию.
Как правильно использовать return в JavaScript функции
Для чего необходим оператор return в JavaScript функции? Как его использовать внутри функции и что можно делать с возвращаемыми значениями? Сегодня мы поговорим об этом.
Для чего необходим return в JavaScript функции
Это позволяет сделает код более модульным. Есть много разных подходов к написанию кода. Но чаще всего return в JavaScript функции нужен для организации модульного подхода.
Бывают случаи, когда нет возможности применить тернарный оператор или существует необходимость использовать один и тот же фрагмент кода в нескольких местах в рамках одного проекта. В этом случае лучше обернуть его в отдельную функцию. Если речь идет о создании длиной HTML-строки, то наилучший вариант — сохранить ее в отдельной функции для удобства чтения.
Давайте рассмотрим на несколько примеров.
Возврат строки, числа или другого типа данных
Представим, что мы используем какое-то имя (name), введенное пользователем, для создания некоторой HTML-разметки в пользовательском интерфейсе.
В этом примере можно было бы поступить следующим образом. Сначала создать собственную функцию и вписать внутрь эти строки. После этого можно использовать return, который вернет элемент p в переменной. Это позволит использовать ее в коде в дальнейшем.
Конечно, это достаточно простой и даже глупый пример, потому что return в JavaScript функции возвращает всего лишь один абзац. Но по мере увеличения объема кода растет и полезность этого подхода.
Возврат логического типа данных с помощью return в JavaScript функции
Return может быть очень полезным, когда требуется выполнить более сложные проверки, выходящие за рамки простого if … else.
Например, в веб-приложении, которое показывает приобретенные пользователями электронные книги и курсы. Нужно проверить, приобрели ли они продукт, у которого есть доступ к приватной рабочей области Slack. Если да, то пользователь видит кнопку для получения ссылки для приглашения. В противном случае то вместо этого высвечивается сообщение.
Объект «данных о покупке» (data) выглядит примерно так:
Далее необходимо сделать проверку на соответствие одному или нескольким из следующих условий:
Если любое из этих условий выполнено, можно показать пользователю кнопку.
Такой подход основан на слишком сложной логике. Такой код является рабочим, но он не очень читабельный и его трудно поддерживать. Очень легко ошибиться в одном из условий.
В этом случае return в JavaScript функции поможет упростить этот подход. Он вернет true, если у пользователя есть доступ, и false, если нет. В этом случае происходит отдельно запуск каждого условия для проверки с возвратом true или false.
Да, этот код выглядит длиннее. Но он более читабельный. Его легко изменять и контролировать, какие условия проверяются. А читабельность важнее краткости.
Теперь давайте вернемся к функции renderSlack(). И если условия предоставления доступа к Slack когда-либо изменятся, достаточно просто обновить функцию hasSlack(), не внося изменений в остальной код.
Заключение
Надеюсь, это поможет вам понять, как можно использовать return в JavaScript функции. Это организационный инструмент, который позволяет структурировать код и сделать его более читабельным.