JavaScript에서 객체(object)
와 배열(array)
을 이용하면 굉장히 다양하고 복잡한 프로그래밍을 할 수가 있습니다. 그럼에도 불구하고 여전히 현실세계의 여러가지 문제들을 ‘프로그래밍’적으로 반영하기엔 많이 부족해요. Map
과 Set
은 이러한 한계를 극복하고자 비교적 최근 등장한 자료구조라고 할 수 있습니다.
이 두 자료 구조는 데이터의 구성, 검색 및 사용을 객체나 배열보다 효율적으로 처리할 수 있기 때문에 많이 각광받고 있어요. 이제 JavaScript에서 Map
과 Set
을 사용하는 방법을 살펴보겠습니다 🚀🚀
Map은 키-값 쌍을 저장하는 객체와 비슷합니다. Map은 각 쌍의 키와 값을 저장하며, 객체와 달리 키로 사용할 수 있는 모든 유형을 사용할 수 있습니다. Map은 키가 정렬된 순서로 저장되기 때문에, 추가한 순서대로 반복할 필요가 없습니다. Map을 사용하면 다음과 같은 작업을 수행할 수 있습니다.
new 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
– 요소의 개수를 반환합니다.위 내용을 바탕으로 실습을 진행해볼까요?
새로운 Map을 만들려면 Map() 생성자를 사용합니다.
const myMap = new Map();
이제 Map에 값을 추가하려면 set() 메소드를 사용합니다.
myMap.set('key', 'value');
Map에서 값을 검색하려면 get() 메소드를 사용합니다.
console.log(myMap.get('key')); // 'value' 출력
Map에서는 keys(), values(), entries() 메소드를 사용하여 키, 값 및 키-값 쌍을 반복할 수 있습니다.
💡 **[for …of 반복문]**for of
반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다. for of
구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator]
속성을 가지고 있어야만 합니다(직접 명시 가능).
var iterable = [10, 20, 30];
for (var valueof iterable) {
console.log(value);// 10, 20, 30
}
iterator는 반복자라는 말이에요. 요소 하나하나를 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 열거되어있는 자료구조로 이해해주시면 돼요. 아래 예시 코드에서 myMap.keys()
으로 쓸 수 있는 이유는 myMap.key()
가 반환하는 값이 iterator이기 때문이에요.
const myMap = new Map();
myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);
for (const key of myMap.keys()) {
console.log(key);
}
for (const value of myMap.values()) {
console.log(value);
}
for (const entry of myMap.entries()) {
console.log(`${entry[0]}: ${entry[1]}`);
}
Map의 크기를 확인하려면 size 속성을 사용합니다.
console.log(myMap.size); // 3 출력
특정 키가 Map에 존재하는지 여부를 확인하려면 has() 메소드를 사용합니다.
console.log(myMap.has('two')); // true 출력
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
의 반복>Set
에서는 values()
메소드를 사용하여 값을 반복할 수 있습니다.
const mySet = new Set();
mySet.add('value1');
mySet.add('value2');
mySet.add('value3');
for (const value of mySet.values()) {
console.log(value);
}
Set
의 크기 및 존재 여부 확인>Set
의 크기를 확인하려면 size
속성을 사용합니다.
console.log(mySet.size); // 3 출력
특정 값을 Set
에서 검색하여 존재하는지 여부를 확인하려면 has()
메소드를 사용합니다.
console.log(mySet.has('value2')); // true 출력
JavaScript에서 Map
과 Set
은 두 가지 다른 유형의 자료 구조입니다. Map
은 키-값 쌍을 저장하는 객체와 비슷하며, Set
은 고유한 값을 저장하는 자료 구조입니다. Map
및 Set
은 모두 값 추가, 검색, 삭제 및 모든 값 제거를 수행할 수 있습니다. Map
및 Set
을 사용하여 효율적인 데이터 구성 및 검색을 수행할 수 있습니다.