LearnJS

concat() в JavaScript

concat() объединяет массивы и возвращает новый массив.

let frontend = ['HTML', 'CSS'];
let backend = ['Node.js', 'PHP'];

let skills = frontend.concat(backend);

console.log(skills);

Результат:

['HTML', 'CSS', 'Node.js', 'PHP']

Что делает concat()

concat() берет элементы из одного массива и добавляет к ним элементы из другого массива.

Метод не меняет исходные массивы. Он возвращает новый массив с объединенными элементами.

let first = [1, 2];
let second = [3, 4];

let result = first.concat(second);

console.log(result); // [1, 2, 3, 4]

Синтаксис

Основная запись выглядит так:

array.concat(value1, value2)

value1, value2 и следующие значения - это массивы или отдельные элементы, которые нужно добавить.

let numbers = [1, 2];

let result = numbers.concat([3, 4]);

console.log(result);

Результат:

[1, 2, 3, 4]

Объединение двух массивов

Чаще всего concat() используют, чтобы объединить два массива.

let oldTasks = ['HTML', 'CSS'];
let newTasks = ['JavaScript', 'React'];

let allTasks = oldTasks.concat(newTasks);

console.log(allTasks);

Результат:

['HTML', 'CSS', 'JavaScript', 'React']

Порядок сохраняется: сначала идут элементы массива oldTasks, потом элементы массива newTasks.

Несколько массивов

В concat() можно передать сразу несколько массивов.

let first = [1, 2];
let second = [3, 4];
let third = [5, 6];

let numbers = first.concat(second, third);

console.log(numbers);

Результат:

[1, 2, 3, 4, 5, 6]

Добавление значений

concat() умеет добавлять не только массивы, но и отдельные значения.

let numbers = [1, 2];

let result = numbers.concat(3, 4);

console.log(result);

Результат:

[1, 2, 3, 4]

Можно смешивать массивы и отдельные значения.

let numbers = [1, 2];

let result = numbers.concat([3, 4], 5);

console.log(result); // [1, 2, 3, 4, 5]

Исходные массивы не меняются

concat() не изменяет массив, у которого вызван, и не изменяет массивы, которые передали в аргументы.

let first = ['a', 'b'];
let second = ['c', 'd'];

let result = first.concat(second);

console.log(first); // ['a', 'b']
console.log(second); // ['c', 'd']
console.log(result); // ['a', 'b', 'c', 'd']

Если нужен объединенный массив, результат нужно сохранить в переменную.

let first = [1, 2];
let second = [3, 4];

first.concat(second);

console.log(first); // [1, 2]

concat() и spread

В современном коде для объединения массивов часто используют spread-оператор ….

let first = [1, 2];
let second = [3, 4];

let result = [...first, ...second];

console.log(result); // [1, 2, 3, 4]

concat() тоже остается нормальным способом. Особенно если в проекте уже используют такой стиль или нужно последовательно объединить несколько значений.

let result = first.concat(second, [5, 6]);

Итого

concat() объединяет массивы и возвращает новый массив.

  • array.concat(value) добавляет значения к массиву и возвращает результат.
  • В concat() можно передать один или несколько массивов.
  • Можно добавлять отдельные значения.
  • Исходные массивы после вызова concat() не меняются.
  • Если результат нужен дальше, его нужно сохранить в переменную.