[JS] Map Object (맵 객체)

소재헌·2022년 11월 17일

JavaScript MegabyteSchool 개발자취업부트캠프 국비지원교육 내일배움카드 메가바이트스쿨 패스트캠퍼스

Javascript

목록 보기

4/5

자바스크립트의 객체(Object) 자료형은 개발을 하면서 많이 쓰인다. 값을 키와 값으로 묶어 저장하고 조회하는 기능이 유용하고 필요하기 때문이다. 이번 포스트에서는 자바스크립트 객체를 좀 더 발전시킨 ES6 문법인 Map Object (맵 객체)에 대해 알아보자.

1. 삽입

// set으로 삽입
let eric = new Map();
eric.set('id', 0);
eric.set('name', 'eric');
eric.set('age', 25);
console.log(simba);      // {'id' => 0 'name' => 'eric', 'age' => 25}

// 2차원 배열로 넘겨주기
let simba = new Map([
  ['id', 1],
  ['name', 'simba'],
  ['age', 10],
]);
console.log(simba);      // {'id' => 1, 'name' => 'simba', 'age' => 10}

Map 객체는 set 메소드를 사용하여 키와 값을 삽입한다. 또 다른 방법으로는 Map 객체를 생성할때 2차원 배열을 이용해서 키와 값을 삽입할 수 있다.

2. 조회

let simba = new Map([
  ['id', 1],
  ['name', 'simba'],
  ['age', 10],
]);
// get으로 조회
console.log(simba.get('name'));  // "simba"
console.log(simba.get('age'));  // 10
console.log(simba.get('weight'));  // undefined

Map 객체는 get 메소드를 사용하여 값을 조회한다. 인수로 키를 주면 그에 해당하는 값을 반환한다. 만약 키가 존재하지 않으면 undefined를 반환한다.

3. 삭제

let simba = new Map([
  ['id', 1],
  ['name', 'simba'],
  ['age', 10],
]);
// delete로 삭제
simba.delete('age');  
console.log(simba); // {'id' => 1, 'name' => 'simba'}

// clear로 맵 안의 key,value 전부 삭제
simba.clear(); 
console.log(simba);   // {}

Map 객체는 delete 메소드를 사용하여 키와 값을 삭제한다. 인수로 키를 주면 그에 해당하는 키와 값을 삭제한다. 삭제를 성공하면 true를 , 실패하면 false를 반환한다.

추가로 clear 메소드는 Map 객체 안의 있는 모든 키와 값들을 삭제한다.

4. 일반 객체와의 차이

Map 객체와 일반 객체의 가장 큰 차이점은 Map 객체의 경우 문자열 아닌 값도 키로 사용 가능하다는 점이다. 일반 객체에서는 문자열(String) 혹은 심볼(Symbol)만 키로 사용할 수 있지만 Map 객체에서는 숫자, 함수, 객체를 포함한 모든 자료형이 키로 쓰일 수 있다.

let obj = {
  1 : 'one',
  2 : 'two',
  3 : 'three'
}

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
])

console.log(obj.1) // unexpected number 에러
console.log(obj['1']) // 'one'
console.log(map.get(1)) // 'one'

5. 순회

let simba = new Map([
  ['id', 1],
  ['name', 'simba'],
  ['age', 10],
]);

console.log(simba.entries());
// MapIterator { ['id', 1],['name', 'simba'],['age', 10]}

for (const [key, value] of simba) {
  console.log(key, value);
}   /*
      'id' 1
      'name' 'simba'
      'age' 10
    */