Как вернуть несколько значений из функции javascript

Функция может возвращать результат. Для этого используется оператор return , после которого указывается возвращаемое значение:

function sum (a, b)

В данном случае функция sum() принимает два параметра и возвращает их сумму. После оператора return идет возвращаемое значение. В данном случае это значение константы result , в реальности это может быть любое выражение, в том числе и результат другой функции.

После получения результата функции мы можем присвоить его какой-либо другой переменной или константе:

function sum (a, b) < return a + b; >let num1 = sum(2, 4); console.log(num1); // 6 const num2 = sum(6, 34); console.log(num2); // 40

Функция может возвратить только одно значение. Если же нам надо возвратить несколько значений, то мы можем возвратить их в виде массива:

function rectangle(width, height) < const perimeter = width *2 + height * 2; const area = width * height; return [perimeter, area]; >const rectangleData = rectangle(20, 30); console.log(rectangleData[0]); // 100 - периметр прямоугольника console.log(rectangleData[1]); // 600 - площадь прямоугольника

В данном случае в функцию rectangle передаются ширина и высота прямоугольника, а внутри функции по этим данным вычисяем периметр и площадь прямоугольника и в виде массива возвращаем из функции.

В качестве альтернативы можно поместить многочисленные возвращаемые данные в один объект:

function rectangle(width, height)< const rectPerimeter = width *2 + height * 2; const rectArea = width * height; return ; > const rectangleData = rectangle(20, 30); console.log("Perimeter:", rectangleData.perimeter); // 100 - периметр прямоугольника console.log("Area:", rectangleData.area); // 600 - площадь прямоугольника

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

Одна функция может возвращать другую функцию:

function menu(n) < if(n==1) return function(x, y)< return x + y;>else if(n==2) return function(x, y) < return x - y;>else if(n==3) return function(x, y) < return x * y;>return function() < return 0;>> const action = menu(1); // выбираем первый пункт - сложение const result = action(2, 5); // выполняем функцию и получаем результат в константу result console.log(result); // 7

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

Далее мы вызываем функцию menu и получаем результат этой функции — другую функцию в константу action.

const action = menu(1);

То есть здесь action будет представлять функцию, которая принимает два параметра и возвращает число. Затем через имя константы мы можем вызвать эту функцию и получить ее результат в константу result:

const result = action(2, 5);

Подобным образом мы можем получить и другую возвращаемые функции:

function menu(n) < if(n==1) return function(x, y)< return x + y;>else if(n==2) return function(x, y) < return x - y;>else if(n==3) return function(x, y) < return x * y;>return function()< return 0;>; > let action = menu(1); console.log(action(2, 5)); // 7 action = menu(2); console.log(action(2, 5)); // -3 action = menu(3); console.log(action(2, 5)); // 10 action = menu(190); console.log(action(2, 5)); // 0

Аналогичным образом можно возвращать функции по имени:

function sum(x, y) < return x + y;>function subtract(x, y) < return x - y;>function multiply(x, y) < return x * y;>function zero() < return 0;>function menu(n) < switch(n)< case 1: return sum; case 2: return subtract; case 3: return multiply; default: return zero; >> let action = menu(1); console.log(action(5, 4)); // 9 action = menu(2); console.log(action(5, 4)); // 1 action = menu(3); console.log(action(5, 4)); // 20 action = menu(190); console.log(action(5, 4)); // 0

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

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

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

Making decisions in your code — conditionals
Looping code
Functions — reusable blocks of code
Build your own function
Function return values
Introduction to events
Image gallery

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Можно ли в return вернуть два значения?

Так нет, у тебя вернется только a. Можешь создать объект или массив и возвращать его.

Ответ написан более трёх лет назад

Комментировать

Нравится 3 Комментировать

dimsog

Переносил код с PHP 4 на 7.4.

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

function ab() < let a = 0; let b = 1 return [a, b];

Можно возвращать и объект:

function ab() < let a = 0; let b = 1 return < a, b >;

Ответ написан более трёх лет назад

Как вернуть значение из события или из функции обратного вызова? Или хотя бы дождаться их окончания

Проблема в том, что в коде нет операции ожидания. Ни подписка на событие, ни AJAX-вызов, ни даже вызов API не ждут поступления данных - а сразу же передают управление дальше. Поэтому строка someDiv.textContent = result; выполняется ДО того, как переменная result получит значение!

