[JS] 객체 Map을 알아보자

Map이란?

키-값 쌍으로 데이터를 저장하는 콜렉션

• 문자열, 숫자, 함수까지 어떤 값이든 키로 사용할 수 있다.
  • 객체는 키로 문자열과 심볼만 사용할 수 있다.
• 데이터를 삽입한 순서를 보존하는, 반복 가능한 이터러블 객체다.
• 따라서 for of 루프, for in 루프, forEach() 메서드까지 사용할 수 있다.   
  • 객체는 이터러블하지 않다.
  • 키를 사용하는 for in 루프는 쓸 수 있지만, iteration protocol을 구현하지 않기 때문에 직접 반복할 수 없다. 따라서 iteration protocol을 구현하거나 Obj.keys() 메서드, Obj.entrues() 메서드를 사용해서 반복 가능한 항목을 얻을 수 있다.
• Size 프로퍼티로 크기를 바로 확인할 수 있다.
  • 객체는 객체의 크기를 나타내는 내장된 속성이나 메서드가 없어 해당 객체의 속성 개수나 요소의 개수로 객체의 크기를 판단했었다. Obj.keys() 메서드나 Obj.entries() 메서드로 배열을 얻고 그 배열의 length를 얻어서 짐작해왔다.
• 동일한 값을 가진 여러 키를 허용한다. 즉 중복된 값을 가지는 키-쌍을 저장한다.
  • Set과 차이가 있다.
• 다양한 메서드가 존재한다.
  • set() 메서드로 값을 추가하고, get() 메서드로 값을 가져오고, has() 메서드로 값의 유무를 확인하고, delete() 메서드로 키-값 쌍을 삭제한다. 

---

Map 객체 사용하기

Map 생성하기

Map() 생성자로 생성하되 오로지 new로만 생성할 수 있다.

const map = new Map()

const myMap = new Map([
  [1, "one"],
  [2, "two"],
  [3, "three"],
]);

 

Map.prototype.size

size 프로퍼티로 Map 객체의 요소 수를 반환한다.

일반 객체는 이렇게 할 수 없어 각 키, 각 값을 배열로 받고 그 배열의 길이로 확인했었다.

const myMap = new Map();
myMap.set('a', 'alpha');
myMap.set('b', 'beta');
myMap.set('g', 'gamma');

console.log(myMap.size); // 3

 

Map.prototype.set()

set() 메서드는 Map 객체에서 주어진 키와 값을 추가하거나 업데이트 한다.

const myMap = new Map();

// map에 새로운 요소를 추가합니다
myMap.set("bar", "foo");
myMap.set(1, "foobar");

// map에 요소를 업데이트 합니다
myMap.set("bar", "baz");

set을 호출할 때마다 맵 자신이 반환되는데, 그래서 이렇게 연속으로 사용(체이닝)할 수도 있다.

myMap.set("bar", "foo").set(1, "foobar").set(2, "baz");

기존에 객체에서는 아래와 같이 []로 접근하거나, 점 표기법으로 접근했었다.

const obj = {}

obj.key1 = 'val1'
obj['key2'] = 'val2'

 

Map.prototype.get()

get() 메서드는 Map 객체에서 키를 사용해 값을 반환한다.

Map에 존재하지 않는 키를 사용하면 undefined가 반환된다.

const myMap = new Map();
myMap.set("bar", "foo");

console.log(myMap.get("bar")); // "foo" 를 반환합니다.
console.log(myMap.get("baz")); // undefined 을 반환합니다.

 

Map.prototype.has()

has() 메서드는 Map 객체에 주어진 키에 해당하는 요소의 존재 여부를 불리언 값으로 반환한다.

const myMap = new Map();
myMap.set("bar", "foo");

console.log(myMap.has("bar")); // true
console.log(myMap.has("baz")); // false

객체에서는 비슷하게 hasOwnProperty() 메서드가 있다.

const myObject = {
  key1: 'value1',
  key2: 'value2'
};

console.log(myObject.hasOwnProperty('key1')); // true
console.log(myObject.hasOwnProperty('key3')); // false

 

Map.prototype.delete()

delete() 메서드는 키로 Map 객체에서 특정 요소를 삭제한다.

객체에서는 메서드가 아니라 delete 연산자로 삭제할 수 있다. (ex. delete myObject.key1;)

const myMap = new Map();
myMap.set('bar', 'foo');

console.log(myMap.delete('bar')); // true를 반환합니다. 성공적으로 제거되었습니다.
console.log(myMap.has('bar')); // false를 반환합니다. "bar" 요소는 더 이상 존재하지 않습니다.

 

for... of 루프

key, value 를 순회할 수 있다. 당연히 key만, value만 순회할 수도 있다.

const myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');

for (let [key, value] of myMap) {
  console.log(key, value);
  // key1 value1
  // key2 value2
}

---

해시 테이블을 공부하다가 Map까지 왔다.

키와 값 쌍의 데이터만을 다룬다면 Map이 조금 더 편한 것 같다.

일단 키로 아무 거나 할 수 있고, 사이즈도 알아내기 쉽고 순서도 있고...

 

**참고

맵과 셋

Map - JavaScript | MDN

제발 한국인이라면 자바스크립트 Object를 Map 처럼 사용하지 맙시다.