[JavaScript] 자바스크립트의 새로운 자료구조 Set, Map

Set이란?

Set이란 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션이다. 중복 값 여부는 배열에서도 find() 메서드를 이용하여 확인할 수 있지만, 배열 내 전체 요소를 순환하여 찾기 때문에 성능면에서 Set보다 효율적이지 않다. Set은 값의 유일무이함을 확인하는 데에 최적화되어있다.

 

 

 

 

Set 메서드 or 프로퍼티

• new Set() or new 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() or new 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

https://www.w3schools.com/js/js_sets.asp

https://www.w3schools.com/js/js_maps.asp