Полное руководство: Возврат нескольких значений в JavaScript

Возврат нескольких значений из функций JavaScript

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

Содержание

• Понимание ограничения возврата в JavaScript
• Подход 1: Использование массивов
• Подход 2: Использование объектов
• Подход 3: Использование деструктурирующего присваивания
• Подход 4: Использование классов/конструкторов
• Подход 5: Использование Maps
• Рассмотрения производительности
• Лучшие практики и рекомендации

Понимание ограничения возврата в JavaScript

Функции JavaScript могут возвращать только одно значение. Когда вы используете запятую в своем коде, как в текущей реализации, она вычисляет каждое выражение, но возвращает только последнее. Именно поэтому ваш оператор return dCodes, dCodes2; возвращает только dCodes2.

Важно: Оператор запятой вычисляет каждый из своих операндов (слева направо) и возвращает значение последнего операнда. Это отличается от того, как работают значения, разделенные запятыми, в аргументах функций или литералах массивов.

// Это возвращает только последнее значение
function test() {
    return 1, 2, 3; // Возвращает 3
}

Подход 1: Использование массивов

Самый простой подход — вернуть массив, содержащий все значения, которые вы хотите вернуть.

var newCodes = function() {  
    var dCodes = fg.codecsCodes.rs;
    var dCodes2 = fg.codecsCodes2.rs;
    return [dCodes, dCodes2]; // Возврат в виде массива
};

// Использование
var codes = newCodes();
var dCodes = codes[0];
var dCodes2 = codes[1];

Преимущества:

• Простота и понятность
• Работает во всех средах JavaScript
• Легко понимается начинающими

Недостатки:

• Доступ к значениям требует индексации (codes[0], codes[1])
• Менее описательно в отношении того, что представляет каждое значение
• Может запутать, если порядок изменится

Современный синтаксис массивов:

// Использование синтаксиса литерала массива
return [dCodes, dCodes2];

// Использование синтаксиса spread, если нужно вернуть массив
return [...someArray];

Подход 2: Использование объектов

Более описательный подход — вернуть объект с именованными свойствами.

var newCodes = function() {  
    var dCodes = fg.codecsCodes.rs;
    var dCodes2 = fg.codecsCodes2.rs;
    return { codes: dCodes, codes2: dCodes2 }; // Возврат в виде объекта
};

// Использование
var result = newCodes();
var dCodes = result.codes;
var dCodes2 = result.codes2;

Преимущества:

• Самодокументируемость с именами свойств
• Порядок не имеет значения
• Легко добавлять новые свойства
• Более поддерживаемый

Недостатки:

• Немного более многословно, чем массивы
• Имена свойств должны быть допустимыми идентификаторами

Синтаксис литерала объекта (ES6):

// Короткие имена свойств (ES6)
return { dCodes, dCodes2 };

// С вычисляемыми именами свойств
return { [`codes${index}`]: value };

Подход 3: Использование деструктурирующего присваивания

Современный JavaScript (ES6+) поддерживает деструктурирующее присваивание, которое позволяет извлекать несколько значений из массивов или объектов непосредственно в переменные.

// Функция, возвращающая массив
function getCoordinates() {
    return [10, 20]; // [x, y]
}

// Функция, возвращающая объект
function getUserInfo() {
    return { name: 'Alice', age: 25 };
}

// Деструктуризация массива
const [x, y] = getCoordinates();

// Деструктуризация объекта
const { name, age } = getUserInfo();

Деструктуризация массива:

var newCodes = function() {  
    var dCodes = fg.codecsCodes.rs;
    var dCodes2 = fg.codecsCodes2.rs;
    return [dCodes, dCodes2]; // Все еще возвращаем массив
};

// Использование с деструктуризацией
var [dCodes, dCodes2] = newCodes();

Деструктуризация объекта:

var newCodes = function() {  
    var dCodes = fg.codecsCodes.rs;
    var dCodes2 = fg.codecsCodes2.rs;
    return { dCodes, dCodes2 }; // Возвращаем объект
};

// Использование с деструктуризацией
var { dCodes, dCodes2 } = newCodes();

Расширенная деструктуризация:

// Пропуск значений в массивах
const [first, , third] = [1, 2, 3];

// Переименование переменных
const { dCodes: firstCodes, dCodes2: secondCodes } = newCodes();

// Значения по умолчанию
const { name = 'Unknown', age = 0 } = getUserInfo();

// Вложенная деструктуризация
const { user: { name, email } } = getComplexData();

Подход 4: Использование классов/конструкторов

Для более сложных структур данных можно создавать пользовательские классы или конструкторные функции.

// Класс ES6
class CodeCollection {
    constructor(codes, codes2) {
        this.codes = codes;
        this.codes2 = codes2;
    }
    
    // Здесь можно добавлять методы
    combine() {
        return this.codes.concat(this.codes2);
    }
}

var newCodes = function() {  
    var dCodes = fg.codecsCodes.rs;
    var dCodes2 = fg.codecsCodes2.rs;
    return new CodeCollection(dCodes, dCodes2);
};

// Использование
var codes = newCodes();
console.log(codes.codes);       // Доступ к свойствам
console.log(codes.codes2);      // Доступ к свойствам
console.log(codes.combine());   // Использование методов

