[자바스크립트] Map과 Set

 

맵과 셋

• 객체 : 키가 있는 컬렉션을 저장
• 배열 : 순서가 있는 컬렉션을 저장

 

 

맵(Map)

• 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
• 키가 있는 데이터를 저장한다는 점에서 객체와 유사하다.
• 맵은 키에 다양한 자료형을 허용한다는 점에서 차이가 있다.
• 즉, key-value의 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 컬렉션이다.
• 맵은 객체와 달리 키를 문자형으로 변환하지 않는다.
• 키에 자료형 제약이 없다.

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

//---------------------------------------------------
const days = ["Mon", "Tue", "Wed", "Thurs", "Fri"]
const smilingsDays = days.map(potato => console.log(potato)); //순서대로 출력
console.log(smilingsDays) // [undefined, undefined, undefined, undefined, undefined]

// Why?
// smilingsDays은 potato => console.log(potato) 함수를 실행하고 각각의 함수의 결과 값으로 배열을 만든다. 그 함수의 return은 undefined이다.



// what if
const days = ["Mon", "Tue", "Wed", "Thurs", "Fri"]
const smilingsDays = days.map(potato => `😀 ${potato}`); 
console.log(smilingsDays)
//["😀 Mon", "😀 Tue", "😀 Wed", "😀 Thurs", "😀 Fri"]
//  `😀 ${potato}`이 부분이 return 하고 있기 때문이다.
// 배열 함수는 return을 함축적으로 가지고 있다. 그래서 함수에 return 값을 가지고 있으면 된다.

//리팩토링
const days = ["Mon", "Tue", "Wed", "Thurs", "Fri"]
const addSmile = day => `😀 ${potato}`
//const smilingsDays = days.map(day => addSmile); 
const smilingsDays = days.map(addSmile); // 이렇게 사용 가능

//--------------------------------------------
// map은 하나의 인자만 전달하지 않는다. 여러 개의 인자를 전달 할 수 있다.
const days = ["Mon", "Tue", "Wed", "Thurs", "Fri"]
const smilingsDays = days.map((day, index) => `#${index}  ${day}`); 
console.log(smilingsDays) //["#0  Mon", "#1  Tue", ....]

 

맵 주요 메서드와 프로퍼티

• new Map()
  • 맵을 만든다.
• map.set(key, value)
  • key를 이용해 value를 저장한다.
