[심화] Object / Map 의 차이점은 뭘까?

Object / Map

Javascript Type

⸰ 원시 타입 : boolean,null,undifiend,number,string,symbol

⸰ 객체 타입 : 함수,배열,정규표현식등 원시 타입을 제외한 나머지

 

Object

⸰ Key :string,symbol

⸰ Key 순서 보장 X

⸰ Value 는 Key 를 통해서만 접근 가능 

⸰ for-in 문으로 반복문 수행 가능 (for-of 문 불가)

⸰ Symbol.iterator 구현 X

const person = {
  name: "yeHyun",
  gender: "female",
};

for (const prop in person) {
  console.log(prop + " : " + person[prop]);
}
/*
name : yeHyun
gender : female
*/

const test = {
  1: { a: 1, b: 1 },
  4: { a: 4, b: 4 },
  2: { a: 2, b: 2 },
  3: { a: 3, b: 3 },
};
console.log(test);
// 1:Object, 4:Object, 2:Object, 3: Object

const testValue = Object.keys(test);
console.log(testValue);
// ["1", "2", "3", "4"]

 

Object 의 Key 를 작성할 때 1, 4, 2, 3 순으로 작성하였지만, Object.keys( ) 메서드에서 배열로 반환될 때, 순서가 보장되지 않았다.

 

Object 의 Key 가 숫자이면, 오름차순 정렬로 출력

Object 의 Key 가 문자열이면, 작성 순서대로 출력

 

Map

⸰ Key :모든 값

⸰ Key 삽입 순서 기억

⸰ for-of 문으로 반복문 수행 가능 

⸰ Symbol.iterator 구현 O

const person = new Map();
person.set("name", "yeHyun");
person.set("gender", "female");

for (const prop of person) {
  console.log(prop);
}
/*
['name', 'yeHyun']
['gender', 'female']
*/

const map = new Map();
map.set(3, 'test1')
map.set(1, 'test2')
map.set(2, 'test3')

for(const v of map){
    console.log(v)
}
/*
[3, 'test1']
[1, 'test2']
[2, 'test3']
*/

 

Map 의 Key 값의 삽입 순서를 기억한다.