Map()과 Set(), iterable 객체

순회 가능한 객체 = iterable 객체

내부 요소를 하나씩 차례로 반환할 수 있는 객체이다.

for of 루프를 통해 각 요소를 차례로 순회할 수 있다.

ex) 배열(Array), 문자열(String), Map, Set

 

일반객체는 iterable 객체가 아니다.

일반객체는 각 요소를 순회하려면 Object.keys / Object.values / Object.entries 사용하고 그 다음에 for of 루프를 적용하면 된다.

 

Map = 키-값 쌍을 저장하는 자료 구조

순회 가능한(iterable)객체여서 for...of문을 사용하여 Map의 내용을 순회할 수 있다.

 

- 특징

키의 타입 유연성: 어떤 타입의 키도 허용한다. 객체나 함수 등도 키로 사용할 수 있다.

순서 보장: 원소를 추가한 순서대로 순회된다. 이는 객체가 키의 순서를 보장하지 않는 것과 대조적이다.

크기 측정: size 프로퍼티를 통해 저장된 항목의 개수를 쉽게 알 수 있다. ⇒ console.log(userMap.size); // 2

가독성과 성능면에서 이점을 얻을 수 있다.
다만, 단순한 키-값 저장이 목적이라면 여전히 객체를 사용하는 것도 유효한 선택일 수 있다.

// 키-값 쌍을 저장할 때
const myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');

// 키의 타입 유연성
const objKeyMap = new Map();
const keyObj = { id: 1 };
objKeyMap.set(keyObj, 'Value associated with an object key');
console.log(objKeyMap.get(keyObj)); // Value associated with an object key

// 순서 보장
const orderedMap = new Map([
  ['three', 3],
  ['one', 1],
  ['four', 4],
  ['two', 2],
]);

for (const [key, value] of orderedMap) {
  console.log(key, value);
}
// three 3
// one 1
// four 4
// two 2

 

Set = 중복없이 유일한 값을 저장하는 자료 구조

순회 가능한(iterable)객체여서 for...of문을 사용하여 Set의 내용을 순회할 수 있다.

 

Set 내의 값은 모두 유일해야한다.

Set은 순서가 있는 열거 가능한 요소의 집합이다.

 

- Set으로 배열에서 중복을 제거할 때 

const array = [1, 2, 3, 1, 2, 4, 5];
const uniqueArray = [...new Set(array)];

Set을 이용하여 중복을 제거한 후, 전개 연산자(...)를 사용하여 다시 배열로 변환한다.
결과적으로 uniqueArray는 중복이 제거된 배열이 저장된다.

 

- Set 생성하기

const uniqueNumbers = new Set();

 

- 값 추가하기 (add 메서드)

uniqueNumbers.add(1);
uniqueNumbers.add(2);
uniqueNumbers.add(3);
uniqueNumbers.add(1); // 이미 존재하는 값을 추가해도 무시됨 (중복 허용 X)

 

- 값이 존재하는지 확인하기 (has 메서드)

console.log(uniqueNumbers.has(2)); // true
console.log(uniqueNumbers.has(4)); // false

 

- 값 삭제하기 (delete 메서드)

uniqueNumbers.delete(2);

 

- Set 비우기 (clear 메서드)

uniqueNumbers.clear();

 

- Set의 크기 확인하기 (size 프로퍼티)

console.log(uniqueNumbers.size); // 2 (삭제된 값이 반영되지 않은 크기)

 

- Set 순회하기 (for...of문 또는 forEach 메서드 사용)

for (const number of uniqueNumbers) {
  console.log(number);
}

// 또는 forEach 메서드 사용
uniqueNumbers.forEach((number) => {
  console.log(number);
});