JavaScript Map 과 Object 의 차이

Jinyong Park·2021년 7월 30일

JavaScript Map Map vs Object object

Javascript Type

Javascript에는 7개의 타입(ES6 기준으로)이 존재하는데 해당 타입들은 크게 원시타입과 객체 타입으로 분리된다.

원시타입

boolean
null
undefined
number
string
symbol

객체타입 (object/reference type)

object

Object

자바스크립트 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 모든 것이 객체라 할 수 있다. 원시 타입을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다.

자바스크립트 객체는 Key와 Value로 구성된 property 들의 집합이다. 프로퍼티의 값으로 자바스크립트에서 사용할 수 있느 모든 값을 사용할 수 있다. 객체는 데이터를 의미하는 property와 데이터를 참조하고 동작을 의미하는 method로 구성된 집합이다.

객체는 데이터와 그 데이터에 관련된 동작을 모두 포함할 수 있기 때문에 데이터와 동작을 하나의 단위로 구조화할 수 있어 유용하다.

프로퍼티

key의 제약조건

프로퍼티 키는 일반적으로 문자열을 지정한다. 프로퍼티 키에 문자열이나 symbol 이외의 값을 지정하면 암묵적으로 타입이 변환되여 문자열이 된다. 프로퍼티 키는 문자열이므로 따옴표를 사용하는데 자바스크립트 내의 예약어가 아닌 경우 따옴표를 생략할 수 있다.

→ 프로퍼티의 키는 문자열 또는 symbol이다.

value

프로퍼티 값은 모든 값과 표현식이 올 수 있으며 프로퍼티 값이 함수인 경우 이를 메소드라 한다.

반복

for-in 문을 사용하면 객체에 포함된 모든 포르퍼티에 대해 루프를 수행할 수 있다.

const person = { 
	'name' : 'namda',
	'gender' : 'male',
};

for(const prop in person){
	console.log(prop + " : " + person[prop]);
}

/*
name : namda
gender : male 
*/

→ key들의 순서는 보장되지 않는다.

(for of로는 반복문을 돌 수 없다.)

Map

자바스크립트 맵은 Object와 마찬가지로 key-value 로 구성된 data구조이며 해당 key들의 insertion에 대한 순서를 기억한다. key 값으로 어떠한 값도 사용할 수 있는데 object에서는 key 값으로 사용할 수 없었던 number와 같은 원시타입도 사용가능하다.

반복

for-of를 통해 반복할 수 있다.

const person = new Map();
person.set("name", "namda");
person.set("gender", "male");

for(const prop of person){
	console.log(prop);
}

/*
['name', 'namda']
['gender', 'male']
*/

	Map	Object
key Types	Map은 어떠한 값도 key로 가질 수 있다.	Object의 key는 String 또는 Symbol이어야 한다.
key Order	Map은 삽입한 순서대로 key가 정렬되어 있다. Map을 iterate할 경우 삽입된 순서대로 나온다.	Object의 key들은 현재는 순서대로 정렬되기는 하지만, 해당 순서들은 항상 보장되는 것은 아니며 Object property 순서에 의존하지 않는 것이 좋다.
Iteration	Map 은 이터러블하며 direct하게 iterate 할 수 있다.	Object는 iteration 프로토콜을 사용하지 않으며 따라서 direct 하게 iterate를 할 수 없다. (Object.keys 나 Object.entries 또는 for..in 구문을 사용하여야 한다)
performance	빈번한 key-value pair의 삽입과 삭제시 더 높은 performance를 가진다. get에서 object에 비해 performance가 느리다는 이야기가 있다.	key-value pair의 빈번한 추가 및 삭제에 대한 최적화가 되어있지 않다.
Serialization and parsing	No native support for serialization or parsing	JSON.stringify() 및 JSON.parse()를 지원한다.

Map data를 JSON으로 변환하기

JSON.stringify 와 JSON.parse는 각각 replacer 와 reviver 를 두번째 인자로 지원한다. replacer와 reviver를 통해 Map data를 파싱할 수 있다.

function replacer(key, value) {
  if(value instanceof Map) {
    return {
      dataType: 'Map',
      value: Array.from(value.entries()), // or with spread: value: [...value]
    };
  } else {
    return value;
  }
}

function reviver(key, value) {
  if(typeof value === 'object' && value !== null) {
    if (value.dataType === 'Map') {
      return new Map(value.value);
    }
  }
  return value;
}

const originalValue = new Map([['a', 1]]);
const str = JSON.stringify(originalValue, replacer);
const newValue = JSON.parse(str, reviver);