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

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

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

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

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

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

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

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

Например, представим, что мы используем какое-то имя (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.

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

Читайте также: Пространство имен в JavaScript.

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