Функция, возвращающая несколько значений — изящное использование на ES6
При программировании может возникнуть такая ситуация, когда функция должна вернуть несколько значений сразу. ES6 поможет нам изящно разрулить эту ситуацию и сократит количество лишнего кода. Посмотрим на практическом примере — пусть функция должна вернуть одновременно год, месяц и день. Упростим задачу средствами ES6!
Исходники кода
function getYearMonth() < let dateObj = new Date; let year = dateObj.getFullYear(); let month = dateObj.getMonth(); return
Трепачёв Дмитрий © 2012-2023
t.me/trepachev_dmitry
Можно ли в return вернуть два значения?
Так нет, у тебя вернется только a. Можешь создать объект или массив и возвращать его.
Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать
Переносил код с 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 >;Ответ написан более трёх лет назад
JavaScript: Возврат значений
Функции, которые мы определяли в предыдущих уроках, заканчивали свою работу тем, что печатали на экран какие-то данные:
const greeting = () => < console.log('Hello, Hexlet!'); >; Пользы от таких функций не очень много, так как результатом их работы невозможно воспользоваться внутри программы. Рассмотрим это на примере.
Возьмем задачу обработки электронной почты. Когда пользователь регистрируется на каком-то сайте, то он может ввести email любым способом:
- Добавив случайно пробелы в начале или в конце _support@hexlet.io__
- Использовав буквы в разном регистре SUPPORT@hexlet.io
Если мы сохраним его в таком виде в базу данных, то пользователь, скорее всего, не сможет войти на сайт, так как будет вбивать адрес без пробелов и используя другой регистр символов. Чтобы этого не произошло, email нужно подготовить к записи в базу, привести его к нижнему регистру и обрезать пробельные символы по краям строки. Вся задача решается в пару строчек:
const saveEmail = () => < // В реальности email приходит из формы const email = ' SuppORT@hexlet.IO'; // обрезаем пробельные символы const trimmedEmail = email.trim(); const preparedEmail = trimmedEmail.toLowerCase(); console.log(preparedEmail); // здесь будет запись в базу данных >; Этот код стал возможен только благодаря возврату значения. Методы trim() и toLowerCase() ничего не печатают на экран (в консоль), они возвращают результат своей работы и поэтому мы можем записать его в константы. Если бы они вместо этого печатали на экран, мы бы не могли присвоить результат их работы константе. Как мы не можем сделать с определенной выше функцией greeting() :
const message = greeting(); console.log(message); // => undefined Изменим функцию greeting() таким образом, чтобы она начала возвращать данные, вместо их печати. Для этого нам понадобится выполнить возврат вместо печати на экран
const greeting = () => < return 'Hello, Hexlet!'; >; return – особая инструкция, которая берёт выражение, записанное справа, и отдаёт его наружу, тому коду, который вызвал функцию. Как только JavaScript натыкается на return , выполнение функции на этом завершается.
// Теперь мы можем использовать результат работы функции const message = greeting(); console.log(message); // => Hello, Hexlet! // И даже выполнить какие-то действия над результатом console.log(message.toUpperCase()); // => HELLO, HEXLET! Любой код после return не выполняется:
const greetingWithCodeAfterReturn = () => < return 'Hello, Hexlet!'; console.log('Я никогда не выполнюсь'); >; Даже если функция возвращает данные, это не ограничивает её в том, что она печатает. Кроме возврата данных мы можем и печатать:
const greetingWithReturnAndPrinting = () => < console.log('Я появлюсь в консоли'); return 'Hello, Hexlet!'; >; // И напечатает текст на экран и вернет значение const message = greetingWithReturnAndPrinting (); Возвращать можно не только конкретное значение. Так как return работает с выражениями, то справа от него может появиться почти все что угодно. Здесь нужно руководствоваться принципами читаемости кода:
const greeting = () => < const message = 'Hello, Hexlet!'; return message; >; Здесь мы не возвращаем переменную, возвращается всегда значение, которое находится в этой переменной. Ниже пример с вычислениями:
const doubleFive = () => < // или return 5 + 5 const result = 5 + 5; return result; >; Вопрос на самопроверку. Что вернет вызов, определенной ниже, функции run() ?
// Определение const run = () => < return 5; return 10; >; // Что будет выведено на экран? console.log(run()); Ответ На экран будет выведено `5`.
Задание
Реализуйте функцию sayHurrayThreeTimes() , которая возвращает строку 'hurray! hurray! hurray!'.
const hurray = sayHurrayThreeTimes(); console.log(hurray); // => hurray! hurray! hurray! Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Полезное
Возвращаемые значения функций
Для нас в этом курсе имеется ещё один важный момент. Посмотрим внимательнее на возвращаемое значение функций. Некоторые функции не возвращают существенное значение после завершения, но некоторые возвращают, и важно понимать что это за значение и как использовать его в своём коде и как сделать так чтобы ваши собственные функции возвращали полезные значения. Мы объясним всё это ниже.
| Необходимые навыки: | Базовая компьютерная грамотность, знание основ 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.