JavaScript - Map, Set

Jinsung·2021년 8월 26일
0

javascript

목록 보기
7/11
post-thumbnail

🔎1. Map과 Set

  • 객체 - Key가 있는 컬렉션을 저장
  • 배열 - 순서가 있는 컬렉션을 저장
    현실 세계에서는 위 두가지 자료구조만으론 부족하여 MapSet이 등장
  • Map - Key가 있는 데이터를 저장한다는 점에서 객체와 유사 다만 Key에 다양한 자료형을 허용한다는 차이점이 있음
  • Set - 중복을 허용하지 않는 값을 모아 놓은 특별한 컬렉션, Set에 키가 없는 값을 저장

✅2. Map

🎯1. 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) - kye에 해당하는 값을 삭제
  • 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]는 Map을 쓰는 바른 방법이 아닙니다.
이는 일반 객체처럼 취급되기 때문에 여러 제약이 생기게 됩니다.

🎯2. Map은 키로 객체를 허용합니다.

let john = { name: "John" };

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

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

alert( visitsCountMap.get(john) ); // 123

🎯3. Map은 key를 비교할때 SameValueZero라 불리는 알고리즘을 사용해 등가 여부를 확인합니다
🎯4. Map의 요소에 반복 작업

  • map.key() - 각 요소의 키를 모은 반복 가능한(iterable, 이터러블) 객체를 반환
  • map.values() - 각 요소의 값을 모은 이터러블 객체를 반환
  • map.entries() - 요소의 [키, 값]을 한쌍으로 하는 이터러블 객체를 반환, 이 이터러블 객체는 for..of의 반복문의 기초

🎯5. Map은 삽입 순서를 기업합니다 ( 배열과 유사하게 내장 메서드 forEach 지원)
🎯6. Object.entries 객체를 맵으로 변경
각 요소가 키-값 쌍인 배열이나 이터러블 객체를 초기화 용도로 Map에 전달하여 새로운 Map생성이 가능합니다.

// 각 요소가 [키, 값] 쌍인 배열
let map = new Map([
  ['1',  'str1'],
  [1,    'num1'],
  [true, 'bool1']
]);

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

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

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

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

🎯7. Object.fromEntires 맵을 객체로 변경

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()); // 맵을 일반 객체로 변환 (*)

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

alert(obj.orange); // 2

✅3. Set

Set은 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션입니다. 셋에 키가 없는 값을 저장합니다.

🎯1. 주요 메서드

  • new Set(iterable) - 셋을 만듭니다. 이터러블 객체를 전달받으면(대개 배열) 그 안의 값을 복사해 set에 넣어줍니다.
  • set.add(value) - 값을 추가하고 셋 자신을 반환합니다.
  • set.delete(value) - 값을 제거합니다. 호출 시점에 셋 내에 값이 있어서 제거에 성공하면 true 아니면 false를 반환합니다.
  • set.has(value) - 셋 내에 값이 존재하면 true 아니면 false를 반환합니다.
  • set.clear() - 셋을 비웁니다.
  • set.size - 셋에 몇개의 값이 있는지 세줍니다.

🎯2. set내에 중복된 키가 있다면 아무리 add해도 변화가 없습니다.

et 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 순으로 출력됩니다.
}

arr.find 를 사용하여 중복 값 여부를 확인 할 수 있지만 배열 내 요소 전체를 뒤져 중복 값을 찾기 때문에 성능적 면에서는 떨어집니다.

🎯3.set의 값에 반복 작업하기
for..offorEach를 사옹하면 set의 값을 대상으로 반복 작업을 수행할 수 있습니다.

let set = new Set(["oranges", "apples", "bananas"]);
for (let value of set) alert(value);
// forEach를 사용해도 동일하게 동작합니다.
set.forEach((value, valueAgain, set) => {
  alert(value);
});

set에도 map과 같이 반복 작업을 위한 메서드가 있습니다.

  • set.keys() - set 내의 모든 값을 포함하는 iterable 객체를 반환합니다.
  • set.values() - set.keys와 동일한 작업을 합니다.
  • set.entries() - set내의 각 값을 이용해 만든 [value, value] 배열을 포함하는 iterable 객체를 반환합니다.map과의 호환성을 위해 만들어 졌습니다.

자료 출처
https://ko.javascript.info/iterable - 모던 자바스크립트 튜토리얼
https://helloworldjavascript.net/pages/260-iteration.html - hello javascript

0개의 댓글