[javascript] 배열에 다른 배열의 데이터를 추가하는 방법

관련지식
javascript, array

아래와 같이 두개의 배열이 있을때 한쪽의 데이터를 다른 변수에 넣는 몇가지 방법을 비교해 보겠습니다. 상황에 따라 적절하게 사용하는것이 제일 중요하겠죠.

let data = [
  'eee',
  'fff',
  'ggg'
];
let tmp = [
  'aaa',
  'bbb',
  'ccc',
  'ddd'
];

push() 함수 사용

어쩌면 가장 많이 사용할 방법이네요. 불필요하게 루프를 더 실행하는게 별로지만, 만약 특정 조건에 맞는 데이터만 넣어야 한다면 최선의 방법입니다. for 구문대신 foreach() 함수를 사용할수도 있습니다.

for(let i = 0; i < data.length; i++) {
  tmp.push(data[i]);
}

push() 의 apply 호출

만약 모든 데이터를 넣는 경우라면, 위에 방식처럼 불필요한 루프를 실행할 필요가 없습니다. 단 한줄이면 가능하죠.

Array.prototype.push.apply(tmp, data);

push() 함수 자체는 복수개의 값을 인자로 받을수 있기 때문에 그것을 이용한 방법입니다. 하지만 일정 갯수 이상의 데이터를 인자로 넘기게 되면 ‘Maximum call stack size exceeded’ 오류가 발생합니다.(브라우저별로 다름) 1만개 이내의 데이터는 문제가 없겠지만 10만개 이상의 데이터를 사용할 경우엔 오류가 발생할 수도 있습니다.

concat() 사용

그런데 단순히 배열과 배열을 합치는것 뿐이라면 push() 함수를 사용하는게 아니라 concat() 함수를 사용하는게 맞습니다.

tmp = tmp.concat(data);

성능도 좋고 명확한 의미의 소스가 되죠. 그런데 만약 위의 tmp라는 변수가 Vue.js나 Angular 같은 프레임워크에서 사용되는 변경감지되는 변수라면, 위의 코드는 감지가 안되기 때문에 변경감지를 위한 코드를 추가해야하죠. push() 함수를 사용했다면 문제가 없었을 부분입니다.