Map과 Set(JavaScript)

Map 객체는 키와 값을 한 쌍으로 이루어진 컬렉션이다.

 

Map 객체는 Map 생성자 함수로 생성한다.

 

const map = new Map();

 

Map 객체는 데이터를 추가할 때 Map.prototype.set 메서드를 사용한다.

// map 선언
const map = new Map();

// map 값 추가 #1
map.set('key1', 'value1');
map.set('key2', 'value2');

// map 값 추가 #2
map
  .set('key1', 'value1')
  .set('key2', 'value2');

console.log(map); // Map(2) { 'key' => 'value', 'key2' => 'value' }

 

또한, 중복된 키가 있을 때는 Map 객체에 새로운 키가 저장되지않고, 값을 덮어쓴다.

// map 선언
const map = new Map([['key1', 'value1'], ['key1', 'value2']]);
console.log(map); // Map(1) { 'key1' => 'value2' }

 

 

Map 객체의 값을 삭제하려면 Map.prototype.delete 메서드를 사욯한다.

 

또한 Map의 모든 값을 삭제할 경우에는 Map.prototype.clear 메서드를 사용한다.

 

// map 선언
const map = new Map([['key1', 'value1'], ['key2', 'value2']]);

// map 값 삭제
map.delete('key1')
console.log(map); // Map(1) { 'key2' => 'value2' }

// map 모든 값 삭제
map.clear();
console.log(map); //Map(0) {}

 

 

Map 객체의 값들을 반복하려면 Map.prototype.forEach 메서드를 사용한다.

 

이 떄 forEach가 받는 콜백 함수의 인자는 3가지(값, 키, map)이다.

// map 선언
const map = new Map([['key1', 'value1'], ['key2', 'value2']]);

map.forEach((val, key) => {
  console.log(val + "," + key);
});

// 결과입니다
// value1,key1
// value2,key2


// key값 가져오기
for (let key of map.keys()){
    console.log("key : " + key);
}
// 결과입니다
// key : key1
// key : key2


// value 값 가져오기
for (const value of map.values()) {
    console.log("value : " + value);
}
// 결과입니다
// value : value1
// value : value2


// entries 반복문
for (let[key, value] of map.entries()) {
    console.log(key + " : " +value);
}
// 결과입니다
// key1 : value1
// key2 : value2

 

 

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

• map.get(key): key에 해당하는 값을 반환
• map.has(key): key가 존재하면 true, 존재하지 않으면 false를 반환
• map.size: 요소의 개수를 나타냄

 

 

 

 

 

 

 

Set 객체는 중복되지 않는 값들의 집합이다. Set을 통해 교집합, 합집합, 차집합 등 수학적 집합 표현이 가능하다.

 

Set은 Set 생성자 함수로 생성한다.

const set = new Set();

 

 

Set 객체에 값을 추가할 떄는 Set.prototype.add 메서드를 사용한다.

// set 선언
const set = new Set();

// set 값 추가 #1
set.add('javascript');
set.add('vue');
set.add('node');

// set 값 추가 #2
set.add('javascript').add('vue').add('node');

console.log(set); // Set(3) { 'javascript', 'vue', 'node' }

 

또한, Set은 종복된 값의 추가를 허용하지 않는다.

// set 선언
const set = new Set();
set.add('apple').add('banana').add('banana');

console.log(set); // Set(2) { 'apple', 'banana' }

 

 

Set 객체의 값을 삭제하려면 Set.prototype.delete 메서드를 사용한다.

// set 선언
const set = new Set(['apple', 'banana', 'orange']);

// set 값 삭제
set.delete('banana')
console.log(set); // Set(2) { 'apple', 'orange' }

// set 전체 값 삭제
set.clear();
console.log(set); // Set(0) {}

 

 

Set 객체의 값들을 순회하려면 Set.prototype.forEach 메서드를 사용한다.

 

이 때, forEach가 받는 콜백함수의 인수는 3가지(요소 값, 요쇼 값, Set)이다.

// set 선언
const set = new Set(['apple', 'banana', 'orange']);

// set 값 순회
set.forEach((val, val2, set) => {
 console.log(val, val2, set);
});
// 결과입니다.
// apple apple Set(3) { 'apple', 'banana', 'orange' }
// banana banana Set(3) { 'apple', 'banana', 'orange' }
// orange orange Set(3) { 'apple', 'banana', 'orange' }

for (const val of set) {
 console.log(val);
}
// 결과입니다.
// apple
// banana
// orange


// key 값 가져오기
for (const key of set.keys()) {
   console.log(key);
}
// 결과입니다
// apple
// banana
// orange


// value 값 가져오기 , set 에서 values() 는 keys()와 같습니다.
for (const value of set.values()) {
   console.log(value);
}
// 결과입니다
// apple
// banana
// orange


// 추가된 순서대로 반환됩니다.
for (const [key, value] of set.entries()) {
   console.log("key" + " = " + key);
   console.log("value" + " = " + value);
}
// 결과입니다
// key = apple
// value = apple
// key = banana
// value = banana
// key = orange
// value = orange

 

 

Set의 주요메서드와 프로퍼티는 다음과 같다.

 

• set.has(value): value가 존재하면 true, 존재하지 않으면 false를 반환한다.
• set.size: Set 객체가 가진 원소의 수를 나타낸다.

 

 

 

Set을 사용하면 Array의 중복된 데이터를 쉽게 제거할 수 있다.

 

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

const arrCopy = [...new Set(arr)];

console.log(arrCopy); // [ 1, 2, 3, 4, 5 ]