
Для чего необходим оператор return в JavaScript функции? Как его использовать внутри функции и что можно делать с возвращаемыми значениями? Сегодня мы поговорим об этом.
Для чего необходим return в JavaScript функции
Это позволяет сделает код более модульным. Есть много разных подходов к написанию кода. Но чаще всего return в JavaScript функции нужен для организации модульного подхода.
Бывают случаи, когда нет возможности применить тернарный оператор или существует необходимость использовать один и тот же фрагмент кода в нескольких местах в рамках одного проекта. В этом случае лучше обернуть его в отдельную функцию. Если речь идет о создании длиной HTML-строки, то наилучший вариант — сохранить ее в отдельной функции для удобства чтения.
Давайте рассмотрим на несколько примеров.
Возврат строки, числа или другого типа данных
function renderGreeeting (name) { // Получаем элемент для рендеринга сообщения приветствия let app = document.querySelector('#app'); // Создаем приветствие let p = document.createElement('p'); // Создаем тег p p.textContent = `Hi, ${name}! 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, ${name}! 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, ${name}!`; p.textContent = 'How are you today?'; wrap.appendChild(h1); wrap.appendChild(p); return wrap; }
Возврат логического типа данных с помощью return в JavaScript функции
Return может быть очень полезным, когда требуется выполнить более сложные проверки, выходящие за рамки простого if … else.
Например, в веб-приложении, которое показывает приобретенные пользователями электронные книги и курсы. Нужно проверить, приобрели ли они продукт, у которого есть доступ к приватной рабочей области Slack. Если да, то пользователь видит кнопку для получения ссылки для приглашения. В противном случае то вместо этого высвечивается сообщение.
Объект «данных о покупке» (data) выглядит примерно так:
let data = { guides: [guide1Object, guide2Object, guide3Object, etc], academy: [], otherProducts: [product1, product2] };
Далее необходимо сделать проверку на соответствие одному или нескольким из следующих условий:
- ключ 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 = '<button data-slack>Join Slack</button>'; } else { app.innerHTML = '<p>Sorry, you do not have access to Slack.</p>'; } }
Такой подход основан на слишком сложной логике. Такой код является рабочим, но он не очень читабельный и его трудно поддерживать. Очень легко ошибиться в одном из условий.
В этом случае 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 = '<button data-slack>Join Slack</button>'; } else { app.innerHTML = '<p>Sorry, you do not have access to Slack.</p>'; } }
Заключение
Надеюсь, это поможет вам понять, как можно использовать return в JavaScript функции. Это организационный инструмент, который позволяет структурировать код и сделать его более читабельным.