Как работает concat в JavaScript?

Что такое concat?

concat() — это метод массива, который создаёт новый массив, соединяя элементы двух или более массивов. Важно: исходный массив не изменяется (метод не мутирует).

Базовое использование

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// Способ 1: concat()
const result = arr1.concat(arr2);
console.log(result);     // [1, 2, 3, 4, 5, 6]
console.log(arr1);       // [1, 2, 3] — исходный массив не изменился

// Способ 2: несколько массивов сразу
const result2 = arr1.concat(arr2, [7, 8], [9]);
console.log(result2);    // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// Способ 3: добавление элементов
const result3 = arr1.concat(arr2, 10, 11, 12);
console.log(result3);    // [1, 2, 3, 4, 5, 6, 10, 11, 12]

Как это работает внутри?

// Упрощённая реализация concat:
Array.prototype.concat = function(...items) {
  // 1. Создаём новый массив
  const result = [...this];
  
  // 2. Для каждого аргумента
  for (const item of items) {
    // 3. Если это массив, добавляем его элементы
    if (Array.isArray(item)) {
      result.push(...item);
    } else {
      // 4. Если это обычное значение, добавляем как есть
      result.push(item);
    }
  }
  
  // 5. Возвращаем новый массив
  return result;
};

// Примеры:
const arr = [1, 2];
console.log(arr.concat([3, 4]));     // [1, 2, 3, 4]
console.log(arr.concat([3, 4], 5));  // [1, 2, 3, 4, 5]
console.log(arr.concat(6, 7));       // [1, 2, 6, 7]

Вложенные структуры

concat не копирует вложенные объекты — это поверхностная копия:

const arr1 = [1, { name: 'Alice' }];
const arr2 = [2, { name: 'Bob' }];

const result = arr1.concat(arr2);

console.log(result);  // [1, {name: 'Alice'}, 2, {name: 'Bob'}]

// ВНИМАНИЕ: объекты указывают на одно место в памяти!
result[1].name = 'Charlie';
console.log(arr1[1].name);  // 'Charlie' — исходный массив изменился!

Сравнение с другими способами

const arr1 = [1, 2];
const arr2 = [3, 4];

// Способ 1: concat() — функциональный (старый способ)
const result1 = arr1.concat(arr2);

// Способ 2: spread operator — современный (ES6+)
const result2 = [...arr1, ...arr2];

// Способ 3: push() — мутирующий (изменяет исходный)
arr1.push(...arr2);  // arr1 теперь [1, 2, 3, 4]

// Все дают одинаковый результат, но разной философией:
// concat() и spread — функциональные (не мутируют)
// push() — мутирующий (изменяет исходный)

Практические примеры

Объединение данных

// Объединение результатов API запросов
const page1 = [{ id: 1, name: 'Alice' }];
const page2 = [{ id: 2, name: 'Bob' }];
const page3 = [{ id: 3, name: 'Charlie' }];

const allUsers = page1.concat(page2, page3);
// [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, {id: 3, name: 'Charlie'}]

Добавление элементов в начало

const arr = [2, 3, 4];
const result = [1].concat(arr);
console.log(result);  // [1, 2, 3, 4]

// Или с spread (более современно):
const result2 = [1, ...arr];
console.log(result2);  // [1, 2, 3, 4]

Клонирование массива

const original = [1, 2, 3];

// concat без аргументов делает поверхностную копию
const copy = original.concat();
copy[0] = 999;
console.log(original);  // [1, 2, 3] — исходный не изменился

// Аналог со spread:
const copy2 = [...original];

Производительность

concat и spread имеют одинаковую производительность O(n + m), где n и m — размеры массивов. Оба создают новый массив. push() с spread немного быстрее, но мутирует исходный массив.

Когда использовать concat?

Методы, похожие на concat

// concat — объединяет массивы
[1, 2].concat([3, 4]);      // [1, 2, 3, 4]

// spread — то же самое, но современнее
[1, 2, ...3, 4];            // [1, 2, 3, 4]

// push — мутирует исходный массив
const arr = [1, 2];
arr.push(3, 4);             // arr теперь [1, 2, 3, 4]

// flat — объединяет вложенные массивы
[1, [2, 3], [4, 5]].flat(); // [1, 2, 3, 4, 5]

// join — объединяет в строку (не то же самое!)
[1, 2, 3].join('-');        // '1-2-3'

На интервью это вопрос проверяет: понимаешь ли ты, что concat создаёт новый массив и не мутирует исходный. Это базовое, но важное знание о функциональном подходе к JavaScript.