오늘은 jstips에서 첫 번째 팁인 배열에 요소 추가하는 방법을 공부했습니다.

저도 개발을 하다 보면 배열에 요소를 추가하는 작업을 많이 하게 되는데, push()를 사용해서 배열의 끝에 요소를 넣고, unshift를 사용해서 배열의 시작 부분에 요소를 넣고, splice를 사용해서 배열의 중간에 요소를 넣는 것은 알고 그렇게 작업을 했었습니다.
근데 jstips에서 글을 읽으면서 속도와 성능을 생각하면서 작업을 하는 것도 필요할 것 같다는 생각이 들었습니다.

귀찮은 분들을 위해 맨 아래에 결론을 적어놨습니다!

배열의 끝부분에 추가

---

배열의 끝에 요소를 추가하는 방법 중 제일 쉬운 방법은 push()를 사용하는 것인데, 다른 방법들도 있다.

var arr = [1,2,3,4,5];
var arr2 = [];

arr.push(6);
arr[arr.length] = 6;
arr2 = arr.concat([6]); // concat은 배열을 반환한다.

모바일에서의 성능

Android (v.4.2.2)

1. arr.push(6); and arr[arr.length] = 6; 비슷한 성능을 보인다. //3,319,694 ops/sec
2. arr2 = arr.concat([6[); 다른 두가지 방법보다 50ㅋ.61% 느리다.

Chrome Mobile (v33.0.0)

1. arr[arr.length] = 6; //6,125,975 ops/sec
2. arr.push(6); 66.74% 느리다.
3. arr2 = arr.concat([6]); 49.78% 느리다.

Safari Mobile (v9)

1. arr[arr.length] = 6; //7,452,898 ops/sec
2. arr.push(6); 40.19 % 느리다.
3. arr2 = arr.concat([6]); 49.78% 느리다.

최종 순위

1. arr[arr.length] = 6; //평균 5,632,856 ops/sec
2. arr.push(6); // 35.64% 더 느리다.
3. arr2 = arr.concat([6]); // 62.67% 더 느리다.

데스크탑에서의 성능

Chrome (v48.0.2564)

1. arr[arr.length] = 6; // 21,601,722 ops/sec
2. arr.push(6); 61.94 % 더 느리다.
3. arr2 = arr.concat([6]); 87.45% 더 느리다.

Firefox (v44)

1. arr[arr.length] = 6; //56,032,805 ops/sec
2. arr.push(6); 0.52 % 더 느리다.
3. arr2 = arr.concat([6]); 87.36% 더 느리다.

IE (v11)

1. arr[arr.length] = 6; //67,197,046 ops/sec
2. arr.push(6); 39.61 % 더 느리다.
3. arr2 = arr.concat([6]); 93.41% 더 느리다.

Opera (v35.0.2066.68)

1. arr[arr.length] = 6; // 30,775,071 ops/sec
2. arr.push(6); 71.60 % 더 느리다.
3. arr2 = arr.concat([6]); 83.70% 더 느리다.

Safari (v9.0.3)

1. arr[arr.length] = 6; //42,670,978 ops/sec
2. arr.push(6); 0.80 % 더 느리다.
3. arr2 = arr.concat([6]); 76.07% 더 느리다.

최종 순위

1. arr[arr.length] = 6; //평균 42,345,449 ops/sec
2. arr.push(6); //34.66 % 더 느리다.
3. arr2 = arr.concat([6]); //85.79% 더 느리다.

배열의 앞부분에 추가

---

var arr = [1,2,3,4,5];

arr.unshift(0);
[0].concat(arr);

여기서 주의할 점은 unshift는 원래의 배열을 수정하고, concat은 새로운 배열을 반환한다.

모바일에서의 성능

Android (v4.2.2)

1. [0].concat(arr); // 1,808,717 ops/sec
2. arr.unshift(0); 98.85% 더 느리다.

Chrome Mobile (v33.0.0)

1. [0].concat(arr); // 1,269,498 ops/sec
2. arr.unshift(0); 99.86% 더 느리다.

Safari Mobile(v9)

1. [0].concat(arr); // 3,250,184 ops/sec
2. arr.unshift(0); 33.67% 더 느리다.

최종 순위

1.[0].concat(arr); //평균 4,972,622 ops/sec
2.arr.unshift(0); // 64.70% 더 느리다.

데스크탑에서의 성능

Chrome (v48.0.2564)

1. [0].concat(arr); // 2,656,685 ops/sec
2. arr.unshift(0); 96.77% 더 느리다.

Firefox (v44)

1. [0].concat(arr); // 8,039,759 ops/sec
2. arr.unshift(0); 99.72% 더 느리다.

IE (v11)

1. [0].concat(arr); // 3,604,226 ops/sec
2. arr.unshift(0); 98.31% 더 느리다.

Opera (v35.0.2066.68)

1. [0].concat(arr); // 4,102,128 ops/sec
2. arr.unshift(0); 97.44% 더 느리다.

Safari (v9.0.3)

1. [0].concat(arr); // 12,356,477 ops/sec
2. arr.unshift(0); 15.17% 더 느리다.

최종 순위

1.[0].concat(arr); // 평균 6,032,573 ops/sec
2.arr.unshift(0); // 78.65% 더 느리다.

배열의 중간에 추가

---

배열의 중간에 요소를 삽입하는 방법중 splice가 제일 쉽고 가장 효율적인 방법이다.

var items = ['one','two','three','four'];
items.splice(itmes.length/2, 0,'hello');

결론

배열의 맨 뒤에 추가할 때는 arr[arr.length]를 사용.
배열의 맨 앞에 추가할 때는 concat을 사용.
배열 중간에 추가할 때는 splice을 사용.

참고
insert-item-inside-an-array
splice
concat
unshift
push