JavaScript Object Property Lookup이란 (자바 스크립트 객체가 property를 찾는 순서)

ㅇㄱ ㅈㅉㅇㅇ???

 

Javascript를 보면 위와 같은 충격적인 상황을 마주할 수 있다.

 

이것이 가능한 이유는 JavaScript는 모든 것이 객체이고 객체의 property를 찾을때 자바스크립트 엔진은 spec에 근거한 lookup 과정을 거치기 때문이다.

 

배열의 arr[index] 접근도 일반 객체의 property lookup과 같은 규칙을 따르기 때문이다. property lookup이라 함은 특정한 객체의 property를 찾는 과정을 의미하는데, 자바스크립트의 특정 객체 인스턴스의 property를 탐색하는 순서가 있다.  

1. obj 자체에 property 있는지 확인
2. 없으면 obj.[[Prototype]] 로 이동
3. 거기서 property 찾기
4. 계속 반복
5. 끝까지 없으면 undefined

이게 property를 찾는 순서인데, 이 과정을 property lookup이라고 부른다.

 

Prototype-based Inheritance

Prototype이랑 property랑 단어가 비슷해서 헷갈리지 집중해서 보자.

javascript는 prototype-based inheritance를 디자인 패턴으로 채택했다.

 

https://juntheworld.tistory.com/247

Javascript의 객체와 prototype inheritance(프로토타입 기반 상속)

 

자바스크립트의 모든 객체(배열 포함)는 내부적으로 다른 객체를 가리키는 [[Prototype]]이라는 포인터를 가지고 배열의 경우, 그 [[Prototype]]이 Array.prototype 이다.

 

┌──────────────┐
│ 배열 arr1    │  ┐
├──────────────┤  │
│ length: 0    │  │ arr1 객체
│ [[Prototype]]:──┼─→ 같은 메모리 주소 가리킴
└──────────────┘  │
                  │
┌──────────────┐  │
│ 배열 arr2    │  │
├──────────────┤  │
│ length: 0    │  │ arr2 객체
│ [[Prototype]]:──┼─→ (같은 Array.prototype)
└──────────────┘  │
                  │
        ↓ 모두 가리키는 곳
┌────────────────────┐
│ Array.prototype    │  (하나만 메모리 존재)
├────────────────────┤
│ push: function     │
│ pop: function      │
│ slice: function    │
│ ...배열 메서드들   │
└────────────────────┘

 

Property Lookup

이걸 생각하고 위의 코드를 다시 보면

arr[0] → 없음 → Array.prototype[0] → 있음(999 가져옴)

이런 식으로 동작한 것이다.

arr
├─ elements: []
├─ length: 0
└─ [[Prototype]]: ──┐
                    ↓
         Array.prototype
         ├─ '0': 999  ← 이걸 찾음!
         ├─ 'length': (함수)
         ├─ 'push': (함수)
         └─ [[Prototype]]: Object.prototype

 

property를 찾는 obj에 never assigned element (arr[0]) 가 있어도(즉, property가 없어도)

javascript는 spec 상으로 prototype chain을 찾아보게 설계되어있다.