Способов сделать это присваивание после получения значения - несколько.

Способ 0 - переместить присваивание внутрь

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

someInput.onchange = function() < someDiv.textContent = someInput.value; >; $.get("someapi", function (data) < someDiv.textContent = data.foo; >); some.api.call(42, function (data) < someDiv.textContent = data.bar; >); someDiv.textContent = "";

В данном случае я вообще избавился от переменной result .

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

Способ 0+ - вынесение присваивания в именованную функцию.

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

someInput.onchange = function() < setResult(someInput.value); >; $.get("someapi", function (data) < setResult(data.foo); >); some.api.call(42, function (data) < setResult(data.bar); >); setResult(""); function setResult(result)

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

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

Проблема макаронного кода

Иногда, асинхронный запрос делается в одном модуле или его части, а получить его результат надо в другой. Прямое использование способа 0+ приводит к коду, который называют "макаронным":

// модуль 1 function getResult() < $.get("someapi", function (data) < setResult(data.foo); >); > // модуль 2 function someFunc() < getResult(); >function setResult(result)

Обращаю внимание: someFunc вызывает getResult , которая вызывает setResult . В итоге два модуля вызывают друг друга. Это и есть макаронный код.

Для борьбы с таким кодом и предназначены способы ниже.

Способ 1 - обратные вызовы ("колбеки", callbacks)

Добавим той функции, которая делает запрос, параметр callback , куда будем передавать функцию, получающую ответ:

function getResult(callback) < $.get("someapi", function (data) < callback(data.foo); >); >

Теперь такую функцию можно вызвать вот так:

getResult(function(result) < someDiv.textContent = result; >)

getResult(setResult); function setResult(result)

Способ 2 - обещания ("промизы", promises)

Обещание в js - это шаблон программирования, обозначающий значение, которого сейчас нет, но предполагается, что оно будет в будущем.

Имеется несколько реализаций обещаний. Основной сейчас являются ES6 Promises, они поддерживаются современными браузерами кроме IE. (Но для тех браузеров, которые их не поддерживают, есть куча полифилов).

Создаются обещания вот так:

function getResult(N) < return new Promise(function (resolve, reject) < some.api.call(N, function (data) < resolve(data.bar); >); >); >

Также в качестве обещания можно использовать JQuery Deferred:

function getResult(N) < var d = $.Deferred(); some.api.call(N, function (data) < d.resolve(data.bar); >); return d.promise(); >

function getResult(N) < var d = $q.defer(); some.api.call(N, function (data) < d.resolve(data.bar); >); return d.promise; >

Кстати, Angular $q можно использовать и подобно es6 promise:

function getResult(N) < return $q(function (resolve, reject) < some.api.call(N, function (data) < resolve(data.bar); >); >); >

В любом случае, использование такой функции getResult будет выглядеть одинаково:

getResult(42).then(function (result) < someDiv.textContent = result; >);

Или же можно использовать новый синтаксис async/await, описанный в ответе ниже от Grundy

Обращаю внимание, что здесь я для примера взял именно some.api.call , но не событие или ajax-вызов - и это не случайно!

Дело в том, что обещание может быть выполнено ( resolved ) только 1 раз, а большинство событий происходят несколько раз. Поэтому использовать обещания для того же onchanged - нельзя.

Что же до ajax-вызова - то надо помнить, что он УЖЕ возвращает обещание! А потому все способы выше в комбинации с ним будут выглядеть смешными. Все делается гораздо проще:

function getResult() < return $.get("someapi") .then(function (data) < return data.foo; >); >

Кстати, здесь тоже можно было использовать async/await

На случай если вы запутались в коде выше, вот его "развернутая" версия:

function getResult() < var q1 = $.get("someapi"); var q2 = q1.then(function (data) < return data.foo; >); return q2; >

Тут все просто. Сам по себе вызов $.get возвращает обещание, которое при выполнении будет содержать прищедшие с сервера данные.

Далее мы создаем для него продолжение, которое обработает эти данные (достанет поле foo ).

Ну и потом это продолжение (которое тоже является обещанием) мы и возвращаем.

Способ 3 - наблюдаемые значения (observables) в Knockout

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

