Javascript function to return text

Содержание

Возврат значений — Основы JavaScript
Дополнительные материалы
Остались вопросы? Задайте их в разделе «Обсуждение»
Открыть доступ
Как правильно использовать return в JavaScript функции
Для чего необходим return в JavaScript функции
Возврат строки, числа или другого типа данных
Возврат логического типа данных с помощью return в JavaScript функции
Заключение
JavaScript: Возврат значений
Задание
Полезное

Возврат значений — Основы 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());

Дополнительные материалы

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

130 курсов, 2000+ часов теории
1000 практических заданий в браузере
360 000 студентов

Наши выпускники работают в компаниях:

Источник

Как правильно использовать return в JavaScript функции

Для чего необходим оператор return в JavaScript функции? Как его использовать внутри функции и что можно делать с возвращаемыми значениями? Сегодня мы поговорим об этом.

Для чего необходим return в JavaScript функции

Это позволяет сделает код более модульным. Есть много разных подходов к написанию кода. Но чаще всего return в JavaScript функции нужен для организации модульного подхода.

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

Давайте рассмотрим на несколько примеров.

Возврат строки, числа или другого типа данных

function renderGreeeting (name) < // Получаем элемент для рендеринга сообщения приветствия     let app = document.querySelector('#app'); // Создаем приветствие let p = document.createElement('p'); // Создаем тег p p.textContent = `Hi, $! How are you today?`; // Вставляем текст в тег p app.appendChild(p); // Вставляем тег p в UI >

Представим, что мы используем какое-то имя (name), введенное пользователем, для создания некоторой HTML-разметки в пользовательском интерфейсе.

В этом примере можно было бы поступить следующим образом. Сначала создать собственную функцию и вписать внутрь эти строки. После этого можно использовать return, который вернет элемент p в переменной. Это позволит использовать ее в коде в дальнейшем.

function getGreeting (name) < let p = document.createElement('p'); p.textContent = `Hi, $! How are you today?`; return p; > function renderGreeeting (name) < let app = document.querySelector('#app'); // Получаем элемент для рендеринга приветствия app.appendChild(getGreeting(name)); // Вставляем элемент в UI >

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

function getGreeting (name) < // Создаем элементы let wrap = document.createElement('div'); let h1 = document.createElement('h1'); let p = document.createElement('p'); // Добавляем содержимое h1.textContent = `Hi, $!`; p.textContent = 'How are you today?'; wrap.appendChild(h1); wrap.appendChild(p); return wrap; >

Возврат логического типа данных с помощью return в JavaScript функции

Return может быть очень полезным, когда требуется выполнить более сложные проверки, выходящие за рамки простого if … else.

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

Объект «данных о покупке» (data) выглядит примерно так:

Далее необходимо сделать проверку на соответствие одному или нескольким из следующих условий:

ключ guides существует в data, имеет минимум четыре элемента или…
ключ academy существует в data, содержит минимум один элемент или…
имеется ключ otherProducts и одним из элементов в нем содержит резервный ключ со значением true

Если любое из этих условий выполнено, можно показать пользователю кнопку.

function renderSlack () < // Получаем элемент приложения let app = document.querySelector('#app'); // Делаем все проверки if ((data.guides && data.guides.length >3) || (data.academy && data.academy.length > 0) || data.otherProducts && data.otherProducts.filter(function (product) < return product.slack; >).length > 0) < app.innerHTML = ''; > else < app.innerHTML = 'Sorry, you do not have access to Slack.
'; > >

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

В этом случае return в JavaScript функции поможет упростить этот подход. Он вернет true, если у пользователя есть доступ, и false, если нет. В этом случае происходит отдельно запуск каждого условия для проверки с возвратом true или false.

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

function hasSlack () < // Есть ли у клиента минимум 4 купленных продукта if (data.guides && data.guides.length >3) return true; // Является ли клиент членом онлайн-академии if (data.academy && data.academy.length > 0) return true; // Владеет ли клиент другим продуктом, у которого есть доступ к Slack let productsWithSlack = data.otherProducts ? data.otherProducts.filter(function (product) < return product.slack; >):[]; if (productsWithSlack) return true; // Если ничего из этого не соответствует действительности, то доступа для него нет return false; >

Теперь давайте вернемся к функции renderSlack(). И если условия предоставления доступа к Slack когда-либо изменятся, достаточно просто обновить функцию hasSlack(), не внося изменений в остальной код.

function renderSlack () < let app = document.querySelector('#app'); // Получаем элемент приложение // Делаем все проверки if (hasSlack()) < app.innerHTML = ''; > else < app.innerHTML = 'Sorry, you do not have access to Slack.
'; > >

Заключение

Надеюсь, это поможет вам понять, как можно использовать return в JavaScript функции. Это организационный инструмент, который позволяет структурировать код и сделать его более читабельным.

Источник

JavaScript: Возврат значений

Добавив случайно пробелы в начале или в конце _support@hexlet.io__
Использовав буквы в разном регистре SUPPORT@hexlet.io

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

const message = greeting(); console.log(message); // => undefined

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 ();

Вопрос на самопроверку. Что вернет вызов, определенной ниже, функции run() ?

// Определение const run = () => < return 5; return 10; >; // Что будет выведено на экран? console.log(run());

Задание

Реализуйте функцию sayHurrayThreeTimes() , которая возвращает строку ‘hurray! hurray! hurray!’.

const hurray = sayHurrayThreeTimes(); console.log(hurray); // => hurray! hurray! hurray!

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Полезное

Источник