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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *