JS 배열 합치기

concat()

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

두 개 이상의 배열을 합쳐 하나의 배열을 리턴한다.

주의 원래 배열에 합쳐지는 것이 아닌 단순히 리턴을 하는 것! (arr1에 concat()을 해도 arr1을 찍으면 원래 배열 그대로임)

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [7,8,9];
const newArr = arr1.concat(arr2,['one', 'two'], arr3);
console.log(newArr); // [1, 2, 3, 4, 5, 6, "one", "two", 7, 8, 9]
console.log(newArr.length); // 11

파라미터로 배열이 올 경우 배열의 요소를 꺼내 새로운 기준이 되는 배열에 추가한다.

따라서 길이는 11이 된다.

 

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

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [7,8,9];
console.log(...arr1); // 1,2,3
const newArr = [...arr1, ...arr2, ...arr3];
console.log(newArr); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
const newArr1 = [arr1, arr2, arr3];
console.log(newArr1); //[[1, 2, 3], [4, 5, 6], [7, 8, 9]]

전개연산자는 배열의 요소 하나하나를 리턴한다. 

전개연산자를 사용해서 새로운 배열을 만들 경우 길이가 9가 되지만 전개연산자를 사용하지 않으면 길이가 3인 배열이 만들어진다.

 

push()

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

push()를 사용하면 두 배열을 합치고 그 길이를 리턴한다.

이때 주의해야할 점은 push는 배열 그대로를 더하기 때문에 arr1.push(arr2)을 하게 되면 [1, 2, 3, [4, 5, 6]] 가 되어 길이가 4인 배열이 된다. (원래 배열 자체가 변하게 됨!! concat과 다른 점)

배열의 요소 하나하나를 배열에 추가하기 위해서는 전개연산자(...)를 이용해 값을 추가하면 된다.

 

출처

[Javascript] 배열 합치기 3가지 방법