객체 - 키가 있는 컬렉션을 저장함
배열 - 순서가 있는 컬렉션을 저장함
맵 - 키가 있는 값이 저장된 컬렉션
셋 - 중복이 없는 값을 저장할 때 쓰이는 컬렉션
맵
맵(Map)은 키가 있는 데이터를 저장한다. 객체와 유사하지만 키 값에 넣을 수 있는 자료형에 제약이 없다.
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'); // 불린형 키
// 객체는 키를 문자형으로 변환한다는 걸 기억하고 계신가요?
// 맵은 키의 타입을 변환시키지 않고 그대로 유지합니다. 따라서 아래의 코드는 출력되는 값이 다릅니다.
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) ); // 123맵의 요소에 반복 작업하기
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도 지원한다.
// 각 (키, 값) 쌍을 대상으로 함수를 실행
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])로 가지는 배열을 반환한다.
Object.fromEntries : 맵을 객체로 바꾸기
let prices = Object.fromEntries([
['banana', 1],
['orange', 2],
['meat', 4]
]);
// now prices = { banana: 1, orange: 2, meat: 4 }
alert(prices.orange); // 2Object.fromEntries를 사용해 맵을 객체로 바꿔보자.
let map = new Map();
map.set('banana', 1);
map.set('orange', 2);
map.set('meat', 4);
let obj = Object.fromEntries(map.entries()); // 맵을 일반 객체로 변환 (*)
//여기에서 entries를 생략하여 더 짧게 줄이는 것도 가능하다.
// 맵이 객체가 되었습니다!
// obj = { banana: 1, orange: 2, meat: 4 }
alert(obj.orange); // 2셋
셋은 중복을 허용하지 않는 값을 모아놓은 컬렉션이다. 셋에 키가 없는 값이 저장된다.
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 순으로 출력됩니다.
}
// 여러 번 방문해도 방문자를 중복해서 기록하지 않겠다. 즉, 방문자는 ‘단 한번만’ 기록 되어야 한다.셋의 값에 반복 작업하기
for..of나 forEach를 사용하면 셋의 값을 대상으로 반복 작업을 수행할 수 있다.
set.keys()– 셋 내의 모든 값을 포함하는 이터러블 객체를 반환한다.set.values()–set.keys와 동일한 작업을 한다. 맵과의 호환성을 위해 만들어진 메서드이다.set.entries()– 셋 내의 각 값을 이용해 만든[value, value]배열을 포함하는 이터러블 객체를 반환한다. 맵과의 호환성을 위해 만들어졌다.
let set = new Set(["oranges", "apples", "bananas"]);
for (let value of set) alert(value);
// forEach를 사용해도 동일하게 동작합니다.
set.forEach((value, valueAgain, set) => {
alert(value);
});
뚜벅뚜벅