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

concat()

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

concat() 함수는 파라미터로 받은 배열이나 값들을 기존의 배열에 합쳐서 새로운 배열을 만들어 리턴한다.

이때 파라미터가 배열인 경우, 배열 안의 원소들을 꺼내어 새로운 배열에 포함시킨다. 원본 배열의 값은 변하지 않는다.

const arr = [1, 2, 3];
const newArr = arr.concat('a', ['b', 'c'], 'abc');

document.writeln(arr); // [1, 2, 3]
document.writeln(newArr.length); // 7
document.writeln(newArr); // [1, 2, 3, 'a', 'b', 'c', 'abc']

 

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

spread operator(...)를 사용해 배열을 이어 붙일 수 있다.

배열에서 전개연산자는 배열의 원소들을 분해해서 개별 요소로 만들어 준다.

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

const newArr = [
  ...arr1, // arr1의 원소들을 쪼개어 개별요소인 1,2,3을 리턴
  ...arr2, // 개별요소인 4,5,6을 리턴
  ...arr3 // 개별요소인 7,8,9를 리턴
];

document.write(newArr.length); // 9
document.write(newArr); // 1,2,3,4,5,6,7,8,9

 

push() 함수와 spread operator

전개연산자를 사용하면 push() 함수를 이용해서도 여러 개의 배열을 하나로 합칠 수 있다.

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

arr1.push(arr2);

document.write(arr1.length); // 4
document.write(arr1[0]); // 1 
document.write(arr1[1]); // 2
document.write(arr1[2]); // 3
document.write(arr1[3]); // [4, 5, 6]

push() 함수를 사용하여 배열을 합치면 파라미터로 전달된 배열을 하나의 원소로 처리한다.

위에서 파라미터로 전달된 배열은 arr1의 네 번째 원소가 된다. 즉, arr1의 길이는 6이 아니라 4이다.

push() 함수를 사용하여 두 여러 원소 구성의 배열을 합칠 때, concat() 함수를 사용한 것과 같이 파라미터로 전달된 배열의 원소 각각을 새로운 배열에 넣어서 합치기 위해 spread operator(...)를 사용해야 한다.

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

arr1.push(...arr2);

document.write(arr1.length); // 6
document.write(arr1[0]); // 1 
document.write(arr1[1]); // 2
document.write(arr1[2]); // 3
document.write(arr1[3]); // 4
document.write(arr1[4]); // 5
document.write(arr1[5]); // 6

spread operator(...)는 배열의 원소들을 쪼개어 각각의 개별요소를 반환한다는 점을 참고하자**