[JavaScript] 배열 합치기 (concat, spread operator, push)

두 개 이상의 배열을 합치는 방법은 3가지가 있다. concat, spread operator, push를 사용하여 하나의 배열로 만드는 방법을 알아보자!

📍 concat

arr1.concat(arr2)
arr1.concat(val1, val2, ...)

기존의 배열에 새로운 배열이나 값을 합쳐서 '새로운 배열'로 반환한다.
다만, 기존의 배열은 변경하지 않는다.

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

let arr3 = arr1.concat(arr2);
console.log(arr3); // [ 1, 2, 3, 4, 5, 6 ]

let arr4 = arr1.concat(11, 22, ['a', 'b'], 'c');
console.log(arr4); // [ 1, 2, 3, 11, 22, 'a', 'b', 'c' ]

arr3은 배열과 배열을 합쳐서 만든 것이다.
arr4는 값과 배열을 모두 합쳐서 만들어보았다. 인자 순서대로 배열이 구성된다.

📍 ...spread operator (전개 연산자)

spread operator는 전개 연산자로 불리며 배열의 원소들을 분해하여 개별 요소로 만드는 기능을 한다.

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

let arr3 = [...arr1, ...arr2];
console.log(arr3); // [ 1, 2, 3, 4, 5, 6 ]

arr3은 전개 연산자를 통해 각 요소들을 담은 새로운 배열이다.

📍 push

push를 사용하기 위해서는 위의 spread operator를 함께 사용해야 한다. 그 이유도 같이 확인해보겠다.

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

// arr1.push(arr2); //	[ 1, 2, 3, [ 4, 5, 6 ] ]

arr1.push(...arr2);
console.log(arr1); // [ 1, 2, 3, 4, 5, 6 ]

push는 배열의 값을 넣기 위해 사용된다. 그대로 들어가기 때문에 배열 자체가 push 된다. 하지만 spread operator를 사용할 경우, spread operator는 배열의 요소 각각으로 분해하기 때문에 요소 하나하나가 push 된다.
따라서 push를 사용할 때에는 spread operator를 꼭 함께 사용하자.

cf)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
https://hianna.tistory.com/397