Конструкторная функция (Традиционный подход):

function CodeCollection(codes, codes2) {
    this.codes = codes;
    this.codes2 = codes2;
}

CodeCollection.prototype.combine = function() {
    return this.codes.concat(this.codes2);
};

Преимущества:

• Может содержать методы и поведение
• Типобезопасность (особенно с TypeScript)
• Более объектно-ориентированный подход
• Можно расширять функциональность

Недостатки:

• Более многословно
• Избыточно для простого возврата данных

Подход 5: Использование Maps

Для пар “ключ-значение” можно использовать JavaScript Maps.

var newCodes = function() {  
    var dCodes = fg.codecsCodes.rs;
    var dCodes2 = fg.codecsCodes2.rs;
    return new Map([
        ['codes', dCodes],
        ['codes2', dCodes2]
    ]);
};

// Использование
var codesMap = newCodes();
var dCodes = codesMap.get('codes');
var dCodes2 = codesMap.get('codes2');

Преимущества:

• Ключами могут быть любые типы данных (не только строки)
• Встроенные методы для манипуляции
• Сохраняет порядок вставки
• Итерируемый

Недостатки:

• Более сложный синтаксис
• Реже используется для простого возврата значений

Рассмотрения производительности

При выборе подхода учитывайте производительность:

// Настройка теста производительности
function testArray() {
    return [1, 2, 3, 4, 5];
}

function testObject() {
    return { a: 1, b: 2, c: 3, d: 4, e: 5 };
}

// Подход к бенчмаркингу
console.time('array');
for (let i = 0; i < 1000000; i++) {
    const [a, b, c, d, e] = testArray();
}
console.timeEnd('array');

console.time('object');
for (let i = 0; i < 1000000; i++) {
    const { a, b, c, d, e } = testObject();
}
console.timeEnd('object');

Выводы о производительности:

• Массивы: Обычно быстрее для небольших наборов данных
• Объекты: Немного медленнее из-за накладных расходов на поиск свойств
• Деструктуризация: Современные движки JavaScript хорошо оптимизируют деструктуризацию
• Память: Объекты используют немного больше памяти из-за хранения свойств

Когда приоритизировать производительность:

• Горячие пути кода (часто выполняемые функции)
• Возврат больших наборов данных
• Приложения реального времени

Лучшие практики и рекомендации

На основе вашего конкретного сценария и распространенных случаев использования, вот рекомендации:

Для вашего текущего кода

// Лучший подход для вашего случая - объект с описательными именами
var newCodes = function() {  
    var dCodes = fg.codecsCodes.rs;
    var dCodes2 = fg.codecsCodes2.rs;
    return { 
        primaryCodes: dCodes, 
        secondaryCodes: dCodes2 
    };
};

// Использование с деструктуризацией
const { primaryCodes, secondaryCodes } = newCodes();

Общие рекомендации

1. Используйте объекты для именованных значений: Когда каждое значение имеет четкий смысл
2. Используйте массивы для упорядоченных коллекций: Когда порядок имеет значение и значения похожи
3. Используйте деструктуризацию: Делает потребление нескольких значений чистым и интуитивным
4. Рассмотрите TypeScript: Для лучшей типобезопасности и документирования кода
5. Документируйте возвращаемые значения: Особенно в командной среде

Расширенные паттерны

Функция, возвращающая несколько значений с валидацией:

function validateUser(userData) {
    const isValid = userData.age >= 18;
    const hasEmail = userData.email && userData.email.includes('@');
    const hasName = userData.name && userData.name.length > 0;
    
    return {
        isValid,
        hasEmail,
        hasName,
        errors: []
    };
}

// Или использование паттерна результата
function divide(a, b) {
    if (b === 0) {
        return { success: false, error: 'Деление на ноль' };
    }
    return { success: true, result: a / b };
}

Асинхронные функции с несколькими значениями:

async function fetchData() {
    const response = await fetch('/api/data');
    const data = await response.json();
    return {
        status: response.status,
        data: data,
        timestamp: Date.now()
    };
}

Заключение

Возврат нескольких значений из функций JavaScript достигается через несколько эффективных подходов:

1. Массивы хорошо подходят для упорядоченных коллекций и являются самым простым решением
2. Объекты обеспечивают лучшую читаемость и поддерживаемость с именованными свойствами
3. Деструктурирующее присваивание делает потребление нескольких значений чистым и интуитивным
4. Классы/конструкторы идеальны для сложных данных с связанными методами
5. Maps предлагают гибкость для пар “ключ-значение” с различными типами данных

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

Источники

1. Return multiple values in JavaScript? - Stack Overflow
2. JavaScript Return multiple values from function - GeeksforGeeks
3. Destructuring - JavaScript | MDN
4. How to Use Array and Object Destructuring in JavaScript - freeCodeCamp
5. Returning Multiple Values in JavaScript (How to Guide) - Medium
6. Returning Multiple Values from a Function in JavaScript - Scaler Topics
7. Returning Multiple Values from a Function in JavaScript - JavaScript Tutorial
8. The Comma Operator in JavaScript — Marius Schulz
9. Emerging JavaScript pattern: multiple return values - Loige
10. How to Return Multiple Values in JavaScript - Mayallo