Frontend/JavaScript

JavaScript - Map, Set

고코모옹 2021. 7. 8. 00:30

- Map

  • key가 있는 데이터를 저장한다는 점에서 객체와 유사
  • Map은 key에 다양한 자료형을 허용한다는 점에서 객체와 차이가 있다.

 

 

- Map 주요 메소드와 프로퍼티

  • 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 : 요소의 개수를 반환한다.
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은 객체와 달리 key를 문자형으로 변환하지 않는다. key에는 자료형 제약이 없다.
※ map[key]는 Map을 쓰는 바른 방법이 아닙니다.
map[key] = 2로 값을 설정하는 것 같이 map[key]를 사용할 수 있긴 합니다. 하지만 이 방법은 map을 일반 객체처럼 취급하게 됩니다. 따라서 여러 제약이 생기게 되죠.
map을 사용할 때는 map전용 메서드 set, get 등을 사용해야만 합니다.

 

  • Map은 key로 객체를 허용한다.
let john = { name: "John" };

// 고객의 가게 방문 횟수를 세본다고 가정해 봅시다.
let visitsCountMap = new Map();

// john을 맵의 키로 사용하겠습니다.
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
  • 객체를 key로 사용할 수 있다는 점은 Map의 가장 중요한 기능 중 하나이다.
    • 객체에는 문자열 key를 사용할 수 있지만, 객체 key는 사용할 수 없다.
    • visitsCountObj는 객체이기 때문에 모든 키를 문자형으로 변환 시킨다. 이 과정에서 john은 문자형으로 변환되어 "[object Object]" 가 된다.
let john = { name: "John" };

let visitsCountObj = {}; // 객체를 하나 만듭니다.

visitsCountObj[john] = 123; // 객체(john)를 키로 해서 객체에 값(123)을 저장해봅시다.

// 원하는 값(123)을 얻으려면 아래와 같이 키가 들어갈 자리에 `object Object`를 써줘야합니다.
alert( visitsCountObj["[object Object]"] ); // 123

 

  • 체이닝(chaining)
    • map.set을 호출할 때마다 Map 자신이 반환된다. 이를 이용하면 map.set을 체이닝 할 수 있다.
    map.set('1', 'str1')
  .set(1, 'num1')
  .set(true, 'bool1');

 

 

- Map의 요소에 반복 작업하기

  • map.keys() : 각 요소의 key를 모은 반복 가능한(iterable) 객체를 반환한다.
  • map.values() : 각 요소의 값을 모든 이터러블 객체를 반환한다.
  • map.entries() : 요소의 [키, 값]을 한 쌍으로 하는 이터러블 객체를 반환한다
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 ...
}

 

※맵은 삽입 순서를 기억합니다.
맵은 값이 삽입된 순서대로 순회를 실시합니다. 객체가 프로퍼티 순서를 기억하지 못하는 것과는 다릅니다.

 

  • Map은 배열과 유사하게 내장 메소드 forEach도 지원
// 각 (키, 값) 쌍을 대상으로 함수를 실행
recipeMap.forEach( (value, key, map) => {
  alert(`${key}: ${value}`); // cucumber: 500 ...
});

 

 

- Object.entries: 객체를 Map으로 바꾸기

  • 각 요소가 key-value 쌍인 배열이나 iterable 객체를 초기화 용도로 Map에 전달해 새로운 Map을 만들 수 있다.
  • 평범한 객체를 가지고 Map을 만들고 싶으면 내장 메소드 Object.entries(obj) 활용
    • 이 메소드는 객체의 key-value 쌍을 요소로 가지는 배열을 반환한다.
// 각 요소가 [키, 값] 쌍인 배열
let map = new Map([
  ['1',  'str1'],
  [1,    'num1'],
  [true, 'bool1']
]);

alert( map.get('1') ); // 



let obj = {
  name: "John",
  age: 30
};

let map = new Map(Object.entries(obj));

alert( map.get('name') ); // John

 

 

- Object.fromEntries: Map을 객체로 바꾸기

  • Object.fromEntries 메소드는 각 요소가 [key, value] 쌍인 배열을 객체로 바꿔준다.
  • map.entries()를 호출하면 Map의 [key, value] 를 요소로 가지는 iterable 객체를 반환한다. Object.fromEntries를 사용하기 위해 딱 맞는 형태이다.
let prices = Object.fromEntries([
  ['banana', 1],
  ['orange', 2],
  ['meat', 4]
]);

// now prices = { banana: 1, orange: 2, meat: 4 }

alert(prices.orange); // 2



let map = new Map();
map.set('banana', 1);
map.set('orange', 2);
map.set('meat', 4);

// 두개 동일
//let obj = Object.fromEntries(map.entries()); // 맵을 일반 객체로 변환 (*)
let obj = Object.fromEntries(map); // .entries()를 생략함

// 맵이 객체가 되었습니다!
// obj = { banana: 1, orange: 2, meat: 4 }

alert(obj.orange); // 2

- Set

  • 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션
  • Set에 key가 없는 값이 저장된다.

 

 

- Set 주요 메소드와 프로퍼티

  • new Set(iterable) : Set을 만든다.
                            iterable 객체를 전달 받으면(보통 배열을 전달받음) 그 안의 값을 복사해 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은 값의 유일무이함을 확인하는데 최적화 되어 있다.

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);
});

[ 참고자료 ]

https://ko.javascript.info/map-set

 

맵과 셋

 

ko.javascript.info