자바스크립트의 Object 와 Map 의 차이점에 대해서 얘기해보세요.

Object 와 Map 비교

• Object 는 이전부터 존재했다.
  • 여러 필드와 그에 맞는 데이터, 메서드를 가진 '객체' 로서 사용되기 위해 만들어졌다.
• Map 은 ES6 에서 새롭게 도입되었다.
  • key 와 value 쌍을 가진 데이터를 손쉽게 다루기 위한 것이 기본 목적이다.

차이

Object 와 Map 은 얼핏보면 Object 가 Map 의 상위호환으로 느껴질 수 있다. 그러나, Object 와 Map 은 특징에 따른 명백한 차이가 있다.

객체의 key 는 String 혹은 Symbol 만 가능하다.

const obj1 = {};
const obj2 = {};

const o = {
  [obj1]: "obj1",
  [obj2]: "obj2",
};

console.log(o); // {[object Object]: 'obj2'}

const map = new Map();

map.set(obj1, "obj1");
map.set(obj2, "obj2");

console.log(map); // Map(2) {{…} => 'obj1', {…} => 'obj2'}
console.log(map.get(obj1)); // obj1

• 객체에 key 로서 Object 를 넣으면, toString() 의 결과인 [object Object] 문자열이 key 가 된다.
• 반면, Map 에는 key 로 Object 를 넣으면, Object 자체가 key 가 될 수 있다.

의도치 않은 상속

• Map 은 명확히 set() 이라는 메서드를 통해 데이터를 삽입한다.
• Object 는 단순 프로퍼티 접근 방식으로 데이터를 삽입한다.

내가 삽입한 프로퍼티와 prototype 에 의해 자동으로 상속된 프로퍼티를 구분하기 힘들어질 수도 있다.

이름 충돌

프로퍼티 접근 방식으로 데이터를 삽입하게 되면, prototype 에 대한 의도치 않은 쉐도잉과 같은 문제가 발생할 수 있다.

그럴 일은 적겠지만, 실수로 hasOwnProperty 라는 이름의 프로퍼티에 값을 덮어씌운다면, prototype 에서 제공하는 hasOwnProperty 에 접근하는 나이브한 코드가 정상적으로 작동하지 않을 수 있다.

// ...
obj.hasOwnProperty(x); // 기존에 사용하던 코드

obj.hasOwnProperty = "xxx"; // 재정의

Object.hasOwnPrototype.call(obj, key); // 예방 코드

위 경우는 Object.hasOwn() 이라는 간결한 새 메서드를 사용하면 아무런 문제 없다.

Object 의 나쁜 사용성 1: size()의 부재

• Map 에는 size() 라는 크기를 구하는 의도가 명확한 메서드가 존재한다.
• Object 는 열거 가능한 프로퍼티를 배열로 뽑아내는 Object.keys() 와 같은 메서드와 함께 .length 를 사용할 수는 있지만, 명확히 프로퍼티의 사이즈가 몇인지 구하는 메서드가 없으며, 프로퍼티의 사이즈를 구한다는 개념 자체도 애매하다.

Object 의 나쁜 사용성 2: 반복

• Object 는 for ... in 혹은 Object.keys(), Object.values(), Object.entries() 를 통해 반복이 가능하지만, 추가적인 오버헤드가 필요하다.
  • 또한 for ... in 은 상속받은 열거 가능한 속성도 순환에 포함시키므로 혼란을 줄 수 있다.
  • Symbol.iterator 가 구현되어있지 않아서, for ... of 구문을 사용할 수 없다.
• Map 은 Symbol.iterator 가 명확하게 구현되어 for ... of 등의 구문을 사용할 수 있다.

Object 의 나쁜 사용성 3: 제거

• Object 는 delete operator 를 통해 일일이 속성을 제거해야 하며, 한번에 제거하는 명령이 따로 있지 않다.
• Map 은 Map.prototype.delete() 메서드를 통해 하나씩 키를 지울 수도 있고, Map.prototype.clear() 라는 명확한 메서드를 통해 모든 속성을 제거할 수도 있다.

Object 의 나쁜 사용성 4: 속성 존재 확인

• Object 는 속성의 존재 확인이 가끔 모호하다. const obj = {a: undefined} 라는 객체가 있다면, obj.a 의 undefined 라는 결과는 속성이 있어서 undefined 인지 값이 undefined 인지 구분하기 모호하다.
• 반면 Map 에는 존재 여부를 명확히 반환하는 has() 메서드가 존재한다.

성능 차이

• 성능도 일반적으로 Map 이 더 좋다.
  • 메모리와 연산속도 모두 Map 이 보통 우수하다.
  • 그러나 정수를 키로 하는 오브젝트의 경우, 속성의 수가 적을 때는 Object 가 더 빠르다.

레퍼런스

MDN 문서 - Map
oneook - 번역-자바스크립트-Map을-Object-대신-사용해야할-때는-언제일까요
https://www.zhenghao.io/posts/object-vs-map#map-for-hash-map