Можно сделать так. Для начала, заведем наблюдаемое значение:

var result = ko.observable("");

Это значение можно менять по событию:

someInput.onchange = function() < // вызов result с параметром устанавливает значение равным параметру result(someInput.value); >;

И теперь можно выполнять некоторый блок кода каждый раз когда это значение меняется:

ko.computed(function() < // вызов result без параметров возвращает текущее значение someDiv.textContent = result(); >);

Функция, переданная в ko.computed , будет вызвана каждый раз, когда ее зависимости изменятся.

PS код выше приведен как пример ручной работы с наблюдаемыми значениями. Но имейте в виду, что в Knockout есть более простые способы для работы с содержимым элементов DOM:

var vm = < result: ko.observable() >; ko.applyBindings(vm);

Способ 3.1 - наблюдаемые значения (observables) в MobX

Тут все почти так же, как и в knockout. В примере ниже я использую синтаксис ES2016 и старше, потому что библиотека подразумевает использование новых средств языка:

import < observable, autorun >from 'mobx'; var result = observable(""); someInput.onchange = () => < result.set(someInput.value); >; autorun(() => someDiv.textContent = result.get());

Однако, обычно в MobX используются классы, а не одиночные obervable:

class ViewModel < @observable result = ""; >var vm = new ViewModel(); someInput.onchange = () => < vm.result = someInput.value; >; autorun(() => someDiv.textContent = vm.result);

Отслеживать
ответ дан 11 авг 2016 в 8:49
Pavel Mayorov Pavel Mayorov
58.3k 7 7 золотых знаков 72 72 серебряных знака 146 146 бронзовых знаков
rxjs можно для полноты ещё..
11 авг 2016 в 9:04
async/await.
11 авг 2016 в 9:05
fibers/green threads..
11 авг 2016 в 9:05
@VladimirGamalian разве async/await уже поддерживается?
11 авг 2016 в 9:06

@VladimirGamalian, async/await пока даже в стандарте нет последнем, только await как зарезервированное на будущее ключевое слово

11 авг 2016 в 9:11

Дождались! ES2017 8-ая редакция.

Внесено описание для функций с модификатором async , и использование await

Пример уже работает в хроме:

(async function() < var data = await fetch('https://jsonplaceholder.typicode.com/users'); console.log(await data.json()); >)();

ES2015

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

function* foo()

Данная функция возвращает итератор для последовательности 1,2,3,3,3. , который может быть проитерирован. Хотя это интересно и само по себе, но есть один специфический случай.

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

Это несколько сложнее, но очень мощный трюк позволяет нам писать асинхронный код в синхронном режиме. Есть несколько "запускальщиков", которые делают это. Для примера будет использован Promise.coroutine из Bluebird, но есть и другие упаковщики, как со или Q.async .

var foo = coroutine(function*()< var data = yield fetch("/echo/json"); // обратите внимание на yield // код здесь будет выполнен после получения ответа на запрос return data.json(); // data здесь определена >);

Этот метод тоже возвращает обещание, которое может быть использовано в других сопрограммах. Например:

var main = coroutine(function*()< var bar = yield foo(); // ожидаем окончания нашей сопрограммы она вернет обещание // код ниже выполнится когда будет получен ответ от сервера var baz = yield fetch("/api/users/"+bar.userid); // зависит от результата возвращенного функцией foo console.log(baz); // выполнится когда завершатся оба запроса >); main();

ES2016 (ES7) Недалекое будущее

В стандартах есть намеки на введение новых ключевых слов async , await позволивших бы сделать работу с обещаниями более простой.

async function foo() < var data = await fetch("/echo/json"); // обратите внимание на await // код тут выполнится только после выполнения запроса return data.json(); // data определена >

Но пока это просто зарезервированные слова и неизвестно попадут ли они в следующий стандарт и когда будут реализации.

На данный момент для их использования можно воспользоваться сборщиками, например Babel.

Отслеживать
ответ дан 11 авг 2016 в 10:19
81k 9 9 золотых знаков 78 78 серебряных знаков 135 135 бронзовых знаков

Я бы особенно выделил вариант "недалёкое будущее", поэтому что из всех предложенных в ответах вариантов это единственный, который работает во всех случаях и при этом самый читаемый. Всё остальное — или попытка спрятать вермишель (именованные функции), или работает только в тривиальных случаях (промисы). Будущее за TypeScript.

18 июл 2017 в 21:27
@Squidward, к стати в последнем черновике они уже не просто слова:-)
18 июл 2017 в 21:37
Теперь это уже не недалёкое будущее 🙂
1 июл 2023 в 16:04
Можно было бы обновить ответ, что это уже не недалёкое будущее.
1 июл 2023 в 16:04
@PetLinux, ответ уже был обновлен в августе 2018 года, с указанием что async , await заработали
1 июл 2023 в 19:30

Код с асинхронными функциями можно исполнять синхронно используя альтернативный JS движок nsynjs

Если асинхронная функция возвращает promise

то просто вызываем функцию, а значение промиса получаем через свойство data :

function synchronousCode() < var getURL = function(url) < return window.fetch(url).data.text().data; >; var url = 'https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'; console.log('received bytes:',getURL(url).length); >; nsynjs.run(synchronousCode,<>,function()< console.log('synchronousCode done'); >);

Если асинхронная функция вызывает callback

Шаг 1. Оборачиваем асинхронную функцию в nsynjs-обертку (либо в промис):

var ajaxGet = function (ctx,url) < var res = <>; var ex; $.ajax(url) .done(function (data) < res.data = data; >) .fail(function(e) < ex = e; >) .always(function() < ctx.resume(ex); >); return res; >; ajaxGet.nsynjsHasCallback = true;

Шаг 2. Помещаем логику в функцию, как если бы логика исполнялась синхронно

function process() < console.log('got data:', ajaxGet(nsynjsCtx, "data/file1.json").data); >

Шаг 3. Исполняем функцию через nsynjs

nsynjs.run(process,this,function () < console.log("synchronous function finished"); >);

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

Отслеживать
ответ дан 21 июн 2017 в 13:41
357 2 2 серебряных знака 3 3 бронзовых знака

Т.к. на дворе ~~2022~~ 2023 год и уже все активно пользуются async/await, то и примеры с ним.

Частая проблема возникает при следующей задаче:

кликом по кнопке

 let chartsData = []; async function receiveData() < const response = await fetch('someUrl'); chartsData = await response.json(); >function renderChartsFromData() < for (let item of chartsData) < . >> document.getElementById('receive-data-btn').addEventListener('click', receiveData); document.getElementById('render-charts-btn').addEventListener('click', renderChartsFromData);

При вызове асинхронного метода включаем лоадер (например полупрозрачное блокирующее окно на весь экран с лоадером посередине и надписью "Пожалуйста, подождите. "). Лоадер можно повесить прямо в начале этого метода.
После окончания операции, в конце асинхронного метода, убираем лоадер.

Пример при разделении логики на разные асинхронные методы:

Есть методы: userAllowedToSeeCharts , getData , renderCharts и showCharts . Все они будут async . К примеру метод с именем showChart вызвается при клике на кнопку "show". Этот метод в себе последовательно вызовет userAllowedToSeeCharts , getData , положит данные в переменную, отфильтрует данные как нужно и потом вызовет метод renderCharts с передачей отфитрованных данных. Не забываем про лоадер, чтобы пользователь не думал, что ничего не работает

 async function showCharts() < // --- Запускаем лоадер --- let userIsAllowedToSeeCharts = await userAllowedToSeeCharts(); if (!userIsAllowedToSeeCharts ) < alert('Извините, вам нельзя это видеть'); >else < let data = await getData(); let filteredData = filterData(data); renderCharts(filteredData); >// --- Выключаем лоадер --- > async function userAllowedToSeeCharts() < const response = await fetch('someUrl'); return await response.json(); >async function getData() < const response = await fetch('someUrl'); return await response.json(); >function filteredData(data) < . >function renderCharts(data) < for (let item of data) < . >> document.getElementById('show-charts-btn').addEventListener('click', showCharts);

var url = 'https://somesite/api/v3/ticker/price?10'; const getData = async (url) =>

const json = getData(url); getData(url).then(response => < console.log(response); >); // Или так. Обёртку в виде функции ПРИДЁТСЯ написать // чтобы воспользоваться "await" для получения результата // зато НИКАКИХ "then" (async function() < let response = await getData(url); console.log(response); >)();

Как вернуть несколько значений из функции javascript