Map
Map은 키가 있는 데이터를 저장하기 대문에 객체와 비슷하다.
하지만, Map은 키에 다양한 자료형을 허용한다.
맵의 주요메서드와 프로퍼티를 알아보자
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('500', 'str1'); // 문자형 key map.set(500, 'num1'); // 숫자형 key map.set(true, 'bool1'); // 불린형 key //객체는 키를 문자형으로 변환하지만 맵은 그 데이터타입을 유지한다.
맵을 사요할때는 객체처럼 사용하지 않는것이 좋다.
let obj = new Object(); obj['key'] = 'value'; // 객체는 대괄호 또는 점으로 키를 접근하고 생성하지만 // 맵은 `get`과 `set`메서드를 이용하는것이 옳다. let map = new Map(); map.set('hello', 'world'); map.get('hello'); // 'world'
맵 자료형이 키를 비교하는 방식
map자료형은 SameValueZero라는 알고리즘을 사용해 값의 등가 여부를 확인합니다. 이 알고리즘은 일치 연산자와 거의 유사하지만,NaN과NaN을 같다고 취급한다.
따라서 맵에는NaN도 키로 사용할 수 있다.
체이닝
map.set을 호출할 때마다 맵 자신이 반환된다.
이를 이용하여map.set을chaining할 수 있다.map.set('1', 1) .set('2', 2) .set('3', 3);
맵의 요소에 반복 작업하기
map의 반복작업을 할 수 있는 방법이 있다.
- map.keys() ->
key값들을 모은 이터러블 객체를 반환 - map.values() ->
value값들을 모은 이터러블을 반환 - map.entries() -> [
key,value]을 한쌍으로 하는 이터러블 객체를 반환한다.
let helloMap = new Map([ ['Korea', '안녕'], ['USA', 'hello'], ['China', '你好'], ]); for(let key of helloMap.keys()) { console.log(key); // 'korea', 'USA', 'China } for(let value of helloMap.values()) { console.log(value); // '안녕', 'hello', '你好' for(let entry of helloMap.entries()) { //helloMap만 넣어도 똑같이 실행된다. console.log(entry); // ['Korea', '안녕'], ['USA', 'hello'], ['China', '你好'] }
Map은 삽입 순서를 기억한다.
Map은 값이 삽입된 순서대로 순회를 한다.
Object는 순서가 없다는 차이점이 존재한다.
Object.entries
배열내에 키와 밸류 쌍으로 이루어진 배열 또는 이터러블 객체를
Map의 초기화 용도로 생성할 때 전당할 수 있다.
let map = new Map([ [1, '1'], [2, '2'], [3, '3'], ]); console.log(map.get(1)); // '1'
또한 객체를 가지고 map을 만들고 싶다면 Object.entries(obj)를 활용하여 만들 수 있다.
이 메서드는 객체를 배열로 만들어 리턴하기 때문에
리턴된 배열을 맵의 초기값으로 설정할 수 있다.
let obj = { name: 'quakka', age: 29, }; let map = new Map(Object.entries(obj)); console.log(map.get('name')); // 'quakka'
Object.fromEntries
반대로 map데이터를 object변환도 가능하다.
이 메서드는 각 요소가 [key, value]쌍인 배열을 객체로 바꿔준다.
우선 아래는 배열을 객체로 변경하는 방법이다.
let user = Object.fromEntries([ ['name', 'quakka'], ['age', 30], ]); console.log(user.name); // 'quakka'
위처럼 배열을 객체로 변경하는것을 이용하여
맵을 배열로 변환하여 메서드에 전해줘보자.
let map = new map(); map.set(1, 1) .set(2, 2) .set(3, 3); let obj = Object.fromEntries(map.entries()); // map 데이터를 배열로 변환한 뒤 메서드의 인자로 전달해 객체로 변환시킨다. console.log(obj['1']); // 1
Set
중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션
셋에 키가 없는 값이 저장된다.
주요 메서드와 프로퍼티를 알아보자
- new Set(iterable) ->
set을 생성한다. - set.add(value) -> 값을 추가하고 셋 자신을 반환한다.
- set.delete(value) -> 값을 제거하고 성공 여부를 반환한다.
- set.has(value) -> 셋 내에 값이 존재하는지 여부를 반환한다.
- set.clear() -> 셋을 비운다.
- set.size -> 셋에 요소의 갯수를 반환한다.
set 내에서 동일한 값이 있다면 set.add(value)를 호출해도 반응이 없다.
아래의 예롤 보자
let 방명록 = new Set(); let quakka = { name: "quakka" }; let horse = { name: "horse" }; let hamster = { name: "hamster" }; 방명록.set(quakka); // quakka 방문 방명록.set(horse); // horse 방문 방명록.set(quakka); // quakka 재 방문 방명록.set(hamster); // hamster 방문 방명록.set(quakka); // quakka 재 방문 console.log(방명록.size); // 3 for(let 방문자 of 방명록) { console.log(방문자.name); // quakka, horse, hamster }
배열에서 요소가 존재한다면 데이터를 넣지않는 방식으로도 구현이 가능하지만 set보다 성능이 떨어진다.
Set의 반복 작업
for..of나 forEach를 사용한다면 셋의 값을 대상으로 반복작업을 수행할 수 있다.
let set = new Set(['apple', 'orange', 'banana']); for(let el of set) { console.log(el); // apple, orange, banana } set.forEach((el, elAgain, set) => { console.log(el); // apple, orange, banana }
forEach에 사용되는 콜백 함수는 세 개의 인수를 받고있는것을 볼 수 있다.
첫 번째는 값, 두 번째도 같은 값, 세 번째는 목표하는 (셋)이다.
이렇게 동일하게 두개를 받게 구현된 이유는 map과의 호환성 때문이다. 맵의 forEach에 쓰인 콜백이 세 개의 인수를 받을 때를 위함이다. 구현 자체가 이렇기 때문에 set과 map은 서로 교체하기가 쉽다.
set에도 반복작업을 위한 메서드가 있다.
set.keys()-> 모든 값이 이터러블 객체로 변환되어 반환set.values()->set.keys()와 동일함, 맵과의 호환때문에 만들어짐set.entries()-> 각자의 값이 출력되는데 [value,value]로 출력이된다. 이또한 맵과의 호환성을 위해 만들어 졌다.
