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

velog 블로그에서 tistory로 이전한 데이터 입니다. 2020-10-11

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

1) Key가 number일 때,

const obj = {};

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

2) Key가 String일 때,

const obj = {};

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

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

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

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

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

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

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

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

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

Map을 사용해보자

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

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

반면 아래와 같이 key가 string이면,

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

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

참고

https://ohgyun.com/764
https://stackoverflow.com/questions/43594092/slow-delete-of-object-properties-in-js-in-v8

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map/delete