객체: 키가 있는 컬렉션 저장.
배열: 순서가 있는 컬렉션 저장
실제 사용하기에는 이 두 자료구조만으로 부족하여 map과 set이라는 것이 생기게 되었다.
맵
맵의 주요 메서드와 프로퍼티
- 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안의 모든 요소를 제거.
- map.sixe - map안의 요소의 개수를 반환.
객체는 키를 문자형으로 변환한다.
맵은 키의 타입을 변환하지 않고 그대로 유지한다.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
map은 객체와 달리 키를 문자형으로 변환하지 않는다.
주의:: map[key]는 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]"] ); // 123visitsCountObj 얘는 일단 객체이다. 따라서 모든 키를 문자형으로 변환시킨다. 이 과정에서 객체인 john은 문자형으로 변환되면서 "[object Object]" 가 된다.
맵이 키를 비교하는 방식
맵은 SameValueZero라고 불리는 알고리즘을 사용해 값의 등가 여부를 확인한다.
이것은 일치 연산자 (===) 와 거의 유사하나, NaN과 NaN을 같다고 취급하기에 조금 다르다.
따라서 맵에서는 NaN도 키로 사용이 가능하다.체이닝
map.set을 호출할 때마다 맵 자신이 반환된다.
이것을 이용한다면 map.set을 체이닝할 수 있다.map.set("1","str1") .set(1,"num1") .set(true,"boolean");
맵의 요소에 반복작업하기
- 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 , tomatoes,350 , onion,50
}map은 값이 삽입된 순서를 기억하며 삽입된 순서대로 순회를 실시한다.
추가로, 맵은 배열과 유사하게 forEach도 지원한다.// 각 (키, 값) 쌍을 대상으로 함수를 실행 recipeMap.forEach( (value, key, map) => { alert(`${key}: ${value}`); // cucumber: 500 ... });
Object.entries: 객체를 맵으로 바꾸기
각 요소가 키-값 쌍인 배열이나 이터러블 객체를 초기화 용도로 맵에 전달해 새로운 map을 만들 수 있다.
평범한 객체를 가지고 맵을 만들고 싶다면 내장 메서드 Object.entries(obj) 를 활용한다.
이 메서드는 객체의 키-값 쌍을 요소([key,value])로 가지는 배열을 반환한다.
let obj = {
name: "John",
age: 30
};
let map = new Map(Object.entries(obj));
alert( map.get('name') ); // JohnObject.entries를 사용해 객체 obj를 배열 [ ["name","John"], ["age", 30] ]로 바꾼다.
이후 name이라는 key의 값을 가져왔다.
Object.fromEntries: 맵을 객체로 바꾸기
Object.fromEntries을 사용한다면 map을 객체로 바꿀 수 있다.
이 메서드는 [키,값] 쌍인 배열을 객체로 바꿔준다.
let map = new Map();
map.set('banana', 1);
map.set('orange', 2);
map.set('meat', 4);
let obj = Object.fromEntries(map.entries()); // 맵을 일반 객체로 변환 (*)
// 맵이 객체가 되었습니다!
// obj = { banana: 1, orange: 2, meat: 4 }
alert(obj.orange); // 2map.entries()를 호출하면 맵의 [키,값]을 요소로 가지는 이터러블을 반환한다.
let obj라는 부분을 더 간단히 줄일 수 있다
let obj = Object.fromEntries(map); // .entries()를 생략함Object.fromEntries는 인수로 이터러블 객체를 받는다. 따라서 짧게 줄인 코드도 앞의 코드와 동일하게 동작한다.
꼭 배열을 전달해줄 필요는 없다.
그리고 map에서의 일반적인 반복은 map.entries()를 사용했을 때와 같은 키-값 쌍을 반환한다.따라서 map과 동일한 키-값을 가진 일반 객체를 얻게된다.
set
set은 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션이다.
set에는 키가 없는 값이 저장된다.
- new Set(iterable) - set을 만든다. 이터러블 객체를 전달받으면(보통 배열을 전달받는다) 그 내부의 값을 복사해 set에 넣어준다.
- set.add(value) - 값을 추가하고 set자신을 반환.
- set.delete(value) - 값을 제거. 호출 시점에 set내에 값이 있어 제거에 성공하면 true를 아니라면 false를 반환한다.
- set.has(value) - set안에 값이 존재하면 true를 아니라면 false를 반환한다.
- set.clear() - set을 비움.
- set.size - set에 몇개의 값이 있는지 알려준다.
set내에 동일한 값이 있다면 set.add(value)를 많이 호출하더라도 아무런 반응이 없을 것이다. 이러한 이유로 set내의 값은 중복이 없다.
방문자 방명록 만들기 등 한번만 기록되어야할 필요가있는 기록에 적합한 자료구조가 바로 set이다.
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 순으로 출력됩니다.
}set의 값에 반복 작업하기
for...of나 forEach를 사용한다면 set의 값을 대상으로 반복작업 수행이 가능하다.
let set = new Set(["oranges", "apples", "bananas"]);
for (let value of set) alert(value);
// forEach를 사용해도 동일하게 동작합니다.
set.forEach((value, valueAgain, set) => {
alert(value);
});forEach를 보면 세개의 인수를 받는 것을 볼 수 있다. 첫번째는 값,두번째는 같은 값 valueAgain을 받는다.
세번째는 목표하는 객체인 let set...이다.
동일한 값이 첫번쩨와 두번째 인수에 들어가고있는데 왜일까>?
이렇게 구현된 이유는 map과의 호환성 때문이다.
map의 forEach에 쓰인 콜백이 세개의 인수를 받을 경우를 위해서이다. 이렇게 되어있기에 map에서 set으로, set에서 map으로 교체하기 쉽다.
set에서 사용하는 반복 작업을 위한 메서드
- set keys() - set내의 모든 값을 포함하는 이터러블 객체를 반환.
- set.values() - set.keys와 동일한 작업을한다. map과의 호환성을 위해 만들어진 것.
- set.entries() - set 내의 각 값을 이용해 만든 [value,value]배열을 포함하는 이터러블 객체를 반환. map과의 호환성을 위해 만들어졌다.
