(29) Modern JavaScript - 배열 메소드 : Map, set

Map

Map은 이름이 있는 데이터를 저장하며 이것은 객체와 비슷하다.

즉 객체 처럼 property name을 통해 이름이 있는 여러 값들을 묶을 때 활용한다는 것인데

하지만 할당연산자를 통해 값을 추가하고 점 표기법이나 대괄호 표기법으로 접근하는

일반 객체와 다르게 Map은 메소드를 통해서 값을 추가하거나 접근할 수 있다.

 

new 키워드를 통해서 Map을 만들 수 있고 다음과 같은 메소드를 통해

Map 안의 여러 값들을 다룰 수 있다.

• map.set(key, value): key를 이용해 value를 추가하는 메소드
• map.get(key): key에 해당하는 값을 얻는 메소드. key가 존재하지 않으면 undefined를 반환.
• map.has(key): key가 존재하면 true, 존재하지 않으면 false를 반환하는 메소드
• map.delete(key): key에 해당하는 값을 삭제하는 메소드
• map.clear(): Map 안의 모든 요소를 제거하는 메소드
• map.size: 요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)

---

// Map 생성
const introduce = new Map();

//set 메소드
introduce.set('title','문자열key');
introduce.set('2024',' 숫자형key');
introduce.set('true',' 불린형key');

//get 메소드
console.log(introduce.get('title')) //문자열key
console.log(introduce.get(2024)); // 숫자형key
console.log(introduce.get(true)); // 불린형key

//has 메소드
console.log(introduce.has('title')) // true
console.log(introduce.has('name')) // false

//size 프로퍼티
console.log(introduce.size) // 3

//delete 메소드
introduce.delete(true);
console.log(introduce.get(true)) // undefined
console.log(introduce.size); // 2

//clear 메소드
introduce.clear();
console.log(introduce.get(2024)); // undefined
console.log(introduce.size); // 0

문자열과 심볼 값만 key(프로퍼티 네임)로 사용할 수 있는 일반 개체와는 다르게

Map 객체는 메소드를 통해 값을 다루기 때문에 

다양한 자료형을 key로 활용할 수 있다.

---

Set

Set은 여러 개의 값을 순서대로 저장하며 이것은 배열와 비슷하다.

하지만 배열의 메소드는 활용할 수 없으며

Map과 비슷하게 Set만의 메소드를 통해서 값을 다루는 특징이 있다.

 

Map과 마찬가지로 new 키워드로 Set을 만들 수 있고

다음과 같은 메소드를 통해 Set 안의 여러 값들을 다룰 수 있다.

• set.add(value): 값을 추가하는 메소드. (메소드를 호출한 자리에는 추가된 값을 가진 Set 자신을 반환)
• set.has(value): Set 안에 값이 존재하면 true, 아니면 false를 반환하는 메소드
• set.delete(value): 값을 제거하는 메소드 (메소드를 호출한 자리에는 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환)
• set.clear(): Set 안의 모든 요소를 제거하는 메소드
• set.size: 요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)

---

// Set 생성
const members= new Set();

// add 메소드
members.add('행섭'); // Set(1) {"행섭"}
members.add('양천'); // Set(2) {"행섭,양천"}
members.add('스기따라'); // Set(3) {"행섭,양천,스기따라"}
members.add('힝카인'); // Set(4) {"행섭,양천,스기따라,힝카인"}

// has 메소드
console.log(members.has('행섭')); // true
console.log(members.has('찌듕')); // false

// size 프로퍼티
console.log(members.size); // 4

// delete 메소드
members.delete('넌적혈구'); // false
console.log(members.size); // 4
members.delete('양천') // true
console.log(members.size); // 3

// claer 메소드
members.clear();
console.log(members.size); // 0

일반 객체는 프로퍼티 네임으로, Map은 get 메소드로,

그리고 배열은 index를 통해서 개별 값에 접근할 수있지만

특이하게 Set은 개별 값에 접근하는 방법이 없다.

 

그래서 다음과 같이 반복문을 통해 전체 요소를 한꺼번에 다룰 때 반복되는 그 순간에

개별적으로 접근할 수 있다.

// Set 생성
const members= new Set();

members.add('행섭'); // Set(1) {"행섭"}
members.add('양천'); // Set(2) {"행섭,양천"}
members.add('스기따라'); // Set(3) {"행섭,양천,스기따라"}
members.add('힝카인'); // Set(4) {"행섭,양천,스기따라,힝카인"}

console.log(`--------------------------------`);
console.log(`반복문을 통한 개별 값 접근하기`);

for(const memberList of members) {
  console.log(memberList);
}

---

그런데 이런 단점을 가지고 있음에도,

Set이 유용하게 사용될 때가 있는데

그것은 중복을 허용하지 않는 값들을 모을 때 이다.

다음과 같은 코드를 보면

// Set 생성
const members= new Set();

// add 메소드
members.add('행섭'); // Set(1) {"행섭"}
members.add('양천'); // Set(2) {"행섭,양천"}
members.add('행섭'); // Set(2) {"행섭"}
members.add('스기따라'); // Set(3) {"행섭,양천,스기따라"}
members.add('힝카인'); // Set(4) {"행섭,양천,스기따라,힝카인"}
members.add('힝카인'); // Set(4) {"행섭,양천,스기따라,힝카인"}
members.add('힝카인'); // Set(4) {"행섭,양천,스기따라,힝카인"}
members.add('양천'); // Set(4) {"행섭,양천,스기따라,힝카인"}
members.add('힝카인'); // Set(4) {"행섭,양천,스기따라,힝카인"}

최초에 추가된 순서를 유지하면서

나중에 중복된 값을 추가하려고 하면 그 값은 무시하는 특징이 있다.

 

또한 처음 Set을 생성할 때 아규먼트로 배열을 전달할 수도 있으며

이런 특징을 활용해서 배열 내에서 중복을 제거한 값들의 묶음을 만들 때

다음과 같이 Set을 활용하기도 한다.

const numbers = [1, 3, 4, 3, 3, 3, 2, 1, 1, 1, 5, 5, 3, 2, 1, 4];
const uniqNumbers = new Set(numbers);

console.log(uniqNumbers); // set(5) {1, 3, 4, 2, 5}