[JS] Object와 Map, 무엇을 선택해야 할까?

들어가며

자바스크립트에서 데이터를 효율적으로 다루기 위해 다양한 데이터 구조를 사용하는데요. 그중 키-값 쌍을 저장할 때 쓰이는 Object와 Map이 있습니다.

 

이번 시간에는 Object와 Map이 무엇이 다르고, 선택하는 데 있어 도움이 될 기준에 대해 알아보도록 하겠습니다.

 

같아보여도 다르다

Object는 Map과 많이 유사한데요. 두 데이터 구조 모두 키-값 쌍을 저장, 조회, 삭제할 수 있습니다.

다만 몇 가지 주요한 차이점도 존재합니다.

 

	Map	Object
Accidental Keys	기본 키가 존재하지 않습니다. 사용자가 명시적으로 추가한 키만 포함됩니다.	프로토타입을 가지므로 기본 키들이 존재합니다. 이로 인해 사용자 정의 키와 충돌할 가능성이 있습니다. ( Object.create(null)로 이 문제를 수행할 수 있지만, 거의 수행되지 않습니다.)
Security	사용자 제공 키 및 값에 대해 안전하게 사용가능합니다.	사용자가 제공한 키-값 쌍을 설정할 때, 공격자가 object의 프로토타입을 덮어쓸 수 있으며, 이로 인해 object injection attacks가 발생할 수 있습니다. accidental keys 이슈와 마찬가지로, 이 문제도 null-prototype object를 사용해 완화할 수 있습니다.
Key Types	키 타입에 제한이 없습니다.	키 타입으로 String 또는 Symbol만 가능합니다.
Key Order	삽입 순서를 유지합니다.	삽입 순서를 항상 유지하지는 않습니다. 내부적인 기준에 따라 처리합니다.
Iteration	iterable합니다.	iterable하지 않습니다. 다만, for..in, Object.keys(), Object.entries()를 통해 순회할 수 있습니다.
Performance	데이터를 자주 추가하고 제거할 때 성능이 더 좋습니다.	데이터를 자주 추가하고 제거하는 데 최적화되지 않았습니다.
Serialization and parsing	기본적으로 지원하지 않습니다.	JSON.stringify()와 JSON.parse()를 통해 기본적으로 지원합니다.

 

그래서 선택은?

각각 다음과 같은 상황에서 유리할 수 있습니다.

• Object
  • 간단한 구조를 다룰 경우
  • 데이터 전송이 필요할 경우
• Map
  • 복잡한 구조나 대량의 데이터를 처리할 경우
  • 타입 제한 없이 키를 사용할 경우
  • 데이터의 추가나 삭제가 자주 발생할 경우
  • 삽입 순서를 유지해야 할 경우

 

마치며

Object와 Map 둘 모두 키-값 쌍을 저장하는 데이터 구조로 유사한 부분이 많습니다. 다만 주요한 차이점이 몇 가지 있으니 상황에 맞춰서 더 유리한 구조를 선택하시는 것이 좋습니다.

 

지적이나 다른 의견은 언제나 환영합니다 :D

감사합니다.

 

References

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map