Как использовать return javascript

Возвращаемые значения функций

Для нас в этом курсе имеется ещё один важный момент. Посмотрим внимательнее на возвращаемое значение функций. Некоторые функции не возвращают существенное значение после завершения, но некоторые возвращают, и важно понимать что это за значение и как использовать его в своём коде и как сделать так чтобы ваши собственные функции возвращали полезные значения. Мы объясним всё это ниже.

Необходимые навыки:	Базовая компьютерная грамотность, знание основ HTML и CSS, JavaScript first steps, Functions — reusable blocks of code.
Цели:	Понять что такое возвращаемое значение функции и как его использовать.

Что из себя представляют возвращаемые значения?

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

var myText = 'I am a string'; var newString = myText.replace('string', 'sausage'); console.log(newString); // функция replace() принимает строку, // заменяет одну подстроку другой и возвращает // новую строку со сделанными заменами 

Мы уже видели этот блок кода в нашей первой статье про функции. Мы вызываем функцию replace() на строке myText и передаём ей 2 параметра — заменяемую подстроку и подстроку, которой будем заменять. Когда функция завершит выполнение, она вернёт значение, которым является новая строка со сделанными в ней заменами. В коде выше мы сохраняем это возвращаемое значение как значение переменной newString .

Если вы посмотрите на функцию replace() на MDN reference page, вы увидите секцию под названием Return value. Очень важно знать и понимать какие значения возвращаются функциями, так что мы пытаемся включать эту информацию везде, где это возможно.

Некоторые функции не возвращают значения( на наших reference pages, возвращаемое значение обозначено как void или undefined в таких случаях). Например, в функции displayMessage() которую мы сделали в прошлой статье, в результате выполнения функции не возвращается никакого значения. Функция всего лишь отображает что-то где-то на экране.

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

Использование возвращаемых значений в ваших собственных функциях

Чтобы вернуть значение своей функции, вы должны использовать ключевое слово return. Мы видели это в действии недавно — в нашем примере random-canvas-circles.html. Наша функция draw() отрисовывает где-то на экране 100 случайных кружков.

function draw()  ctx.clearRect(0,0,WIDTH,HEIGHT); for (var i = 0; i  100; i++)  ctx.beginPath(); ctx.fillStyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); ctx.fill(); > > 

Внутри каждой итерации есть 3 вызова функции random() . Это сделано чтобы сгенерировать случайное значение для текущей координаты x, y и для радиуса. Функция random() принимает 1 параметр (целое число) и возвращает случайное число в диапазоне от 0 до этого числа. Выглядит это вот так:

function random(number)  return Math.floor(Math.random()*number); > 

Тоже самое может быть написано вот так:

function random(number)  var result = Math.floor(Math.random()*number); return result; > 

Но первую версию написать быстрее и она более компактна.

Мы возвращаем результат вычисления Math.floor(Math.random()*number) каждый раз когда функция вызывается. Это возвращаемое значение появляется в момент вызова функции и код продолжается. Так, например, если мы выполним следующую строчку:

.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); 

и 3 вызова random() вернут значения 500, 200 и 35, соответственно, строчка будет выполнена как если бы она была такой:

.arc(500, 200, 35, 0, 2 * Math.PI); 

Сначала выполняются вызовы функции random() , на место которых подставляются возвращаемые ей значения, а затем выполнятся сама строка.

Активное обучение: наша собственная, возвращающая значение функция

Теперь напишем нашу собственную возвращающую значение функцию.

function squared(num)  return num * num; > function cubed(num)  return num * num * num; > function factorial(num)  var x = num; while (x > 1)  num *= x-1; x--; > return num; > 

.onchange = function()  var num = input.value; if (isNaN(num))  para.textContent = 'You need to enter a number!'; > else  para.textContent = num + ' squared is ' + squared(num) + '. ' + num + ' cubed is ' + cubed(num) + '. ' + num + ' factorial is ' + factorial(num) + '.'; > > 

Примечание: Если у вас проблемы с работой данного примера, не стесняйтесь сверить ваш код с работающей версией finished version on GitHub (или смотрите живой пример), или спросите нас.

К этому моменту мы хотели бы чтобы вы написали парочку собственных функций и добавили их в библиотеку. Как на счёт квадратного или кубического корня числа или длины окружности круга с длиной радиуса равной числу num ?

Это упражнение привнесло парочку важных понятий в изучении того, как использовать ключевое слово return . В дополнение:

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

Заключение

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

Если в статье есть что-то что вы не поняли, не стесняйтесь перечитать статью ещё раз или свяжитесь с нами для получения помощи.

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

• Функции более подробно — подробное руководство, охватывающее более продвинутую информацию, связанную с функциями.
• Колбэк-функции в JavaScript — распространённый паттерн JavaScript для передачи функции в другую функцию как аргумент, который затем вызывается внутри первой функции.

• Назад
• Обзор: Building blocks
• Далее

In this module

Found a content problem with this page?

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

Your blueprint for a better internet.

Источник

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.

Источник