JavaScript 문법 정리 - Map, Set 소개 및 예시코드

Map 과 Set

자바스크립트에서 객체와 배열을 이용하면 굉장히 다양하고 복잡한 프로그래밍을 할 수가 있다.

그럼에도 여전히 현실의 여러문제들을 프로그래밍적으로 반영하기엔 부족하다.

그래서 이러한 한계를 극복하고자 등장한 자료구조가 Map과 Set이다.

1. Map

Map은 키-벨류 쌍을 저장하는 객체와 비슷하다. Map은 각 쌍의 키와 값을 저장하며,

객체와 달리 키로 사용할 수 있는 모든 유형을 사용할 수 있다.

Map은 키가 정렬된 순서로 저장되기 때문에 추가한 순서대로 반복할 필요가 없다.

Map을 사용하면 검색(set), 삭제(delete), 제거(clear), 크기 및 존재여부 확인(size)와 같은 작업을 수행할 수 있다.

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 : 요소의 개수를 반환한다.

// Map 생성자를 사용해서 Map 생성
const myMap = new Map();

// Map에 값을 추가
myMap.set('key', 'value');

// Map에서 값을 검색
console.log(myMap.get('key')); // 'value' 출력

// Map의 크기를 확인
console.log(myMap.size); // 3 출력

// Map의 존재여부를 확인
console.log(myMap.has('two')); // true 출력

Map의 반복

Map에서는 keys(), values(), entries() 메서드를 사용하여 키, 값 및 키-값 쌍을 반복할 수 있다.

const myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);

console.log(myMap.keys()); // [Map Iterator] {'one', 'two', 'three'}

for (const key of myMap.keys()) {
  console.log(key); // one two three
}

console.log(myMap.values()); // [Map Iterator] {1, 2, 3}

for (const value of myMap.values()) {
  console.log(value); // 1 2 3
}

console.log(myMap.entries()); //  // [Map Iterator] {['one', 1], ['two', 2], ['three', 3]}

for (const entry of myMap.entries()) {
  console.log(entry); // ['one', 1] ['two', 2] ['three', 3]
}

[for ... of 반복문]
for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문이다.
for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 한다.
var iterable = [10, 20, 30];

for (var value of iterable) {
  console.log(value);// 10, 20, 30
}
여기서 iterator는 반복자라는 의미로 요소 하나하나를 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 열거되어 있는 자료구조로 이해하면 된다.

2. Set

Set은 고유한 값을 저장하는 자료 구조이다. Set은 값만 저장하며, 키를 저장하지 않는다.

Set은 값이 중복되지 않는 유일한 요소로만 구성된다. Set을 사용하면 값 추가 및 검색, 값 삭제, 모든 값 제거, Set 크기 및 존재여부 확인 등의 작업을 수행할 수 있다.

// Set() 생성자를 사용해서 Set을 생성
const mySet = new Set();

// 이제 Set에 값을 추가하려면 add()메서드를 사용한다.
mySet.add('value1')
mySet.add('value2')

// Set에서 값을 검색하려면 has()메서드 사용
console.log(mySet.has('value1')) // true 출력

// Set의 크기를 확인하려면 size 속성 사용
console.log(mySet.size) // 2 출력

// 특정 값을 Set에서 검색하여 존재하는지 여부를 확인하려면 has()메서드 사용
console.log(mySet.has('values2')) // true 출력

Set의 반복

Set에서는 values() 메서드를 사용하여 값을 반복할 수 있다.

const mySet = new Set();
mySet.add('value1');
mySet.add('value2');
mySet.add('value3');

for (const value of mySet.values()) {
  console.log(value);
}

자바스크립트에서 Map과 Set은 두가지 다른 유형의 자료구조이다.

Map은 키-값 쌍을 저장하는 객체와 비슷하며, Set은 고유한 값을 저장하는 자료구조이다.

Map 및 Set은 모두 값 추가, 검색, 삭제, 모든값 제거를 수행할 수 있다.

Hi._.won