что делает return в javascript
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 ;
Как правильно использовать 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 функции. Это организационный инструмент, который позволяет структурировать код и сделать его более читабельным.
Функции
Зачастую нам надо повторять одно и то же действие во многих частях программы.
Например, необходимо красиво вывести сообщение при приветствии посетителя, при выходе посетителя с сайта, ещё где-нибудь.
Чтобы не повторять один и тот же код во многих местах, придуманы функции. Функции являются основными «строительными блоками» программы.
Объявление функции
Для создания функций мы можем использовать объявление функции.
Пример объявления функции:
Вызов showMessage() выполняет код функции. Здесь мы увидим сообщение дважды.
Этот пример явно демонстрирует одно из главных предназначений функций: избавление от дублирования кода.
Если понадобится поменять сообщение или способ его вывода – достаточно изменить его в одном месте: в функции, которая его выводит.
Локальные переменные
Переменные, объявленные внутри функции, видны только внутри этой функции.
Внешние переменные
У функции есть доступ к внешним переменным, например:
Функция обладает полным доступом к внешним переменным и может изменять их значение.
Внешняя переменная используется, только если внутри функции нет такой локальной.
Переменные, объявленные снаружи всех функций, такие как внешняя переменная userName в вышеприведённом коде – называются глобальными.
Глобальные переменные видимы для любой функции (если только их не перекрывают одноимённые локальные переменные).
Желательно сводить использование глобальных переменных к минимуму. В современном коде обычно мало или совсем нет глобальных переменных. Хотя они иногда полезны для хранения важнейших «общепроектовых» данных.
Параметры
Мы можем передать внутрь функции любую информацию, используя параметры (также называемые аргументами функции).
Параметры по умолчанию
Например, вышеупомянутая функция showMessage(from, text) может быть вызвана с одним аргументом:
Если мы хотим задать параметру text значение по умолчанию, мы должны указать его после = :
Теперь, если параметр text не указан, его значением будет «текст не добавлен»
В данном случае «текст не добавлен» это строка, но на её месте могло бы быть и более сложное выражение, которое бы вычислялось и присваивалось при отсутствии параметра. Например:
В JavaScript параметры по умолчанию вычисляются каждый раз, когда функция вызывается без соответствующего параметра.
Ранние версии JavaScript не поддерживали параметры по умолчанию. Поэтому существуют альтернативные способы, которые могут встречаться в старых скриптах.
Например, явная проверка на undefined :
…Или с помощью оператора || :
Возврат значения
Функция может вернуть результат, который будет передан в вызвавший её код.
Простейшим примером может служить функция сложения двух чисел:
Директива return может находиться в любом месте тела функции. Как только выполнение доходит до этого места, функция останавливается, и значение возвращается в вызвавший её код (присваивается переменной result выше).
Вызовов return может быть несколько, например:
Возможно использовать return и без значения. Это приведёт к немедленному выходу из функции.
Если функция не возвращает значения, это всё равно, как если бы она возвращала undefined :
Пустой return аналогичен return undefined :
Для длинного выражения в return может быть заманчиво разместить его на нескольких отдельных строках, например так:
И тогда всё сработает, как задумано.
Выбор имени функции
Функция – это действие. Поэтому имя функции обычно является глаголом. Оно должно быть простым, точным и описывать действие функции, чтобы программист, который будет читать код, получил верное представление о том, что делает функция.
Как правило, используются глагольные префиксы, обозначающие общий характер действия, после которых следует уточнение. Обычно в командах разработчиков действуют соглашения, касающиеся значений этих префиксов.
Например, функции, начинающиеся с «show» обычно что-то показывают.
Функции, начинающиеся с…
Примеры таких имён:
Благодаря префиксам, при первом взгляде на имя функции становится понятным что делает её код, и какое значение она может возвращать.
Функция должна делать только то, что явно подразумевается её названием. И это должно быть одним действием.
Два независимых действия обычно подразумевают две функции, даже если предполагается, что они будут вызываться вместе (в этом случае мы можем создать третью функцию, которая будет их вызывать).
Несколько примеров, которые нарушают это правило:
В этих примерах использовались общепринятые смыслы префиксов. Конечно, вы в команде можете договориться о других значениях, но обычно они мало отличаются от общепринятых. В любом случае вы и ваша команда должны точно понимать, что значит префикс, что функция с ним может делать, а чего не может.
Имена функций, которые используются очень часто, иногда делают сверхкороткими.
Это исключения. В основном имена функций должны быть в меру краткими и описательными.
Функции == Комментарии
Функции должны быть короткими и делать только что-то одно. Если это что-то большое, имеет смысл разбить функцию на несколько меньших. Иногда следовать этому правилу непросто, но это определённо хорошее правило.
Небольшие функции не только облегчают тестирование и отладку – само существование таких функций выполняет роль хороших комментариев!
Первый вариант использует метку nextPrime :
Второй вариант использует дополнительную функцию isPrime(n) для проверки на простое:
Второй вариант легче для понимания, не правда ли? Вместо куска кода мы видим название действия ( isPrime ). Иногда разработчики называют такой код самодокументируемым.
Таким образом, допустимо создавать функции, даже если мы не планируем повторно использовать их. Такие функции структурируют код и делают его более понятным.
Итого
Объявление функции имеет вид:
Для того, чтобы сделать код более чистым и понятным, рекомендуется использовать локальные переменные и параметры функций, не пользоваться внешними переменными.
Функция, которая получает параметры, работает с ними и затем возвращает результат, гораздо понятнее функции, вызываемой без параметров, но изменяющей внешние переменные, что чревато побочными эффектами.
Функции являются основными строительными блоками скриптов. Мы рассмотрели лишь основы функций в JavaScript, но уже сейчас можем создавать и использовать их. Это только начало пути. Мы будем неоднократно возвращаться к функциям и изучать их всё более и более глубоко.
Задачи
Обязателен ли «else»?
В ином случае она запрашивает подтверждение через confirm и возвращает его результат:
Есть ли хоть одно отличие в поведении этого варианта?
Оба варианта функций работают одинаково, отличий нет.
Перепишите функцию, используя оператор ‘?’ или ‘||’
В ином случае она задаёт вопрос confirm и возвращает его результат.
Сделайте два варианта функции checkAge :
Возвращаемые значения функций
Для нас в этом курсе имеется ещё один важный момент. Посмотрим внимательнее на возвращаемое значение функций. Некоторые функции не возвращают существенное значение после завершения, но некоторые возвращают, и важно понимать что это за значение и как использовать его в своём коде и как сделать так чтобы ваши собственные функции возвращали полезные значения. Мы объясним всё это ниже.
| Необходимые навыки: | |
|---|---|
| Цели: | Понять что такое возвращаемое значение функции и как его использовать. |
Что из себя представляют возвращаемые значения?
Если вы посмотрите на функцию replace() на MDN reference page, вы увидите секцию под названием Return value. Очень важно знать и понимать какие значения возвращаются функциями, так что мы пытаемся включать эту информацию везде, где это возможно.
Некоторые функции не возвращают значения( на наших reference pages, возвращаемое значение обозначено как void или undefined в таких случаях). Например, в функции displayMessage() которую мы сделали в прошлой статье, в результате выполнения функции не возвращается никакого значения. Функция всего лишь отображает что-то где-то на экране.
В основном, возвращаемое значение используется там, где функция является чем-то вроде вспомогательного звена при вычислениях. Вы хотите получить результат, который включает в себя некоторые значения. Эти значения вычисляются функцией, которая возвращает результат так, что он может быть использован в следующих стадиях вычисления.
Использование возвращаемых значений в ваших собственных функциях
Тоже самое может быть написано вот так:
Но первую версию написать быстрее и она более компактна.
Мы возвращаем результат вычисления Math.floor(Math.random()*number) каждый раз когда функция вызывается. Это возвращаемое значение появляется в момент вызова функции и код продолжается. Так, например, если мы выполним следующую строчку:
и 3 вызова random() вернут значения 500, 200 и 35, соответственно, строчка будет выполнена как если бы она была такой:
Активное обучение: наша собственная, возвращающая значение функция
Теперь напишем нашу собственную возвращающую значение функцию.
Функции в JavaScript. Классический способ создания
Статья, в которой рассмотрим, что такое функция и зачем она нужна. Разберём классический способ её объявления, параметры, аргументы и оператор return.
Что такое функция?
Функция – это именованный фрагмент кода, к которому можно обратиться в нужных местах программы по имени.
Довольно часто случается, что какие-то строчки кода повторяются. Чтобы уйти от этого можно написать функцию, а затем просто вызывать её в разных местах. Это один из классических сценариев использования функций, который позволяет упростить написание программ на JavaScript.
Кроме этого, функции позволяют очень хорошо структурировать код.
Например, если перед вами стоит какая-то задача, то чтобы проще её решить, можно разбить её на подзадачи, которые решают какие-то определённые функции. А затем уже используя их написать финальный код, который в данном случае сделать будет очень просто. Вдобавок к этому в такой код будет более просто вносить различные изменения и добавлять новые возможности.
JavaScript позволяет создавать функцию различными способами:
Объявление и вызов функции
Операции с функцией в JavaScript можно разделить на 2 этапа:
При составлении имени функции необходимо руководствоваться такими же правилами, что для переменной. Т.е. можно использовать буквы, цифры (0 – 9), знаки «$» и «_». В качестве букв рекомендуется использовать английский алфавит (a-z, A-Z). Имя функции, также как и имя переменной не может начинаться с цифры.
Параметры предназначены для получения значений, переданных в функцию, по имени. Их именование осуществляется также как переменных. Разделение параметров друг от друга осуществляется с помощью запятой.
Пример функции с двумя параметрами:
Если параметры не нужны, то круглые скобки в любом случае указываются.
Тело функции – это код, заключенный в фигурные скобки, который необходимо выполнить при её вызове.
2. Вызов функции. Объявленная функция сама по себе не выполняется. Для того чтобы функцию запустить, её необходимо вызвать. Вызов функции осуществляется посредством указания её имени и двух круглых скобок. Внутрь скобок при необходимости можно передать значения (аргументы) разделяя их между собой с помощью запятой.
Параметры и аргументы
Параметры – это переменные, которые описываются в круглых скобках на этапе объявления функции. Параметры доступны только внутри функции, получить доступ к ним снаружи нельзя.
Аргументы – это значения, которые передаём функции в момент её вызова.
Но если значение является ссылкой, то его изменения будет видно за пределами функции:
Переменные, объявленные внутри функции, называются локальными. Они не доступны вне функции.
При этом если переменная расположена вне всех функций, она называется глобальной.
arguments
Параметры – это не единственный способ, с помощью которого в JavaScript можно получить аргументы функции.
Доступ к аргументам через arguments выполняется точно также как к элементам обычного массива, т.е. по порядковому номеру.
Получение аргументов через arguments в основном используется, когда мы заранее не знаем их точное количество.
Например, создадим функцию, которые будет подсчитывать сумму всех аргументов, являющихся числами:
Через цикл for. of этот пример можно записать так:
При необходимости arguments можно преобразовать в обычный массив.
В JavaScript arguments можно использовать для написания очень гибких функций, которые в зависимости от количества аргументов, и, их типа, могут выполнять различные действия.
Все переменные, созданные внутри функции и её параметры являются локальными переменными этой функции. Они доступны только внутри этой функции, а также в других функциях, вложенных в неё, если там нет переменных с такими же именами. Вне функции её локальные переменные не доступны.
При этом внешняя переменная или функция будет доступна внутри неё.
Передачи одной функции в другую. Колбэки
Узнать является ли некоторый идентификатор функцией можно с помощью typeof :
Например, проверим является ли колбэк функцией перед тем как его вызвать:
Возвращаемое значение (return)
Без использования return :
С использованием return :
Инструкции, расположенные после return никогда не выполняются:
Функция, которая возвращает функцию
В качестве результата функции мы можем также возвращать функцию.
При создании таких конструкций нет ограничений по уровню вложенности, но с точки зрения разумности этим лучше не злоупотреблять.
Функцию, приведённую в коде мы можем также создать и так:
Кроме этого в качестве результата мы можем также возвратить внешнюю функцию:
Рекурсия
Функцию можно также вызвать внутри самой себя. Это действие в программировании называется рекурсией.
Кроме этого необходимо предусмотреть условия для выхода из рекурсии. Если это не сделать функция будет вызывать сама себя до тех пор, пока не будет брошена ошибка, связанная с переполнением стека.
Например, использование рекурсии для вычисления факториала числа:
Пример, в котором используя рекурсию выведем числа от указанного до 10:
Перегрузка функций в JavaScript
Перегрузка функций в программировании – это возможность объявлять в одном месте несколько функций с одинаковыми именами. Отличаются такие функции друг от друга параметрами. Используется перегрузка функций для того, чтобы можно было вызвать подходящую под переданные аргументы функцию.
В JavaScript не реализована перегрузка функций в том виде, как это реализовано в Си или других языках. Но подобную функциональность можно имитировать в JavaScript. Для этого у нас есть всё, что для этого необходимо.
Пример реализации «перегруженной» функции для вычисления оптимального количества ккал, которых необходимо человеку в день:
Новые возможности, которые появились в ES6+ для функций
Значение параметра по умолчанию
В языке, начиная с версии ECMAScript 6+ (2015+) параметру функции можно задать значение по умолчанию.
Например, установим параметру color значение по умолчанию ‘#009688’ :
До появление такой возможности в языке, задание параметру значения по умолчанию выполнялось так:
Оставшиеся параметры (rest parameters)
Что такое встроенные (стандартные) функции
В JavaScript имеется огромный набор встроенных (стандартных) функций. Данные функции уже описаны в самом движке браузера. Практически все они являются методами того или иного объекта.
Например, для того чтобы вызвать встроенную функцию (метод) alert, её не надо предварительно объявлять. Она уже описана в браузере. Вызов метода alert осуществляется посредством указания имени, круглых скобок и аргумента внутри них. Данный метод предназначен для вывода сообщения на экран в форме диалогового окна. Текстовое сообщение берётся из значения параметра данной функции.
Такой же результат будет получен, если для оператора return не указать возвращаемое значение.