3 Ways to Merge Arrays in JavaScript

How to merge arrays in JavaScript using spread operator, array.concat(), and array.push().

dmitripavlutin.com

자바스크립트에서 배열을 합치는 3가지 방법을 소개합니다.

 

Spread 연산자를 사용하여 배열을 합치는 방법

쩜쩜쩜(...)으로 생긴 연산자를 이용하여 배열을 합칠 수 있습니다.

const heroes = ['Batman', 'Superman'];
const villains = ['Joker', 'Bane'];

const all = [...heroes, ...villains];

all; // ['Batman', 'Superman', 'Joker', 'Bane']

아래와 같이 여러 개의 배열을 합칠 수도 있습니다.

const mergeResult = [...array1, ...array2, ...array3, ...arrayN];

 

array.concat()을 사용하여 배열을 합치는 방법

concat() 함수를 이용하여 배열을 합칠 수 있습니다.

const heroes = ['Batman', 'Superman'];
const villains = ['Joker', 'Bane'];

// 이런 식으로도 되고
const all1 = heroes.concat(villains); 
// 이런 식으로도 됩니다.
const all2 = [].concat(heroes, villains); 

all1; // ['Batman', 'Superman', 'Joker', 'Bane']
all2; // ['Batman', 'Superman', 'Joker', 'Bane']

아래와 같이 여러 개의 배열을 합칠 수도 있습니다.

const mergeResult = [].concat(array1, array2, array3, arrayN);

 

array.push()를 사용하여 배열을 합치는 방법

push()는 원래 아래와 같이 배열에 요소를 추가할 때 사용하는 함수입니다.

const heroes = ['Batman'];

heroes.push('Superman');

heroes; // ['Batman', 'Superman']

그런데 아래와 같이 spread 연산자와 함께 사용하면 배열을 합치는데 사용할 수 있습니다.

const heroes = ['Batman', 'Superman'];
const villains = ['Joker', 'Bane'];

heroes.push(...villains);

heroes; // ['Batman', 'Superman', 'Joker', 'Bane']