Для чего необходим оператор 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 функции. Это организационный инструмент, который позволяет структурировать код и сделать его более читабельным.
