[JavaScript] Object와 Map의 차이점과 사용 시점을 알아보자!

코딩하는계란·2021년 7월 22일
1

JavaScript

목록 보기
1/1
post-thumbnail

js를 공부하다 보니 파이썬의 dictionary가 보고싶을 때가 많았는데
js에서는 비슷하게 Object와 Map을 사용한다.
이번에는 이 둘의 차이점과 사용 시점에 대해 알아보려한다.


object와 Map 뭐가 달라?

일단 둘의 특징부터 알아보고 가자!

object 특징

  • object는 key값으로 String만 사용가능하다.
  • object는 순서를 보장하지 않는다.
  • 수동으로 크기를 구해야한다.
    ex) Object.keys(obj).length
  • object는 프로토타입을 가지기 때문에 유의하여 사용해야한다.

Map 특징

Map객체는 ECMAScript 6에서 값들을 매핑하기 위해 나온 새로운 데이터 구조이다.

  • Map은 키값으로 모든 값을 가질 수 있다.
  • Map은 삽입된 순서대로 반복된다 => 안정성 보장
  • size 속성을 통하여 쉽게 크기를 구할 수 있다.

사용예시

const m1 = new Map()
m1.set(1, new Map())
m1.get(1).set(1, "test")
console.log(m1) 				// Map(1) { 1 => Map(1) { 1 => 'test' } }
console.log(m1.get(1).get(1))			// test
// Map 안에 Map을 사용할 수 도 있다.
// 물론 안에 object를 넣어서 사용도 가능하다.

언제 뭘 쓸까??

그래서 언제 뭐가 쓰는게 좋은거야? 그냥 object 쓰면되는거 아냐?

Object와 Map 사용 시점 판단

MDN 문서에서는 다음과 같이 설명한다.

  • 실행 시까지 키를 알수 없고, 모든 키가 동일한 type이며 모든 값들이 동일한 type일 경우에는 objects를 대신해서 map을 사용해라.
  • 각 개별 요소에 대해 적용해야 하는 로직이 있을 경우에는 objects를 사용해라.

Object 사용 시점

  • 각 요소에 대해서 별도의 로직이 필요한 경우

Map 사용 시점

  • key와 value가 각각 같은 타입인 경우
  • 런타임까지 key가 정해지지 않은 경우
  • 데이터의 크기가 큰경우 (일반적으로 더 좋은 성능을 보인다고 한다)
  • 안정성을 유지해야 할때 (순서의 보장)

reference

https://developer.mozilla.org/ko/docs/orphaned/Web/JavaScript/Guide/Keyed_collections
https://kellis.tistory.com/129

profile
코딩💻 고양이😺

4개의 댓글

comment-user-thumbnail
2021년 7월 22일

좋은 글 잘 읽고 갑니다!

1개의 답글
comment-user-thumbnail
2021년 8월 5일

잘보고 갑니다 !! 감사합니다 : )

1개의 답글