-
[자바스크립트] Map과 SetLanguage/JavaScript 2023. 1. 17. 17:57
Map
- map 객체는 키가 있는 데이터를 저장한다는 점에서 객체와 유사하지만, 맵은 key에 다양한 자료형을 허용한다는 점에서 차이가 있다.
1. 주요 메서드
- new Map() – 맵을 만든다. 인수는 이터러블을 받고, 인수를 받지 않으면 빈 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 – 요소의 개수를 반환합니다.
- 예시
const map = new Map() console.log(map) // Map(0) { // __proto__: { // constructor: ƒ Map(), // get: ƒ get(), // set: ƒ set(), // has: ƒ has(), // delete: ƒ delete(), // clear: ƒ clear(), // entries: ƒ entries(), // forEach: ƒ forEach(), // keys: ƒ keys(), // size: 'TypeError: Method get Map.prototype.size called on incompatible receiver #<Map>', // values: ƒ values() // } // }
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 의 가장 중요한 기능 중 하나이다.
- 체이닝 : map.set 을 호출할 때 마다 맵 자신이 반환된다. 이를 이용하면 map.set 을 체이닝할 수 있다.
map.set('1', 'str1') .set(1, 'num1') .set(true, 'bool1');
2. 맵의 요소에 반복 작업 하기
다음 세 가지 메서드를 사용해 맵의 각 요소에 반복 작업을 할 수 있습니다.
- 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 ... } console.log(recipeMap) //Map(3) { // 'cucumber' => 500, // 'tomatoes' => 350, // 'onion' => 50, // __proto__: { // constructor: ƒ Map(), // get: ƒ get(), // set: ƒ set(), // has: ƒ has(), // delete: ƒ delete(), // clear: ƒ clear(), // entries: ƒ entries(), // forEach: ƒ forEach(), // keys: ƒ keys(), // size: 'TypeError: Method get Map.prototype.size called on incompatible receiver #<Map>', // values: ƒ values() // } //}
- 맵은 값이 삽입된 순서대로 순회를 실시한다. 객체가 프로퍼티 순서를 기억하지 못하는 것과는 다르다.
- 또한 Map은 배열과 유사하게 내장 메서드 forEach도 지원한다.
// 각 (키, 값) 쌍을 대상으로 함수를 실행 recipeMap.forEach( (value, key, map) => { alert(`${key}: ${value}`); // cucumber: 500 ... });
3. 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 }; // Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환한다. console.log(*Object.entries(obj)) // [['name','John'], ['age', 30]]* *let map = new Map(Object.entries(obj));* alert( map.get('name') ); // John
Object.entries를 사용해 객체 obj를 배열 [ ["name","John"], ["age", 30] ]로 바꾸고, 이 배열을 이용해 새로운 맵을 만들어보았습니다.
4. Object.fromEntries : 맵을 객체로 바꾸기
방금까진 Object.entries(obj)를 사용해 평범한 객체를 맵으로 바꾸는 방법에 대해 알아보았습니다.
이젠 이 반대인 맵을 객체로 바꾸는 방법에 대해 알아보겠습니다. Object.fromEntries를 사용하면 가능합니다. 이 메서드는 각 요소가 [키, 값] 쌍인 배열을 객체로 바꿔줍니다.
let prices = Object.fromEntries([ ['banana', 1], ['orange', 2], ['meat', 4] ]); // now prices = { banana: 1, orange: 2, meat: 4 } alert(prices.orange); // 2
Object.fromEntries를 사용해 맵을 객체로 바꿔봅시다.
자료가 맵에 저장되어있는데, 서드파티 코드에서 자료를 객체형태로 넘겨받길 원할 때 이 방법을 사용할 수 있습니다.
- 예시
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); // 2
map.entries()를 호출하면 맵의 [키, 값]을 요소로 가지는 이터러블을 반환합니다. Object.fromEntries를 사용하기 위해 딱 맞는 형태이죠.
(*)로 표시한 줄을 좀 더 짧게 줄이는 것도 가능합니다.
let obj = Object.fromEntries(map); // .entries()를 생략함
Object.fromEntries는 인수로 이터러블 객체를 받기 때문에 짧게 줄인 코드도 이전 코드와 동일하게 동작합니다. 꼭 배열을 전달해줄 필요는 없습니다. 그리고 map에서의 일반적인 반복은 map.entries()를 사용했을 때와 같은 키-값 쌍을 반환합니다. 따라서 map과 동일한 키-값을 가진 일반 객체를 얻게 됩니다.
Set
- set 객체는 중복되지 않는 유일한 값들의 집합이다. 셋에는 키가 없는 값이 저장된다.
- 특징
- 동일한 값을 중복하여 포함할 수 없다.
- 요소의 순서에 의미가 없다.
- 인덱스로 요소에 접근/수정/삭제할 수 없다.(get, set 메소드 활용)
- set 객체는 수학적 집합(교집합, 차집합, 합집합, 여집합)을 구현하기 위한 자료구조이다.
1. 주요 메서드
- 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); // set에는 유일무이한 값만 저장됩니다. alert(set.size); // 3 for (let user of set) { alert(user.name); // // John, Pete, Mary 순으로 출력됩니다. }
2. 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을 받는다. 세 번째는 목표하는 객체(셋)이다. 즉, 동일한 값을 인수에 두 번 넣어야한다.
이렇게 구현하는 이유는 맵과의 호환성 때문이다. Map의 forEach에 쓰인 콜백이 세 개의 인수를 받을 때를 위해서. 이렇게 구현해 놓았기 때문에 Map을 Set으로 혹은 Set을 Map으로 교체하기가 쉽다.
Set에도 Map과 마찬가지로 반복 작업을 위한 메서드가 있다.
- set.keys() – 셋 내의 모든 값을 포함하는 이터러블 객체를 반환
- set.values() – set.keys와 동일한 작업을 한다. Map과의 호환성을 위해 만들어진 메서드이다.
- set.entries() – set 내의 각 값을 이용해 만든 [value, value] 배열을 포함하는 이터러블 객체를 반환한다. Map과의 호환성을 위해 만들어졌습니다.
출처
- 맵과 셋 : https://ko.javascript.info/map-set'Language > JavaScript' 카테고리의 다른 글
반복문(while, do-while) (0) 2023.03.15 정렬 메소드 sort와 localeCompare (0) 2023.03.06 [Javascript] 클래스의 정적(static)메소드와 프로퍼티, 상속 (0) 2023.01.03 [Javascript] 클래스의 동작원리와 클래스 상속(오버라이딩) (0) 2023.01.03 [Javascript] 프로토타입과 프로토타입 상속 (0) 2023.01.03