[Javascript] 배열 합치기 (concat, spread 전개연산자)

배열 합치기

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

ES6에서 제공하는 ...spread operator(전개연산자)를 사용하여 2개 이상의 배열을 이어붙일 수 있다.

 

 spread operator(...) 

spread operator는 한글로 전개 연산자라고도 한다.

 

...spread operator는 배열에서 사용할때 배열의 원소들을 분해해서 개별요소로 만들어준다.

예제를 통해 알아보자

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

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

각 배열에 spread operator ...을 적용하면 각 원소들을 분리해 개별요소로 리턴해준다.

 

예를들어

...arr1은 1,2,3 각각을 개별요소로 리턴해주고

...arr2는 4,5,6 각각을 개별요소로 리턴해준다.

 

newArr은 각 개별요소들을 인자로 가지는 새로운 배열이다.

 

2. concat() 연산자

concat() 함수는 전달받은 파라미터들을 합쳐서

새배열을 생성하여 리턴한다.

 

concat을 사용하는 법은 아래와 같다

array.concat([value1[, value2[, ...[, valueN]]]])

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

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

arr1.concat(4, 5, [6, 7, 8], 9);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

주의해야할 점은 원본 배열의 값은 변하지 않는다는 것이다.

또한 파라미터가 배열인 경우에는 배열 안의 원소들을 꺼내여 새로운 배열에 포함시킨다.