히든클래스에 대해 잠깐 알아보자.
const obj = { a: 1 }
console.log(obj.a) // 1
자 우리가 위처럼 작성하였을 때, 자바스크립트 엔진은 저걸 어떻게 해석할까? 일단 obj의 주소를 찾아 갈 것이고, 그 주소에서 a를 찾게 될 것 이다.
자 그러면 a에는 어떤 정보가 있을까?
Object.getOwnPropertyDescriptor(obj, 'a')
{
configurable: true,
enumerable: true,
value: 1,
writable: true,
}
위와 같은 행위를 진행 하게 된다. 실제로는 저 a를 접근할 때, 페이로드가 꽤나 큰 비용이 든다.
하지만 매번 저렇게 진행을 할까? 꽤나 비싼 내용인데 말이다.
자바스크립트 엔진에서 동일한 모양을 동일한 Shape로 인식하게 되며, 위와같은 비용을 덜어낸다.
위에서 언급하였듯이 동일한 모양이다.
const obj0 = {} // C0
obj0.a = 'string' // C1
const obj = { a: 1 } // C1
위의 코드를 보면 obj0는 C0 Shape, obj0.a 를 추가하면 C1,
obj는 처음부터 a를 갖고 있기 때문에, C1이 되게 된다.
동적으로 속성을 추가하는 건 좋지 않게 된다. 추가적인 내용은 다음글로 알아보자.
댓글
댓글 쓰기