모던 JavaScript 튜토리얼 내용 중 일부를 정리한 내용입니다.
맵
맵은 객체와 비슷하게 키가 있는 데이터를 저장하돼 해당 키에 다양한 자료형을 허용합니다. 맵의 주요 메서드와 프로퍼티는 아래와 같습니다.
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 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맵은 키로 객체를 허용합니다.
let john = { name: "John" };
// 고객의 가게 방문 횟수를 세본다고 가정해 봅시다.
let visitsCountMap = new Map();
// john을 맵의 키로 사용하겠습니다.
visitsCountMap.set(john, 123);
alert( visitsCountMap.get(john) ); // 123map.set 은 호출할 때마다 자신이 반환되어 체어닝을 할 수 있습니다.
map.set('1', 'str1')
.set(1, 'num1')
.set(true, 'bool1');아래 메서드를 사용하면 맵의 각 요소에 반복 작업을 할 수 있습니다.
map.keys() - 각 요소의 키를 모은 반복 가능한 객체 반환
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 메서드도 적용 가능
recipeMap.forEach( (value, key, map) => {
alert(`${key}: ${value}`); // cucumber: 500 ...
});평범한 객체로 맵을 만들고 싶다면 Object.entries(obj) 를 활용합니다. 이 메서드는 객체의 키-값 쌍을 요소로 가지는 배열을 반환합니다.
let obj = {
name: "John",
age: 30
};
let map = new Map(Object.entries(obj));
// Object.entries(obj) -> [["name","John"], ["age", 30]]
alert( map.get('name') ); // John반대로 Object.fromEntries 를 사용하면 맵을 객체로 바꿀 수 있습니다. 이 메서드는 각 요소가 [키, 값] 쌍인 배열을 객체로 바꿔줍니다.
let prices = Object.fromEntries([
['banana', 1],
['orange', 2],
['meat', 4]
]);
// now prices = { banana: 1, orange: 2, meat: 4 }
alert(prices.orange); // 2셋
셋은 중복을 허용하지 않는 값을 모은 컬렉션 입니다. 키가 없이 값만 저장합니다. 주요 메서드는 아래와 같습니다.
new Set(iterable) - 셋을 만듭니다.
set.add(value) - 값을 추가하고 셋 자신을 반환합니다.
set.delete(value) - 값을 제거합니다. 호출 시점에 셋 내에 값이 있어서 제거하면 true, 아니면 false 를 반환합니다.
set.has(value) - 셋 내에 값 존재 여부를 불린 값으로 반환합니다.
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 메서드로 중복을 확인할 수 있지만, 이럴 경우 요소 전체를 확인하며 중복을 검색하므로 성능면에서 셋이 더 적합합니다.
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 에 쓰인 콜백함수는 세 개의 인수를 받는데, 첫 번째 값과 두번 째 값이 같고 세번째는 목표하는 객체 set 입니다. 이는 맵과의 호환성 때문으로 맵의 forEach 에 쓰인 콜백이 세 개의 인수를 받을 때을 대비한 것입니다. 이렇게 구현해야 이후 맵을 셋으로 셋을 맵으로 교체하기 쉽습니다.
반복작업을 위한 셋 메서드는 아래와 같습니다.
set.keys() - 셋 내의 모든 값을 포함하는 이터러블 객체를 반환합니다.
set.values() - set.keys 와 동일한 작업을 합니다.
set.entries() - 샛 내 각 값을 이용해 만든 [value, value] 배열을 포함하는 이터러블 객체를 반환합니다.
