[Javascript] Set, Map

중복되지 않는 값들의 집합

• 표준 내장 객체 중 하나

💡 배열과의 차이:

• 동일한 값을 여러 번 포함할 수 없음
• 값들의 순서가 무의미함

 

I. 기본 사용법

// Set 생성

const set1 = new Set();

​

// add 메서드 - 요소 추가

set1.add(1);

set1.add('A');

set1.add(true);

​

console.log(set1);

 

// 이미 포함된 요소는 추가하지 않음

set1.add(1);

set1.add(true);

​

console.log(set1);

 

// 배열을 인자 넣으면 생성 + 초기화

// 중복된 요소 제거

const set2 = new Set([1, 1, 1, 'A', true]);

​

console.log(set2);

 

// has 메서드 - 요소 포함여부 확인

console.log(

set2.has(1),

set2.has('A'),

set2.has(4)

);

 

// delete 메서드 - 요소 제거 & 성공 여부 반환

console.log(

set2.delete('A'),

set2.delete(true),

set2.delete(100)

);

​

console.log(set2);

 

// add 메서드는 결과 셋을 반환

const set3 = set2.add(2);

​

console.log(set3);

 

// 💡 메서드 체이닝을 할 수 있다는 의미

set2

.add(3)

.add(4)

.add(5)

​

// 참조형이므로 둘이 같은 Set을 가리킴

console.log(set2, set3);

 

// size 프로퍼티 - 요소의 개수

console.log(

set2.size

);

 

// keys, values, entries 메서드 - 값 / 값 / [값, 값] 반환

// key를 value와 같이 취급

console.log(

set2.keys(),

set2.values(),

set2.entries()

);

 

// clear 메서드 - 모든 요소들을 삭제

set2.clear();

​

console.log(set2, set3);

💡 참조형 데이터의 경우

const objSet1 = new Set()

.add({ x: 1, y: 2 })

.add({ x: 1, y: 2 })

.add([1, 2, 3])

.add([1, 2, 3]);

​

// 각기 다른 것으로 인식 (참조하는 주소가 다르므로)

console.log(objSet1);

 

const obj = { x: 1, y: 2 };

const arr = [1, 2, 3];

​

const objSet2 = new Set()

.add(obj)

.add(obj)

.add(arr)

.add(arr);

​

// 같은 것들로 인식

console.log(objSet2)

 

console.log(

objSet2

.add({ x: 1, y: 2 })

.add({ x: 1, y: 2 })

.add([1, 2, 3])

.add([1, 2, 3])

);

---

 

II. 이터러블로서의 Set

const arr = ['A', 'B', 'C', 'D', 'E'];

const set = new Set(arr);

1. for ... of 문

for (item of set) {

console.log(item);

}

2. 스프레드 문법

const newArr = [...set];

​

console.log(newArr);

 

// 활용 - 중복을 제거한 배열 반환

const arr1 = [1, 1, 1, 2, 2, 3, 4, 5];

​

const arr2 = [...new Set(arr1)];

​

console.log(arr2);

3. 디스트럭쳐링

const [x, y] = set;

console.log(x);

console.log(y);

 

const [a, b, ...rest] = set;

​

console.log(a);

console.log(b);

console.log(rest);

💡 이터러블과 별개 - forEach 메서드도 사용 가능

// ⚠️ 두 번째 인자가 인덱스가 아님!

// 배열과 달리 순서 개념이 없으므로...

// 형식을 맞추기 위한 인자일 뿐

​

set.forEach(console.log);

​

// 아래의 결과와 같음

// set.forEach((item, idx, set) => {

// console.log(item, idx, set)

// });

 

키와 값의 쌍으로 이루어진 컬렉션

• 표준 내장 객체 중 하나

💡 객체와의 차이:

• 이터러블의 일종 (이터러블의 기능 사용 가능)
• 메서드와 프로퍼티 등의 기능 차이
• 객체나 배열 등의 참조값을 키로 사용 가능
• ⭐️ 키와 값을 보다 자주 변경하는 경우 적합하도록 설계됨

 

I. 기본 사용법

// Map 생성

const map1 = new Map();

​

// set 메서드 - 키와 값의 쌍 추가

map1.set('x', 1);

map1.set(123, 'ABC');

map1.set(true, { a: 1, b: 2 });

​

console.log(map1);

 

// [[키 쌍]...] 배열로 생성 + 초기화

const map2 = new Map([

['x', 1],

[123, 'ABC'],

[true, { a: 1, b: 2 }],

]);

​

console.log(map2);

 

// 키의 중복 불허 - 해당 키 있을 시 덮어씀

map2.set('x', 2);

​

console.log(map2);

 

// has 메서드 - 요소 포함여부 확인

console.log (

map2.has('x'),

map2.has('y')

);

 

// get 메서드 - 값에 접근

console.log(

map2.get('x'),

map2.get(123),

map2.get(true),

​

// 없는 키로 접근시

map2.get('y')

);

 

// 💡 참조값도 키로 사용 가능

const objKey = { x: 1, y: 2 };

const arrKey = [1, 2, 3];

​

map2.set(objKey, 'OBJ_KEY');

map2.set(arrKey, 'ARR_KEY');

​

console.log(map2);

 

console.log (

map2.get(objKey),

map2.get(arrKey),

);

 

// ⚠️ [참조값]이 키임에 유의

// 💡 5-1강의 객체와 비교해 볼 것

console.log(

map2.get({ x: 1, y: 2 }),

map2.get([1, 2, 3])

);

 

// 때문에 이렇게 사용하면 안 됨

map2.set({x: 3, y: 4}, '못꺼냄');

​

console.log(map2);

console.log(

map2.get({x: 3, y: 4})

);

 

// delete 메서드 - 요소 제거 & 성공 여부 반환

console.log(

map2.delete('x'),

map2.delete(objKey),

map2.delete({x: 3, y: 4})

);

​

console.log(map2);

 

// add 메서드는 결과 맵을 반환

// 💡 메서드 체이닝을 할 수 있다는 의미

const map3 = map2

.set(1, 'X')

.set(2, 'Y')

.set(3, 'Z');

​

console.log(map2, map3);

 

// size 프로퍼티 - 요소의 개수

console.log(

map2.size

);

 

// keys, values, entries 메서드 - 키 / 값 / [키, 값] 반환

console.log(

map2.keys(),

map2.values(),

map2.entries()

);

 

// clear 메서드 - 모든 요소들을 삭제

map2.clear();

​

console.log(map2, map3);

---

 

II. 이터러블로서의 Map

const arr = [

['🐶', '강아지'],

['🐱', '고양이'],

['🐯', '호랑이'],

['🐵', '원숭이'],

['🐨', '코알라']

];

const map = new Map(arr);

1. for ... of 문

for ([key, value] of map) {

console.log(key, value);

}

2. 스프레드 문법

const newArr = [...map];

​

console.log(newArr);

3. 디스트럭쳐링

const [x, y] = map;

console.log(x);

console.log(y);

 

const [a, b, ...rest] = map;

​

console.log(a);

console.log(b);

console.log(rest);

💡 이터러블과 별개 - forEach 메서드도 사용 가능

map.forEach(console.log);

​

// 아래의 결과와 같음

// map.forEach((item, idx, set) => {

// console.log(item, idx, set)

// });