B24: 맵과 셋(map & set) 객체

목차

1. 맵과 셋의 등장 배경

2. 맵 (map)

    2-1. 주요 메서드/프로퍼티

    2-2. map의 동작 특징

    2-3. 맵의 요소에 반복 작업하는 메서드 : keys(), values(), entries()

    2-4. 객체 ↔ 맵 : Object.entries, Object.fromEntries

3. 셋 (set)

    3-1. 주요 메서드

    3-2. 셋의 요소에 반복 작업하는 메서드 : keys(), values(), entries()

---

1. 맵과 셋의 등장 배경

지금까지 자료구조 객체와 배열을 보았다.

하지만 현실 세계를 반영하기엔 객체와 배열로 부족해서 map과 set이 등장한다.

 

간단하게 차이점을 보자.

• 객체 : 키(key)가 있는 컬렉션을 저장
• 배열 : 순서가 있는 컬렉션을 저장
• 맵(map) : 키(다양한 자료형 허용)를 가진 컬렉션을 저장
• 셋(set) : 중복을 허용하지 않는 컬렉션을 저장 (키 없음)

---

2. 맵 (map)

키(key)가 있는 데이터를 저장한다는 점에서 객체와 유사하나, 키에 다양한 자료형을 허용한다는 차이점이 있다.

 

1. 주요 메서드/프로퍼티 ✅

메서드/프로퍼티	역할
new Map()	맵을 생성
map.set(key, value)	key로 value를 저장
map.get(key)	key에 해당하는 값을 반환 (존재하지 않는 키는 undefined 반환)
map.has(key)	key가 존재하면 true, 존재하지 않으면 false 반환
map.delete(key)	key에 해당하는 값을 삭제
map.clear()	맵 안의 모든 요소를 제거
map.size()	요소의 개수를 반환

 

let john = { name: "John" };

let map = new Map();

map.set('1', 'str1');	// 문자형 키
map.set(1, num);	// 숫자형 키
map.set(true, 'bool1');	// 불린형 키
map.set(john, 123);	// 객체형 키

console.log(map.get(1));	// 'num1'
console.log(map.get('1'));	// 'str1'
console.log(map.get(john));	// 123
console.log(map.size);	// 3

여러 가지 자료형을 키로 허용하기 때문에

객체와 다르게 키의 타입을 문자형으로 변환시키지 않고 그대로 유지한다.

 

객체를 키로 사용할 수 있다는 것도 맵의 주요 기능 중 하나이다.

객체에서는 객체 키를 사용할 수 없었다.

let john = { name: "John" };
let obj = {};

obj[john] = 123;

console.log(obj["[object Object]"] );	// 123
// 원하는 값 123을 얻기 위해서는 키가 들어갈 자리에 object Object를 작성해야 함

객체에서 객체를 키로 사용하면 모든 키를 문자형으로 변환시키기 때문에 john이 문자형 "[object Object]"로 변환된다.

 

2. map의 동작 특징 ✅

1) 키 비교 방식

맵은 SameValueZero라는 내장 알고리즘을 사용해 값의 등가 여부를 확인한다.

SameValueZero는 일치 연산자( === )와 거의 유사하나, NaN과 NaN을 일치하다고 취급한다는 차이가 있다.

따라서 맵에서는 NaN도 키로 사용할 수 있다.

 

2) 체이닝

map.set을 호출할 때마다 맵 자신이 반환된다.

이를 이용해 map.set을 체이닝(chaining)할 수 있다.

map.set('1', 'str1')
    .set(1, 'num1')
    .set(true, 'bool1');

 

3) 삽입 순서의 기억

맵은 값이 삽입된 순서를 기억한다. (순회에 사용)

객체는 프로퍼티 순서를 기억하지 못하는 것과 차이가 있다.

 

 

3. 맵의 요소에 반복 작업하는 메서드 : keys(), values(), entries() ✅

아래 3가지 메서드를 사용해 맵의 각 요소에 반복 작업을 할 수 있다.

메서드	동작
map.keys()	각 요소의 키를 모은 iterable 객체를 반환
map.values()	각 요소의 값을 모은 iterable 객체를 반환
map.entries()	요소의 [키, 값]을 한 쌍으로 하는 iterable 객체를 반환

+ 추가로 내장메서드 forEach도 지원한다.

 

let recipeMap = new Map([
  ['cucumber', 500],
  ['tomatoes', 350],
  ['onion', 50]
]);

// map.keys()
for(let vege of recipeMap.keys()) {
  console.log(vege);	// cucumber, tomatoes, onion
}

// map.values()
for(let amount of recipeMap.values()) {
  console.log(amount);	// 500, 350, 50
}

// map.entries()
for(let entry of recipeMap.entries()) {	// .entries() 안붙여도 됨
  console.log(entry);	// [cucumber,500], [tomatoes,350], ...
}

// forEach()
recipeMap.forEach((value, key, map) => {
  console.log(`${key}: ${value}`);	// cucumber: 500, tomato: 350, ...
};

 

4. 객체 ↔ 맵 : Object.entries, Object.fromEntries ✅

내장 메서드를 활용해서 객체와 맵을 서로 바꿀 수 있다.

• Object.entries : 객체 → 맵
• Object.fromEntries : 맵 → 객체

// Object.entries : 객체 → 맵
let obj = {
  name: "John",
  age: 30
};

let map = new Map(Object.entries(obj));
console.log(map(get('name'));	// John

// Object.fromEntries : 맵 → 객체
let map = new Map();
map.set('banana', 1);
map.set('orange', 2);
map.set('meat', 3);

let obj = Object.fromEntreis(map.entries());  // 맵을 일반 객체로 변환(entries() 생략 가능)

console.log(obj.orange);	// 2

 

 

---

3. 셋 (set)

 set은 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션으로, 키가 없는 값이 저장된다.

 

1. 주요 메서드 ✅

메서드	역할
new Set(iterable)	이터러블 객체(보통 배열)를 전달 받아 셋을 생성
set.add(value)	값을 추가하고 자기 자신을 반환
set.delete(value)	value에 해당하는 값을 제거, 성공 시 true, 실패 시 false 반환
set.has(value)	셋 내에 값 존재 시 true, 아니면 false 반환
set.clear()	셋 안의 모든 요소를 제거
set.size	요소의 개수를 반환

 

set은 중복을 허용하지 않으므로, set.add(value)를 여러본 호출해도 중복 추가가 되지 않는다.

let set = new Set();

let john = { name: "John" };
let pete = { name: "Pete" };
let mary = { name: "Mary" };

set.add(john);
set.add(pete);
set.add(mary);
set.add(john);
set.add(pete);

console.log(set.size);	// 3
for(let user of set) {
  console.log(user.name);	// John, Pete, Mary
}

 

배열 메서드인 arr.find를 이용하여 중복 값 여부를 확인할 수 있으나, set보다 성능이 떨어진다.

 

 

2. 셋의 요소에 반복 작업하는 메서드 : keys(), values(), entries() ✅

아래 3가지 메서드를 사용해 셋의 각 요소에 반복 작업을 할 수 있다.

메서드	동작
map.keys()	각 요소의 키를 모은 iterable 객체를 반환
map.values()	각 요소의 값을 모은 iterable 객체를 반환
map.entries()	요소의 [키, 값]을 한 쌍으로 하는 iterable 객체를 반환

+ 추가로 내장메서드 forEach도 지원한다.

 

 

 

 

 

참고

https://ko.javascript.info/map-set

맵과 셋