Map, Prototype [ TIL ] [ Javascript ]

 

Problem

강의를 듣고 학습하던중 Map 이 어떻게 돌아가는 녀석인지 궁금해져버렸다.

 

---

Try

 

const myMap = new Map();

console.log(myMap);

Map

Entries 와 Prototype 이 눈에 띈다. 찾아보니 Map 은 자바스크립트 내장객체인데 모든 자바스크립트 내장 객체는 프로토타입이라는 특수한 속성을 가지고 있다고 한다.

 

첫번째로 mdn 을 먼저 방문하여 prototype 에 대해 읽어보았다. 

대충 써있는것은

"정확히 말하자면 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype 이라는 속성에 정의되어 있습니다."
- mdn Javascript

저 글만보고는 이해가 되지 않는다.

 

코드를 조금더 적어보면 동작과정을 더 쉽게 알 수 있을까 하고 코드를 더 적어보았다.

console.log(myMap);
console.log(myMap.size);

myMap.set("value1", 123);
myMap.set("value2", 456);

console.log(myMap);
console.log(myMap.size);

 

호출되기 전에 Entries 에 들어가 있는 모습이다. 호출 될때 Map 의 객체로 복사되는 느낌이다.

 

이 코드가 실행되기 전부터 사이즈가 들어가 있는데 이것도 찍어봐야겠다. -> 콘솔을 더 찍어보니 코드로 적은 size 와 개발자 콘솔에서 보는 size 가 조금 다른것 같다. 개발자 콘솔에서 보이는 사이즈는 Entries 에 먼저 들어가있는 객체의 개수인 것 같다.

 

음 이건 넘어가고 프로토타입을 더 파야겠다.

블로그를 전전긍긍하다가 키워드를 발견했는데 "프로토타입 체인" 을 찾아보았다.

이 프로토타입 체인이 내가 궁금하던 문제를 해결해주었다.

 

 

---

Solve

저 부분을 찾아보았더니 

[[Prototype]] : Map // << 이 부분이 부모역할을 하는 객체를 가리키는 것 같다.

즉 객체의 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리킨다.

이제 mdn 에 나온 __proto__ 가 이해된다. 

 

prototype: 내가 원형일때 존재, 함수 객체만 가지고 있고, 생성자를 가지는 원형으로 선언 가능하다.

__proto__: 나의 원형을 가리킴, 모든 객체가 가지고 있고, 하나의 링크 같다.

// Map 인스턴스의 프로토타입 체인
console.log(myMap.__proto__); // Map.prototype
console.log(myMap.__proto__.__proto__); // Object.prototype
console.log(myMap.__proto__.__proto__.__proto__); // null

위의 코드는 Map 인스턴스(자신) -> Map.prototype -> Object.prototype -> null

즉, Map 인스턴스는 먼저 자신의 프로퍼티와 메서드를 확인하고 그 다음에 Map.prototype 에서 찾지 못한 경우 Object.prototype 에서 찾게 된다.

---

What I Learned

간단하게 Map 이 어떻게 생겼는가로 시작된 의문이 꼬리를 물어 프로토타입 체인까지 이어졌다.

프로토타입 체인에대해 배울수 있었고, 내장객체 즉 Map 이 아니더라도 sort 라던가 전부 프로토타입 체인이 형성되 있다는 것을 알 수 있었다.

프로토타입에 대해 찾아보던중 this 가 정말 많이 나왔었다. 주중에 this 를 알아보고 연관지어봐야겠다.