Object에 Property 설정 시 성능 고민하기

djunnni·2020년 10월 11일

Javascript

목록 보기

1/5

Object에 Property를 설정할 때 아래와 같은 경우가 일반적이다.

const obj = {};

for(let i = 0; i < 100000000, i++) {
	const key = i;
	obj[key] = i;
}

CASE 1

const obj = {};

for(let i = 0; i < 100000000, i++) {
	const key = 'key_' + i;
	obj[key] = i;
}

CASE 2

걸린 시간 부분만 보면 차이가 73배(CASE2 / CASE1) 라고 보인다.

이건 자바스크립트 객체가 저장될 때, 어떤 방식으로 저장되는지 알면 좋을 것 같다.
자바스크립트 Object 구조

배열, 키가 number인 객체는 Element로 저장되고 element store에 의해 관리된다.

반면, 키가 string인 객체는 Named Property에 저장되고 property store에 의해 관리된다.

v8은 객체에 새 프로퍼티가 생성될 때마다 히든 클래스를 생성하는데, 만약 두개의 객체가 프로퍼티의 구조와 추가 된 순서가 같다면 객체의 히든 클래스는 공유를 하게 된다.

Named Property는 3가지 방식으로 구성되는데

1) In-Object, Fast, Slow/dictionary 이다.

다음번에는 named property에 대해 적어보고 지금은 성능을 올릴 방법을 고민해 보자.

아까 해봤던 두가지 경우를 똑같이 map을 이용해서 적용해보자
CASE 1-1

Map을 사용할 때가 Object에 직접 값을 넣을 때 보다 느리다는 걸 알 수 있다.

반면 아래와 같이 key가 string이면,
CASE 2-1

오히려 차이가 약 2.3배(CASE2 / CASE2-1) 성능이 좋아질 수 있다.

MDN 예
만약 속도가 느리다면 Map을 사용해 보는 걸 추천한다.

https://djunnni.tistory.com/ 로 이전합니다.