[2주차] 자바스크립트 문법 종합반 : Map, Set

자바스크립트 문법 종합반

-Map

-Set

 

---

Map과 Set

JS -> array와 object를 이용해서 많고/다양하고/복잡한 프로그램을 만들어왔다.

그럼에도, 현실세계 반영하기는 부족하다. 프로그래밍적으로 부족한 점을 보완하기 위해 map, set 과 같은 자료구조가 등장했다!
꽤 최근에 등장했다.

그럼 Map, Set 의 목적은?/
: 데이터의 구성/검색/사용을 효율적으로 처리한다. 기존의 객체나 배열보다 훨씬 더 빠르고 효율적으로 처리.

---

Map

// 1. Map
// Map은 키-값 쌍을 저장하는 객체와 비슷합니다. (key - value)
// BUT, 키에 그 어떤 데이터타입도 다 들어올 수 있다
// Why? 키가 정렬된 순서로 저장되기 때문이다. 추가한 순서대로 반복할 필요가 없습니다. 

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


// 1-1. Map 생성 및 사용
// 새로운 Map을 만들려면 Map() 생성자를 사용합니다.
const myMap = new Map(); 
// 이제 Map에 값을 추가하려면 set() 메소드를 사용합니다.
myMap.set('key', 'value');
// Map에서 값을 검색하려면 get() 메소드를 사용합니다.
console.log(myMap.get('key')); // 'value' 출력 // set과 get 항상 같이 붙어다닌다.

// 1-2. Map의 반복
// map을 사용하는 궁극적 이유는 대량 데이터처리이다.
// 따라서 반복을 하는 부분이 중요 -> 
// 반복을 위한 API 메서드: keys(), values(), entries() **여기서 entries는 { [key, value], [key2, value2] } 값의 형태로 나온다. iterator 객체로 감싼것.

// keys(), values(), entries() 모두 iterator(반복자)라는 것을 갖고 있기 때문에 for...of 와 함께 쓸 수 있다. 하나하나 순회하면 체크하면서 처리가 가능.
// map 을 저장할 때, key/value의 페어

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

// console.log(myMap.keys()); // [Map Iterator] { 'one', 'two', 'three' }
// console.log(myMap.values()); // [Map Iterator] { 1, 2, 3 }
// console.log(myMap.entries()); // [Map Entries] { [ 'one', 1 ], [ 'two', 2 ], [ 'three', 3 ] }


for (const key of myMap.keys()) { // for (const 반복돌릴key이름 of map이름.keys()) { console.log(key)}
  console.log(key);
}
// one
// two
// three


for (const value of myMap.values()) {
  console.log(value);
// }
// 1
// 2
// 3

for (const entry of myMap.entries()) {
  console.log(`${entry[0]}: ${entry[1]}`);
}
//one: 1
//two: 2
//three: 3



// 1-3. Map의 크기 및 존재여부확인
// Map의 크기를 확인하려면 size 속성을 사용합니다.
console.log(myMap.size); // 3 출력

// 특정 키가 Map에 존재하는지 여부를 확인하려면 has() 메소드를 사용합니다.
console.log(myMap.has('two')); // true




// 1-4. Map method, property 모음
// `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` – 요소의 개수를 반환합니다.

 

 

---

Set

// 2. Set
// 고유한 값을 저장하는 자료구조다. 
// 값만 저장한다.
// 키를 저장하지 않는다.
// 값이 중복되지 않는 유일한 요소로만 구성된다. (집합을 생각하면 이해가 쉬워짐)

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

// 2-1. set 생성 및 사용
// 새로운 Set을 만들려면 Set() 생성자를 사용합니다.
const mySet = new Set();

// 이제 Set에 값을 추가하려면 add() 메소드를 사용합니다.
mySet.add('value1');
mySet.add('value2');
mySet.add('value3');
// 값이 중복되면 안되니까, 중복되는 것이 있다면 합쳐지는 개념도 유의

// Set에서 값을 검색하려면 has() 메소드를 사용합니다.
console.log(mySet.has('value1')); // true 출력

// ------------------------------------- //
// 집합의 개념, 값이 중복되지 않는 특성을 볼 수 있는 예시

const mySet = new Set();

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

// set의 크기 확인
console.log(mySet.size); // 2 // value2 가 총 2개로 중복되니까 1개로 치부됨.

// set 안에 특정 값 존재 여부확인
console.log(mySet.has('value2')); // true

// ------------------------------------- //


// 2-2. set 의 반복
// Set에서는 values() 메소드를 사용하여 값을 반복할 수 있습니다.
const mySet = new Set();

mySet.add('value1');
mySet.add('value2');
mySet.add('value3');
mySet.add('value4');
mySet.add('value5');

for (const value of mySet.values()) { // map반복에서는 const key 값을 구하려면 key, value 값을 구하려면 value 를 써야했다.
  console.log(value);
}

// value1
// value2
// value3
// value4
// value5

// ------------------------------------- //

// 2-3 set 의 크기 미 존재여부확인
// (1) 크기 확인 : Set의 크기를 확인하려면 size 속성을 사용합니다.
console.log(mySet.size); // 3 출력

// (2) 존재여부확인: 특정 값을 Set에서 검색하여 존재하는지 여부를 확인하려면 has() 메소드를 사용합니다.
console.log(mySet.has('value2')); // true 출력

 

---

JavaScript에서 Map과 Set은 두 가지 다른 유형의 자료 구조이다.

Map 은 키-값 쌍을 저장하는 객체와 비슷하며,
Set은 고유한 값을 저장하는 자료 구조이다.

Map및Set 은 모두 값 추가, 검색, 삭제 및 모든 값 제거를 수행할 수 있다.
Map및Set을 사용하여 효율적인 데이터 구성 및 검색을 수행할 수 있다.