🌎 Web/JavaScript
[JavaScript] 자바스크립트의 새로운 자료구조 Set, Map
오늘 ONEUL
2022. 4. 17. 02:39
Set이란?
Set이란 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션이다. 중복 값 여부는 배열에서도 find() 메서드를 이용하여 확인할 수 있지만, 배열 내 전체 요소를 순환하여 찾기 때문에 성능면에서 Set보다 효율적이지 않다. Set은 값의 유일무이함을 확인하는 데에 최적화되어있다.
Set 메서드 or 프로퍼티
new Set()ornew Set(iterable)- Set 객체 생성 및 초기화. iterable 객체를(주로 배열) 전달받으면 그 안의 값을 복사해서 넣어준다.
// Set 객체 생성
const letters = new Set(["a","b","c"]);// Set 객체 생성
const letters = new Set();
// Set 객체에 add로 값 추가
letters.add("a");
letters.add("b");
letters.add("c");
add(value)- 값을 추가하고 set 자신을 반환.delete(value)- 값을 제거. 호출 시점에 set 내에 값이 있어서 제거에 성공하면 true, 아니면 false 반환.has(value)- set 내에 값이 존재하면 true, 아니면 false 반환.clear()- set 안의 모든 값 제거.size- set이 가지고 있는 값 개수 반환
Set 반복 작업
forEach(callback function)- 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행
let set = new Set(["oranges", "apples", "bananas"]);
set.forEach((value, valueAgain, set) => {
alert(value);
});
// for of를 사용해도 동일하게 동작
for (let value of set) alert(value);
entries()- Set 내의 [value, value] 배열을 포함하는 iterable 객체를 반환.keys()- Set 내의 모든 값을 포함하는 iterable 객체를 반환.values()-keys()와 동일하게 반환. (Map과의 호환성을 위해 만들어짐)- 3개의 메서드 모두 리턴 타입은 SetIterator이기 때문에 별도의 메서드를 사용하여 접근해야 한다.
Map이란?
Map이란 Key-Value 형태의 집합 데이터이다. 키가 있는 데이터를 저장한다는 점에서 객체와 유사하지만, Map은 키에 다양한 자료형을 허용하고, 삽입된 순서를 기억한다는 점에서 차이가 있다.
Map 메서드 or 프로퍼티
new Map()ornew Map([[key, value], [key, value], ...])- Map 객체 생성 및 초기화.
// Map 객체 생성
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
set(key, value)- key를 이용하여 value를 저장.get(key)- key에 해당하는 값을 반환. key가 존재하지 않으면 undefined 반환.delete(key)- key에 해당하는 값을 삭제.has(key)- key가 존재하면 true, 아니면 false 반환.clear()- map 안의 모든 요소 제거.size- map 요소의 개수를 반환.
Map 반복 작업
forEach(callback function)- 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행
// 각 (키, 값) 쌍을 대상으로 함수를 실행
recipeMap.forEach( (value, key, map) => {
alert(`${key}: ${value}`); // cucumber: 500 ...
});
entries()- 요소의 [key, value]를 한 쌍으로 하는 iterable 객체를 반환. (for of문의 기초로 쓰임)keys()- 각 요소의 키를 모은 iterable 객체를 반환.values()- 각 요소의 값을 모은 iterable 객체를 반환.
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 ...
}
주의할 점
Set, Map 모두 '순서대로' 반복 작업이 수행되지만, 컬렉션 내 요소나 값을 재 정렬하거나(배열에서 인덱스를 이용해 요소를 가져오는 것처럼), 숫자를 이용해 특정 요소나 값을 가지고 오는 것은 불가능하다.
※ 참고 자료
https://ko.javascript.info/map-set