Javascript как вернуть значение из функции

return

Функция возвращает результат, который будет передан в вызвавший её код. Для этого и используется ключевое слово return .

Пример

Скопировать ссылку «Пример» Скопировано

Примеры использования return. Функция проверки возраста на совершеннолетие и функция создания строки заданной длины со случайным содержимым — просто введите произвольные числа 😎

Как пишется

Скопировать ссылку «Как пишется» Скопировано

return используется только в функциях. Этот код приведёт к ошибке, так как не является функцией:

 const result = 42if (result > 10)  return true>return false const result = 42 if (result > 10)  return true > return false    Скопировать Скопировано Не удалось скопировать   

 function isAdult(age)  return age > 18> function isAdult(age)  return age > 18 >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Определённый код «сгруппирован» и объединён в функцию, например проверка — чётное число или нет:

 function isEven(value)  if (undefined === value || null === value)  return false > return value % 2 == 0> function isEven(value)  if (undefined === value || null === value)  return false > return value % 2 == 0 >    Скопировать Скопировано Не удалось скопировать   

Пример

Скопировать ссылку «Пример» Скопировано

Для возврата значения используется инструкция return

Она может находиться в любом месте функции. Как только до неё доходит управление — функция завершается и значение передаётся обратно.

Писать return в функции необязательно. Рассмотрим пример:

 function notify(msg, type)  if (type === 'error')  alert('ОШИБКА:' + msg) > alert(msg)> function notify(msg, type)  if (type === 'error')  alert('ОШИБКА:' + msg) > alert(msg) >    Скопировать Скопировано Не удалось скопировать   

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

Несмотря на отсутствие return , такая функция будет возвращать undefined , будто бы в ней последней строчкой написано return undefined

Ниже пример, который показывает что это действительно так:

 function notify(msg, type)  if (type === 'error')  alert('ОШИБКА:' + msg) > alert(msg)>function notifyFull(msg, type)  if (type === 'error')  alert('ОШИБКА:' + msg) > alert(msg) return undefined>const a = notify('Сообщение')const b = notifyFull('Сообщение')console.log(a === b)// true function notify(msg, type)  if (type === 'error')  alert('ОШИБКА:' + msg) > alert(msg) > function notifyFull(msg, type)  if (type === 'error')  alert('ОШИБКА:' + msg) > alert(msg) return undefined > const a = notify('Сообщение') const b = notifyFull('Сообщение') console.log(a === b) // true    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Дока Дог советует

Скопировать ссылку «Дока Дог советует» Скопировано

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

 function checkScore(score)  return score > 100>const s1 = 10const s2 = 15const s3 = 20if (checkScore(s1)) alert('игрок 1 проходит')if (checkScore(s2)) alert('игрок 2 проходит')if (checkScore(s3)) alert('игрок 3 проходит') function checkScore(score)  return score > 100 > const s1 = 10 const s2 = 15 const s3 = 20 if (checkScore(s1)) alert('игрок 1 проходит') if (checkScore(s2)) alert('игрок 2 проходит') if (checkScore(s3)) alert('игрок 3 проходит')    Скопировать Скопировано Не удалось скопировать   

 const s1 = 10const s2 = 15const s3 = 20if (s1 > 100) alert('игрок 1 проходит')if (s2 > 100) alert('игрок 2 проходит')if (s3 > 100) alert('игрок 3 проходит') const s1 = 10 const s2 = 15 const s3 = 20 if (s1 > 100) alert('игрок 1 проходит') if (s2 > 100) alert('игрок 2 проходит') if (s3 > 100) alert('игрок 3 проходит')    Скопировать Скопировано Не удалось скопировать   

Почему эффективнее?

• если условие проверки очков изменится — его придётся писать в нескольких местах.
• если условие будет состоять более чем из одной проверки, то if усложнится и его будет сложнее понимать. Функцию, дающую ответ true или false легче читать в условном операторе.

Необходимо помнить, если выполнение функции завершилось не через return , то возвращаемое значение будет undefined ;

Самый простой способ этого избежать — всегда добавлять return с каким-либо значением перед концом функции.

• Ещё return останавливает выполнение функции. Обычно это ожидаемое поведение, но если про это забыть — возможны баги.

Источник

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

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

Необходимые навыки:	Базовая компьютерная грамотность, знание основ 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.

Источник