[JavaScript] Map / Set

SangHun Han·2023년 6월 3일

Map과 Set

Map : Key-Value 쌍을 가지는 객체 자료형의 종류이다.
Set : 모든 타입의 값을 저장하는 객체 자료형의 종류이다, "객체 안의 값은 중복을 허용하지 않음"

Map

Map의 주요 메소드와 프로퍼티

new Map() : 맵 생성
map.set(key,value) : key값을 이용하여 value를 저장
map.get(key) : key값에 해당하는 값을 반환하는데 존재하지 않으면 undefined를 반환
map.has(key) : key값이 존재하면 true, 존재하지 않으면 false를 반환
map.delete(key) : key값에 해당하는 값을 삭제
map.clear() : 맵 안의 모든 요소를 제거
map.size : 맵 안 요소의 크기(개수)를 반환

let map = new Map(); // 맵 생성

// key값을 이용하여 value를 저장
map.set('하나', '1');
map.set(1, '하나');
map.set(true, 1);
map.set(false, 0);

// key값에 해당하는 값을 반환 (존재하면 해당하는 value값을 반환, 존재하지 않으면 undefined 반환)
console.log(map.get('하나'));
console.log(map.get(true));

// key의 값이 있는지 확인 (존재하면 true, 존재하지 않으면 false 반환)
console.log(map.has('하나'));

// key에 해당하는 값을 제거
console.log(map.delete('하나'));
// 제거한 후 key의 값이 있는지 확인 (출력값은 false)
console.log(map.has('하나'));

// 요소의 크기(개수)를 반환
console.log(map.size); // 위에서 '하나'라는 key값의 객체를 제거했으니 3이 출력됨

map[key]는 Map을 쓰는 바른 방법이 아니다.

이런식으로 사용한다면 map을 일반 객체처럼 취급하게 된다.
따라서, map을 사용할 때는 map 전용 메소드인 set, get 등을 사용해야만 한다.

Map과 Object의 차이

Map 객체와 Object는 둘 다 key와 value 관계를 가진다는 점에서 비슷해 보이지만, 차이점은 존재한다.

Object의 key값은 문자열 타입으로만 지정해야 하지만, Map의 key값은 모든 값을 가질 수 있습니다.
Object는 크기를 사용자가 직접 수동으로 알아내야 하지만, Map은 size라는 메소드를 통해 크기를 쉽게 얻을 수 있습니다.

let aaa = new Map();
aaa.set('one', 1);
aaa.set('two', 2);
aaa.set('three', 3);

console.log(aaa.size); // 3

bbb = {one : 1, two : 2, three :3};
console.log(bbb.length); // undefined
console.log(bbb.size); // undefined

Set

Set의 주요 메소드와 프로퍼티

new Set(iterable) - 셋을 생성
(이터러블 객체를 전달받으면 그 안의 값을 복사해 셋이 넣어줌) : 보통은 배열을 전달받음
set.add(value) - 값을 추가하고 셋 자신을 반환
set.delete(value) - 값을 제거 호출 시점에 set 내에 값이 존재하여 제거에 성공하면 true, 아니면 false를 반환
set.has(value) - set 내에 값이 존재하면 true, 아니면 false 를 반환
set.clear() - set을 비워줌
set.size() - set에 몇개의 값이 있는지 카운트

// Set을 생성
let set = new Set('abcde');
console.log(set); 			// {'a', 'b', 'c', 'd'. 'e'}

// Set에 값을 추가하기
set.add('f');
console.log(set); 			// {'a', 'b', 'c', 'd'. 'e', 'f'}

// Set을 순환하기
for (var variable of s) {
  console.log(variable); 	// a, b, c, d, e, f
}

// 값이 배열인 경우
let s = new Set('abcde'.split(''));
console.log(s); 			// {'a', 'b', 'c', 'd'. 'e'}

// Set의 값을 제거하기
s.delete('b'); 				// true

// Set의 값을 확인하기
console.log(s.has('a'));    // true

// Set의 모든 값을 제거하기 
s.clear
console.log(s); 		  // {'a', 'c', 'd', 'e'}