JS 에서의 Map , Set

기존에 있던 객체나 배열만으로는 프로그래밍 적으로 부족한 부분들이 있어서 그걸 보완하기 위해서 등장함. 

고게 바로 Map, Set 같은 자료구조(여러가지 자료구조의 형태 예를들면 array(배열) , object(객체) 같은)!!

 

Map과 Set 의 목적 

데이터의 구성, 검색, 사용을 효율적으로 처리한다. 기존의 객체 또는 배열보다. 

 

 

Map

 

key 와 value 를 저장하는 객체와 비슷하다. 

객체랑 다른 점은 객체는 key 값으로 stri 형태의 타입이 들어오는데,

Map에는 key 값으로 어떤 데이터 타입이든 올 수 있다. 

Map은 key가 정렬된 순서로 저장되기 때문이다. 

또한 Map은 대량 데이터를 처리하려고 많이 쓴다.  so 반복을 하는 부분이 매우 중요

 

 

제공하는 기능들은 

• 키-값 쌍 추가 및 검색(set)
• 키-값 쌍 삭제(delete)
• 모든 키-값 쌍 제거(clear)
• Map 크기 및 존재 여부 확인(size)

 

 

 💡 [맵에는 다음과 같은 주요 메서드와 프로퍼티가 있습니다]

• new 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.size – 요소의 개수를 반환합니다. </aside>

 

 

프로퍼티와 메소드의 정의를 살짝 보자면,

프로퍼티는 object를 위해서 데이터를 저장한다.

메소드는 object가 요청 받을 수 있는 액션이다.

[출처] [JavaScript] property란 무엇인가?|작성자 AIdev   | 마이크로소프트 에서 정의.

 

 

<Map 생성 및 사용>

새로운 Map을 만들려면 Map() 생성자를 사용합니다.

const myMap = new Map();

이제 Map에 값을 추가하려면 set() 메소드를 사용합니다.

myMap.set('key', 'value');

Map에서 값을 검색하려면 get() 메소드를 사용합니다.

console.log(myMap.get('key')); // 'value' 출력

 

get 과 set 은 세튜세튜 임을 기억하장

 

또한 Map은 대량 데이터를 처리하려고 많이 쓴다고 했는데, 그래서 반복을 하는 부분이 매우 중요 하다고 한다. 

Map의 반복

 

💡 [for …of 반복문]

for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다. 

for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 합니다(직접 명시 가능).

var iterable = [10, 20, 30];

for (var valueof iterable) {
  console.log(value);// 10, 20, 30
}

iterator는 반복자라는 말이에요.

요소 하나하나를 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 열거되어있는 자료구조로 이해해주시면 돼요.

아래 예시 코드에서 **myMap.keys()**으로 쓸 수 있는 이유는 **myMap.key()**가 반환하는 값이 iterator이기 때문이에요.

 

 

 

 

const myMap = new Map();

myMap.set('one', 1);

myMap.set('two', 2);

myMap.set('three', 3);

 

console.log(myMap.keys());

for (const key of myMap.keys()){

     console.log(key);

}

 

console.log(myMap.values());

 

for (const value of myMap.values()){

     console.log(value);

}

 

console.log(myMap.entries());

 

for (const entry of myMap.entries()) {

     console.log(entry);

}

 

 

 

실행결과 

 

[Map Iterator] { 'one', 'two', 'three' }
one
two
three
[Map Iterator] { 1, 2, 3 }
1
2
3
[Map Entries] { [ 'one', 1 ], [ 'two', 2 ], [ 'three', 3 ] }
[ 'one', 1 ]
[ 'two', 2 ]
[ 'three', 3 ]

 

<Map의 크기 및 존재 여부 확인>

Map의 크기를 확인하려면 size 속성을 사용합니다.

 

console.log(myMap.size); // 3 출력

 

 

특정 키가 Map에 존재하는지 여부를 확인하려면 has() 메소드를 사용합니다.

 

console.log(myMap.has('two')); // true 출력

 

 

set

고유한 값을 저장하는 자료구조,

값만 저장한다. 

키를 저장하지는 않는다. 

값이 중복하지 않는 유일한 요소로만 구성된다. 
값을 추가하거나, 검색하거나, 값을 삭제하거나, 모든 값을 제거하거나, 존재 여부 확인을 한다. 

 

 

const mySet = new Set();

mySet.add('value1');

mySet.add('value2');

 

console.log(mySet.size)

 

출력값은 2

 

근데 만약

const mySet = new Set();

mySet.add('value1');

mySet.add('value2');

mySet.add('value2');

 

console.log(mySet.size)

 

이렇게 있어도  출력값은 2가 나온다.

value2 라는 값이 중복되었기 때문에.

 

 

 

console.log(mySet.has('value2'));

 

만약 위와같이 has( ) 메소드를 사용하여 존재여부를 확인해 본다면 true 값이 나오는 것 또한 확인 할 수 있다. 

만약 저기서 value5라고 입력한다면 출력값은 false가 나올것임을 예상할 수 있다. 없는 존재이기 때문에!!

 

자 그럼 set 문들의 values 들을 반복해서 출력해 보자.

 

 

const mySet = new Set();

mySet.add("value1");

mySet.add("value2");

mySet.add("value3");

mySet.add("value5");

mySet.add("value8");

 

for(const value of mySet.values()){

     console.log(value);

}

 

 

이렇게 하면 결과는

value1
value2
value3
value5
value8