[JS]-DeepDive Set과 Map

Kng_db·2023년 3월 29일

Set과 Map

객체 - 키가 있는 컬렉션을 저장함
배열 - 순서가 있는 컬렉션을 저장함

이 두 자료구조 만으론 표현의 한계가 있기 때문에 Set과 Map이 등장합니다.

Set

Set 객체는 중복되지 않는 유일한 값들의 집합입니다.
Set 객체는 이터러블이며, 따라서 for...of 문으로 순회 가능합니다.
스프레드 문법과 배열 디스트럭처링의 대상이 될 수 있습니다.

배열과의 차이

동일한 값을 중복하여 포함할 수 없습니다.

요소 순서에 의미가 없습니다.

인덱스로 요소에 접근할 수 없습니다.

Set 객체의 생성

Set 객체는 Set 생성자 함수로 생성합니다. Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성됩니다.
Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성합니다. 이때 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않습니다.

Set의 메서드와 프로퍼티

new Set(iterable) – 셋을 만듭니다. 이터러블 객체를 전달받으면(대개 배열을 전달받음) 그 안의 값을 복사해 셋에 넣어줍니다.

객체나 배열은 안에 같은 요소를 넣어줘도 다르다고 판단합니다.

set.add(value) – 값을 추가하고 셋 자신을 반환합니다. add 메서드는 연속적으로 호출할 수 있습니다.

set.delete(value) – 값을 제거합니다. 호출 시점에 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환합니다.
set.has(value) – 셋 내에 값이 존재하면 true, 아니면 false를 반환합니다.
set.clear() – 셋을 비웁니다.
set.size – 셋에 몇 개의 값이 있는지 세줍니다.
set.forEach(a,b,c) - Array.forEach 메서드와 유사하게 콜백 함수와 forEach 메서드의 콜백 함수 내부에서 this로 사용될 객체를 인수로 전달합니다. 이때 콜백 함수는 3개의 인수를 전달받습니다.
a : 현재 순회 중인 요소값
b : 현재 순회 중인 요소값
c : 현재 순회 중인 Set 객체 자체

활용

방문자를 기록하려고 할 때 중복해서 기록하지 않고 한 방문자는 단 한 번만 기록되길 원할 때 적합한 자료구조가 Set입니다.

Map

Map 객체는 키와 값의 쌍으로 이루어진 컬렉션입니다.
Set 객체는 이터러블이며, 따라서 for...of 문으로 순회 가능합니다.
스프레드 문법과 배열 디스트럭처링의 대상이 될 수 있습니다.

객체와의 차이

키로 사용할 수 있는 값이 다릅니다.
객체 : 문자열 또는 심벌 값
Map : 객체를 포함한 모든 값

Map은 이터러블한 객체입니다.

요소 개수 확인 방법이 다릅니다.
객체 : length
Map : size

Map 객체의 생성

Map 객체는 Map 생성자 함수로 생성합니다. Map 생성자 함수에 인수를 전달하지 않으면 빈 Map 객체가 생성됩니다.
Map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성합니다. 이때 인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요소로 구성되어야 합니다.

Map의 메서드와 프로퍼티

new Map() – 맵을 만듭니다.

map.set(key, value) – key를 이용해 value를 저장합니다.
중복된 key 값이 있다면 에러가 나지않고 값을 덮어씁니다.
맵은 객체와 달리 키를 문자형으로 변환하지 않습니다.
map.set은 호출할 때마다 맵 자신이 반환됩니다. 이를 이용해 체이닝이 가능합니다.

map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다.
map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환합니다.
map.delete(key) – key에 해당하는 값을 삭제합니다.
map.clear() – 맵 안의 모든 요소를 제거합니다.
map.size – 요소의 개수를 반환합니다.
map.forEach(a,b,c) - Array.forEach 메서드와 유사하게 콜백 함수와 forEach 메서드의 콜백 함수 내부에서 this로 사용될 객체를 인수로 전달합니다. 이때 콜백 함수는 3개의 인수를 전달받습니다.
a : 현재 순회 중인 요소값
b : 현재 순회 중인 요소키
c : 현재 순회 중인 Map 객체 자체
map.keys - 요소키를 값으로 갖는 이터러블이면서 동시에 이터레이터인 객체를 반환합니다.
map.values - 요소값을 값으로 갖는 이터러블이면서 동시에 이터레이터인 객체를 반환합니다.
map.entries - 요소키와 요소값을 값으로 갖는 이터러블이면서 동시에 이터레이터인 객체를 반환합니다.