Javascript Array, Object Spread 속도 비교

React 애플리케이션을 개발할 때

Array 타입 상태를 변경할 때는 Array로 된 데이터를 spread 하거나 map 이라는 immutable 함수를 자주 사용한다.

그러던 중 가끔 드는 생각이, 하나의 데이터만을 수정하고 싶을 뿐인데, 굳이 map 으로 전체 object 를 순회할 필요가 있는가? 라는 물음이다. Object로 데이터를 구성하여 key 접근을 통해 hash와 같은 속도로 데이터를 처리하면 좋지 않은가?

답은, '그렇지 않다'이다. 어차피 immutable 하게 새로운 데이터의 참조를 뱉어내기 위해서는, 전체 아이템을 순회하는 spread 로직을 사용할 수밖에 없다. 그리고 배열 관련 연산 속도가 훨씬 빠르며, 아이템의 갯수가 많아져도 무시가 가능한 처리속도를 보여준다. 아래의 실험 결과를 보자.

let bigArray = new Array(10000000).fill(0);

console.time('mapTime');
let copiedBigArray = bigArray.map(item => item);
console.timeEnd('mapTime');
// mapTime: 261.708ms

// *******************************************

let bigObject = {...bigArray};

console.time('objSpreadTime(Spread)');
let copiedBigObjectWithSpread = {...bigObject};
console.timeEnd('objSpreadTime(Spread)');
// objSpreadTime: 7491.412ms

// *******************************************

console.time('objSpreadTime(Assign)');
let copiedBigObjectWithAssign = Object.assign({}, bigObject);
console.timeEnd('objSpreadTime(Assign)');
// objSpreadTime(Assign): 8831.420ms

배열의 요소 갯수가 1천만건인데도 0.5초도 안걸린다. 클라이언트단에서 1천만건의 데이터를 렌더링 할 일도 없다. 반면 object의 spread 속도는 초단위로, 충분히 성능에 문제가 생길 수 있는 수치이다.

결론은, 여러가지 배열 연산 성능 걱정하지 말고 마음껏 쓰자.