[JS] 배열과 배열 합치기 (concat, ...(전개연산자), push+...)

 

배열과 배열을 합칠 때, 사용하는 방법 3가지에 대해 알아보겠습니다.

 

---

1. concat

concat 메서드는, 배열이나 값들에 대해 합쳐서 새로운 배열을 리턴합니다.

기존의 배열에는 영향을 주지 않습니다.

 

✅ example1

const arr1 = ['a', 'b', 'c'];
const arr2 = ['A', 'B', 'C'];

const arr3 = arr1.concat(arr2);

console.log(arr4);

//[
//  'a', 'b', 'c', 'A', 'B', 'C'
//]

 

✅ example2

concat 인자 안에 배열이 와도, 배열의 원소를 꺼내서 합칩니다. (배열 자체가 원소가 되지 않습니다)

const arr1 = [1, 2, 3];
const arr2 = arr1.concat(['x', 'y']);
console.log(arr2)
// [ 1, 2, 3, 1, 2, 3, 'x', 'y']

 

 

2. …(spread operator)

...은 spread operator 라고 하며 한국어로 전개연산자를 의미합니다.

배열에서 ...은 하나의 원소로 나누게 해줍니다. 

 

✅ example1

const arr1 = ['a', 'b', 'c'];
const arr2 = ['A', 'B', 'C'];

const arr3 = [
  ...arr1,
  ...arr2,
];

console.log(arr3);

//['a', 'b', 'c', 'A', 'B', 'C']

 

3. push + ... 

push함수의 인자에 배열 자체를 넣으면 배열 자체가 하나의 원소로 처리됩니다.

그래서 배열 앞에 전개연산자를 넣으면 하나의 원소를 꺼내어 push처리하면 됩니다.

 

✅ example1

const arr1 = ['a', 'b', 'c'];
const arr2 = ['A', 'B', 'C'];

const arr3 = [];
arr3.push(...arr1);
arr3.push(...arr2);


console.log(arr3);

//['a', 'b', 'c', 'A', 'B', 'C']

 

✅ example2

참고로 push 함수를 사용하면, 새 배열을 리턴하지 않고 기존의 배열에 추가하며, 새 길이를 리턴합니다.

const arr1 = ['a', 'b', 'c'];
const arr2 = ['A', 'B', 'C'];

arr1.push(...arr2);

console.log(arr1);

//['a', 'b', 'c', 'A', 'B', 'C']