[JavaScript] ES6 Map과 Set
ES6 문법인 Map과 Set을 알아보자.
1. 맵 (Map)
Map은 객체(Obj)처럼 key-value 한 쌍으로 이루어져 있다. 하지만 키 값으로 문자열만 사용할 수 있는 객체와는 다르게 map은 다양한 자료형을 사용할 수 있고, 순서가 존재한다.
map의 특징을 하나씩 알아보자.
1.1 Map 생성
1
2
3
4
5
6
7
8
//case 1.
let player = new Map();
//case 2.
let player = new Map([['31', 'son']]);
//case 3.
let player = new Map().set(31, 'son');
비어있는 map을 생성할 수도 있고 선언과 동시에 값을 지정할 수 있다. 앞에서 말한 것처럼 key-value 형태로 저장되며 key는 문자열을 포함한 다른 자료형을 사용할 수 있다.
1.2 요소 접근
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//map 생성
let player = new Map();
//값 세팅
player.set('TOT', 'Son');
player.set('NAP', 'Kim');
player.set(1, 'num').set('1','str');
//요소 접근
player.get('TOT'); //result : Son
//key의 자료형 비교
player.get(1); //result : num
player.get('1'); //result : str
set을 이용하여 map에 데이터를 세팅하고 get을 사용해서 데이터에 접근한다. map에서는 key가 ‘1’ 또는 1로 저장되어도 key의 타입을 변환하지 않고 유지하기 때문에
player.get(1)과 player.get(‘1’)의 값이 다르게 출력된다.
map은 객체와 다르게 map[key]로는 호출할 수 없으니 주의하자.
1.3 Map의 주요 메서드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//map 생성
let player = new Map();
//데이터 set
player.set('TOT', 'Son');
player.set('NAP', 'Kim');
//데이터 get
player.get('TOT'); //result : Son
//키의 존재여부
player.has('TOT'); //result : true
//키 값 삭제
player.delete('TOT'); //result : true
//요소 개수 반환
player.size; //result : 1
//모든 요소 제거
player.clear();
map의 생성과 set, get은 알아봤고 처음 나온 몇 가지만 알아보고 넘어가도록 하자.
** 주요 메서드
| 메서드 | 설명 |
|---|---|
| has | 키 값의 존재여부를 판단하고 true, false로 값을 반환한다. |
| delete | 매칭되는 키 값을 삭제한다. 삭제에 성공하면 true, 아니면 false를 반환한다. |
| size | map의 요소 개수를 반환한다. |
| clear | map의 모든 요소를 제거한다. |
1.3 객체의 key 허용
map은 객체(obj)를 key로 사용할 수 있다.
1
2
3
4
5
6
7
let player = { name : 'Son'};
let team = new Map();
team.set(player, 'TOT');
team.get(player); //result : TOT
1.4 Map의 순회
map에서 반복작업을 할 때 keys(), values(), entries(), forEach 4가지를 사용한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let player = new Map();
player.set('TOT', 'Son').set('NAP', 'Kim');
//foreach
player.forEach((value, key) => {
console.log(value, key);
});
//for-of
for(let key of player.keys()){
console.log(key);
}
for(let value of player.values()){
console.log(value);
}
for(let entry of player.entries()){
console.log(entry);
}
위 처럼 4가지를 사용하는데 for-of문의 경의 위의 코드처럼 사용할 수 있지만 아래와 같이 사용도 가능하다.
1
2
3
4
5
6
7
8
9
10
11
12
//for-of
for(let [key] of player){
console.log(key);
}
for(let [value] of player){
console.log(value);
}
for(let map of player){
console.log(map);
}
각각 순서대로 key, value, 전체를 조회하는 코드이다.
1.5 맵(Map) <-> 객체(Obj) 변환
key를 갖는다는 서로 비슷한 특징을 갖고 있어서 그런가 map과 obj는 서로 변환이 가능하다.
1.5.1 Map -> Obj
1
2
3
4
5
let player = new Map();
player.set('TOT', 'Son').set('NAP', 'Kim');
let obj = Object.fromEntries(player);
console.log(obj);
1.5.2 Obj -> Map
1
2
3
4
5
6
7
let obj = {
TOT : "Son",
NAP : "Kim",
}
let player = new Map(Object.entries(obj));
console.log(player);
위와 같이 변환 후 데이터에 접근해보자. 데이터의 접근 방식을 통해 정상적으로 변환이 이루어졌는지 확인할 수 있다.
2. 셋 (Set)
Set은 중복을 허용하지 않는 값을 모아놓은 컬렉션으로 키가 없는 값을 저장한다.
2.1 Set 생성
1
2
3
4
5
//case 1.
let player = new Set();
//case 2.
let player = new Set().add('Son');
2.2 Set을 통한 배열의 중복제거
중복을 허용하지 않는다는 set의 특성을 이용해 손쉽게 배열의 중복을 제거할 수 있다.
중복이 있는 배열을 Set 객체로 만들고 전개연산자를 통해 다시 배열로 만들면 중복 요소가 제거된 배열을 얻을 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//배열의 중복제거
let arr = [1,2,3,2,3,4];
let setArr = [...new Set(arr)];
console.log(setArr); //result : [1,2,3,4]
//중복을 제거한 배열의 합
let arr1 = [1,2,3];
let arr2 = [2,3,4];
let addArr = [...new Set([...arr1, ...arr2])];
console.log(addArr); //rseult : [1,2,3,4]
//텍스트 중복제거
let txt = "Hello";
let setTxt = new Set(txt);
console.log(setTxt); //result : Set(4) {'H','e','l','o'}
또한 Set은 NaN의 비교는 동일한 값이라고 판단하여 중복 추가를 허용하지 않고, 0과 -0의 경우 역시 동일한 값으로 판단하여 중복추가를 허용하지 않는다.
1
2
3
4
5
6
7
8
let set = new Set();
set.add(0).add(NaN);
0 == -0; //result : true
set.add(-0); //result : Set(2) {0,NaN}
NaN == NaN; //result : false
set.add(NaN); //result : Set(2) {0, NaN}
2.3 Set의 주요 메서드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//Set 생성
let set = new Set();
//데이터 추가
set.add('apple');
set.add('banana');
//키의 존재여부
set.has('apple'); //result : true
//키 값 삭제
set.delete('apple'); //result : true
//요소 개수 반환
set.size; //result : 1
//모든 요소 제거
set.clear();
Set의 메서드 역시 Map과 비슷하다.
** 주요 메서드
| 메서드 | 설명 |
|---|---|
| has | 키 값의 존재여부를 판단하고 true, false로 값을 반환한다. |
| delete | 매칭되는 키 값을 삭제한다. 삭제에 성공하면 true, 아니면 false를 반환한다. |
| size | set 요소 개수를 반환한다. |
| clear | set의 모든 요소를 제거한다. |
2.4 Set의 순회
Set도 Map과 마찬가지로 반복작업을 시행할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let player = new Set();
player.add('Son').add('Kim').add('Ki');
//foreach
player.forEach((value, key) => {
console.log(value, key);
});
//for-of
for(let key of player.keys()){
console.log(key);
}
for(let value of player.values()){
console.log(value);
}
for(let entry of player.entries()){
console.log(entry);
}
Set은 키가 없기 때문에 key와 value가 동일한 값이 나온다. 그리고 위 Map의 샘플코드처럼 동일하게 for-of문을 사용할 수도 있다.