JavaScript | Как вернуть несколько результатов из функции?

Представим себе такую задачу. Мы хотим передавать в функцию одно число. Внутри тела функции мы хотим получить: сначала результат сложения этого числа с числом 10, а потом хотим получить результат умножения этого числа на число 3. Как это сделать в JavaScript?

В чём может быть трудность возвращения нескольких результатов из функции на JavaScript?

Новички, могут (до решения этой задачи) изучить примеры с работой «оператора внезапного завершения функции«, который называется return.

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

Что может попытаться сделать человек?

Видео на тему

Вариант написания функции при помощи двух операторов return

Новичок может подумать: «Может вместо одного оператора return записать два? Первый вернёт результат сложения, а второй вернёт результат умножения». Чтож, звучит логично.

И он приступает к написанию:

function my_f(num){
   return num + 10
   return num * 3
}

Такая запись имеет место быть. Функция будет объявлена без ошибок. Среда выполнения кода её примет без проблем.

Теперь давайте вызовем эту функцию с числом 5.

my_f(5)

Новичку не очевидно какой из операторов return сработал в JavaScript

Что мы видим? Нам вернулось одно число вместо двух. Это означает, что такой способ написания функции нам не подходит.

Более того. Новичок может запутаться в итоговом результате. Число 15 — это какое из двух операторов return? Из первого с «num + 10″? Или из второго с «num * 3″?

О том как работает синтаксис оператора return — это отдельная тема.

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

my_f(2)

С параметром 2 стало понятнее какой из двух return сработал в функции на JavaScript

Передаём 2, а получаем 12. Значит отрабатывает только первый оператор return из двух последовательных, разделённых через точку с запятой.

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

Вторым по популярности вариантом написания может быть один оператор return с несколькими запятыми в производстве выражения.

function my_f(num){
   return num + 10, num * 3
}

Такой вариант функции тоже вполне себе жизнеспособный. Только на этот раз нам вернётся результат умножения на 3.

Новичку не очевидно что выражение в return может иметь запятые - JavaScript — Новичку не очевидно что выражение в return может иметь запятые — JavaScript

Сложение будет проигнорировано.

Так как же нам научить функцию возвращать два числовых значения?

Использование структур данных — массив или объект в JavaScript, чтобы возвращать из функции несколько значений

Для возврата нескольких значений из функции нужно использовать массивы или объекты.

Массивы имеют чёткую последовательность элементов, но у самих элементов нет человеко-понятных наименований. Вместо слов массивы используют числа — положения данных в самом массиве.

Объекты могут иметь имена в своих свойствах, а значит данные могут быть более понятными. Но порядок имён не гарантируется.

Что выбрать? Зависит от задачи. Но мы покажем два варианта написания такой функции:

// Вариант с массивом

function my_f(num){
   return [num+10, num*3]
}

// Вариант с объектом

function my_f(num){
   return {addition: num+10, multiplication: num*3}
}

А теперь попробуем сделать вызовы:

Вернули два результата из функции в виде массива - JavaScript — Вернули два результата из функции в виде массива — JavaScript

Вернули два результата из функции в виде объекта - JavaScript — Вернули два результата из функции в виде объекта — JavaScript

Задача выполнена!

Информационные ссылки

Стандарт ECMAScript — https://tc39.es/ecma262/multipage/