Javascript "Map" 과 "Set"

 

 

자바스크립트에서 객체(Object)와 배열(Array)을 이용하면 굉장히 다양하고 복잡한 프로그래밍이 가능하다.

그럼에도 현실세계의 여러가지 문제들을 '프로그래밍'적으로 반영하기엔 많이 부족하다.

그래서 Map 과 Set은 이러한 한계를 극복하고자 등장한 자료구조라고 할 수 있다.

 

 

(1)  Map

✅ Map은 키-값 쌍을 저장하는 객체와 비슷하다. Map은 각 쌍의 키와 값을 저장하며, 객체와 달리 키로 사용할 수 있는           모든 유형을 사용할 수 있다. Map은 키가 정렬된 순서로 저장되기 때문에, 추가한 순서대로 반복할 필요가 없다. 

 

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

new Map ( )	맵을 만듭니다.
map.set ( key, value )	key 를 이용해 value를 저장합니다.
map.get ( key )	key 에 해당하는 값을 반환합니다. key 가 존재하지 않으면 undefined 를 반환합니다.
map.has ( key )	key 가 존재하면 true , 존재하지 않으면 false 를 반환합니다.
map.delete ( key )	key 에 해당하는 값을 삭제합니다.
mep.clear ( )	맵 안의 모든 요소를 제거합니다.
map.size	요소의 개수를 반환합니다.

 

 

< Map 생성 및 사용 >

 

const myMap = new Map();

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

 

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

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

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

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

 

< 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);

for (const key of myMap.keys()) {
  console.log(key);
}

for (const value of myMap.values()) {
  console.log(value);
}

for (const entry of myMap.entries()) {
  console.log(`${entry[0]}: ${entry[1]}`);
}

 

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

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

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

 

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

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

 

 

(2)  Set

✅ Set은 고유한 값을 저장하는 자료 구조이다. Set은 값만 저장하며, 키를 저장하지 않는다.

      Set은 값이 중복되지 않는 유일한 요소로 구성된다. Set을 사용하면 다음과 같은 작업이 수행 가능하다.

 

• 값 추가 및 검색
• 값 삭제
• 모든 값 제거
• Set 크기 및 존재 여부 확인

 

< Set 생성 및 사용 >

 

새로운 Set을 만들려면 Set( ) 생성자를 사용한다.

const mySet = new Set();

 

이제 Set에 값을 추가하려면 add( ) 메소드를 사용한다.

mySet.add('value1');
mySet.add('value2');

 

Set에서 값을 검색하려면 has( ) 메소드를 사용한다.

console.log(mySet.has('value1')); // true 출력

 

 

< Set의 반복 >

Set 에서는 values( ) 메소드를 사용하여 값을 반복할 수 있다.

const mySet = new Set();
mySet.add('value1');
mySet.add('value2');
mySet.add('value3');

for (const value of mySet.values()) {
  console.log(value);
}

 

 

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

Set의 크기를 확인하려면 size 속성을 사용한다.

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

 

특정 값을 Set 에서 검색하여 존재하는지 여부를 확인하려면 has( ) 메소드를 사용한다.

console.log(mySet.has('value2')); // true 출력

 

 

 

자바스크립트에서 Map 과 Set은 두 가지의 다른 유형의 자료 구조이다.

Map 은 키(key) - 값(value) 쌍을 저장하는 객체와 비슷하며, 

Set 은 고유한 값(value) 을 저장하는 자료 구조이다. 

Map 및 Set은 모두 값 추가, 검색, 삭제 및 모든 값 제거를 수행할 수 있다.

Map 및 Set을 사용하여 효율적인 데이터 구성 및 검색을 수행할 수 있다.