• map.get(key)
  • ``key`에 해당하는 값을 반환한다.
  • key가 존재하지 않으면 undefined를 반환
• map.has(key)
  • key가 존재하면 true, 존재하지 않으면 false를 반환
• map.delete(key)
  • key에 해당하는 값을 삭제
• map.clear()
  • 맵 안의 모든 요소를 제거
• map.size
  • 요소의 개수를 반환

let map = new Map();

map.set('1', 'str1');   // 문자형 키
map.set(1, 'num1');     // 숫자형 키
map.set(true, 'bool1'); // 불린형 키

// 객체는 키를 문자형으로 변환했지만
// 맵은 키의 타입을 변환시키지 않고 *그대로 유지*합니다.
// 그래서 1과 "1"이 출력되는 값이 다르다.
alert( map.get(1)   ); // 'num1'
alert( map.get('1') ); // 'str1'

alert( map.size ); // 3

 

⚠️ map[key]는 Map을 쓰는 바른 방법이 아니다.

• 이렇게 사용하면 map을 일반 객체처럼 취급하게 된다.
• map을 사용할 때는 map 전용 메서드인 set, get 등을 사용해야만 한다.

 

 

맵은 키로 객체를 허용한다.

let john = { name: "John" };

// 고객의 가게 방문 횟수를 세본다고 가정
let visitsCountMap = new Map();

// john을 맵의 키로 사용
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123

• 객체를 키로 사용할 수 있다는 점이 맵의 가장 중요한 기능 중 하나이다.

 

객체형 키를 객체에 써보자

let john = { name: "John" };

let visitsCountObj = {}; // 객체 생성

visitsCountObj[john] = 123; // 객체(john)를 키로 해서 객체에 값(123)을 저장

// 원하는 값(123)을 얻으려면 아래와 같이 키가 들어갈 자리에 `object Object`를 써줘야한다.
alert( visitsCountObj["[object Object]"] ); // 123

• visitsCountObj는 객체이기 때문에 모든 키를 문자형으로 변환시킨다.
• 이 과정에서 john은 문자형으로 변환되어 "[object Object]"가 된다.

 

 

맵의 요소에 반복 작업하기

• map.keys()
  • 각 요소의 키를 모은 반복 가능한(iterable, 이터러블) 객체를 반환한다.
• map.values()
  • 각 요소의 값을 모은 이터러블 객체를 반환한다.
• map.entries()
• 요소의 [키, 값]을 한 쌍으로 하는 이터러블 객체를 반환한다.
• 이 이터러블 객체는 for..of반복문의 기초로 쓰인다.

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

// 키(vegetable)를 대상으로 순회
for (let vegetable of recipeMap.keys()) {
  alert(vegetable); // cucumber, tomatoes, onion
}

// 값(amount)을 대상으로 순회
for (let amount of recipeMap.values()) {
  alert(amount); // 500, 350, 50
}

// [키, 값] 쌍을 대상으로 순회
for (let entry of recipeMap) { // recipeMap.entries()와 동일
  alert(entry); // cucumber,500 ...
}

 

🔔 맵은 삽입 순서를 기억한다.

• 맵은 값이 삽입된 순서대로 순회를 실시한다.
• 객체가 프로퍼티 순서를 기억하지 못하는 것과는 다르다.

 

맵은 배열과 유사하게 forEach도 지원한다.

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

// 각 (키, 값) 쌍을 대상으로 함수를 실행
recipeMap.forEach( (value, key, map) => {
  alert(`${key}: ${value}`); // cucumber: 500 ...
});

 

 

Object.entries: 객체를 맵으로 바꾸기

• 각 요소가 키-값 쌍인 배열이나 이터러블 객체를 초기화하는 용도로 맵에 전달해 새로운 맵을 만들 수 있다.

// 각 요소가 [키, 값] 쌍인 배열
let map = new Map([
  ['1',  'str1'],
  [1,    'num1'],
  [true, 'bool1']
]);

alert( map.get('1') ); // str1

• 평범한 객체를 가지고 맵을 만들고 싶다면 내장 메서드 Object.entries(obj)를 활용해야 한다.
• 이 메서드는 객체의 키-값 쌍을 요소([key, value])로 가지는 배열을 반환한다.

let obj = {
  name: "John",
  age: 30
};

let map = new Map(Object.entries(obj));

alert( map.get('name') ); // John

• 이렇게 하면 obj 배열 [ ["name","John"], ["age", 30] ]로 바꾸고, 이 배열을 이용해 새로운 맵을 만든 것이다.

 

 

Object.fromEntries: 맵을 객체로 바꾸기

• 맵을 객체로 바꾸기
• Object.fromEntries 메서드는 각 요소가 [키, 값] 쌍인 배열을 객체로 바꿔준다.

let prices = Object.fromEntries([
  ['banana', 1],
  ['orange', 2],
  ['meat', 4]
]);

// now prices = { banana: 1, orange: 2, meat: 4 }

alert(prices.orange); // 2

let map = new Map();
map.set('banana', 1);
map.set('orange', 2);
map.set('meat', 4);

let obj = Object.fromEntries(map.entries()); // 맵을 일반 객체로 변환
//let obj = Object.fromEntries(map); // .entries()를 생략함, 이렇게 작성 가능

// 맵이 객체 변환!
// obj = { banana: 1, orange: 2, meat: 4 }

alert(obj.orange); // 2

 

 

셋(set)

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

 

주요 메서드

• new Set(iterable)
  • 셋을 생성
  • 이터러블 객체를 전달받으면(대개 배열을 전달받음) 그 안의 값을 복사해 셋에 넣어준다
• set.add(value)
  • 값을 추가하고 셋 자신을 반환
• set.delete(value)
  • 값을 제거
  • 호출 시점에 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환
• set.has(value)
  • 셋 내에 값이 존재하면 true, 아니면 false를 반환
• set.clear()
  • 셋을 비워주기
• set.size
  • 셋에 몇 개의 값이 있는지 카운트

let set = new Set();

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

// 어떤 고객(john, mary)은 여러 번 방문
set.add(john);
set.add(pete);
set.add(mary);
set.add(john);
set.add(mary);

// 셋에는 유일무이한 값만 저장
alert( set.size ); // 3

for (let user of set) {
  alert(user.name); // // John, Pete, Mary 순으로 출력
}

• arr.find를 통해 중복 값 여부를 확인할 수 있지만 요소 전체를 돌기 때문에 성능 면에서 set보다 떨어진다.

 

 

Set의 값에 반복 작업하기

• for..of나 forEach를 사용하면 셋의 값을 대상으로 반복 작업을 수행할 수 있다.

let set = new Set(["oranges", "apples", "bananas"]);

for (let value of set) alert(value);

// forEach를 사용해도 동일하게 동작합니다.
set.forEach((value, valueAgain, set) => {
  alert(value);
});

 

왜 forEach에 쓰인 콜백 함수는 세 개의 인수를 받고 있을까?

• 첫 번째는 값, 두 번째도 같은 값인 valueAgain, 세 번째는 목표하는 객체(set)이다.
• 여기서 동일한 값이 인수에 두 번 등장하고 있다.
• 이는 맵과의 호환성 때문이다
• 맵의 forEach에 쓰인 콜백이 세 개의 인수를 받을 때를 위해서이다.

 

set에도 map과 마찬가지고 반복 작업을 위한 메서드가 있다.

• set.keys()
  • 셋 내의 모든 값을 포함하는 이터러블 객체를 반환
• set.values()
  • ``set.keys`와 동일한 작업 수행
  • 맵과의 호환성을 위해 만들어진 메서드
• set.entries()
  • 셋 내의 각 값을 이용해 만든 [value, value] 배열을 포함하는 이터러블 객체를 반환한다.
  • 맵과의 호환성을 위해 만들어졌다.

 

 

📌 참고

• 모던 JavaScript 튜토리얼
• https://youtu.be/vUB3TfLWzL0