dh_0e

[JavaScript] Map/Set 본문

내일배움캠프/HTML,CSS,JavaScript

[JavaScript] Map/Set

dh_0e 2024. 4. 24. 21:13

 

Map

 

Map은 Object와 유사하지만 Key에 어떠한 데이터타입도 들어올 수 있으며 키가 정렬된 순서로 저장된다는 차이점이 있음

반복자를 활용하여 for .. of로 사용이 가능하며 다음과 같은 메소드로 삽입과 검색을 실행함

Map.set(Key, value) 데이터 삽입

Map.get(Key) 데이터 검색

const myMap = new Map();

myMap.set(1, 1);
myMap.set(2, 2);
myMap.set("aaa", 3);
myMap.set("bbb", 4);

console.log(myMap.get(1)); // 1
console.log(myMap.get("bbb")); // 4

console.log(myMap); // Map(4) { 1 => 1, 2 => 2, 'aaa' => 3, 'bbb' => 4 }

 


반복을 위한 method - keys, values, entries

Map.keys() Key들로 이뤄진 반복자
Map.values() value들로 이뤄진 반복자
Map.entries() Key와 value들이 각각 배열로 묶여 이뤄진 반복자

const myMap = new Map();

myMap.set(1, 1);
myMap.set(2, 2);
myMap.set("aaa", 3);
myMap.set("bbb", 4);

for (const key of myMap.keys()) {
    console.log(key); // 1 2 aaa bbb
}

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

for (const entrie of myMap.entries()) {
    console.log(entrie); // [ 1, 1 ] [ 2, 2 ] [ 'aaa', 3 ] [ 'bbb', 4 ]
}

 


Map.size Map의 사이즈

Map.has(A) Map에 A가 Key로 존재하는지 (boolean)

const myMap = new Map();

myMap.set(1, 1);
myMap.set(2, 2);
myMap.set("aaa", 3);
myMap.set("bbb", 4);

console.log(myMap.size); // 4
console.log(myMap.has(1)); // true
console.log(myMap.has("aa")); // false

 

 

Set

 

Set중복되지 않은 유일한 요소로만 이루어져 있으며, key를 저장하지 않고 고유한 값만 저장
Map과 마찬가지로 반복자가 있어 for .. of로 사용이 가능하며 다음과 같은 메소드로 추가와 검색을 실행함
Set.add(value) 데이터 추가
Set.has(value) Set에 value가 있는지 검색Set.values() Set의 value들로 이뤄진 반복자
Set.size Set의 사이즈 반환

const mySet = new Set();

mySet.add(10);
mySet.add(10);
mySet.add(20);
mySet.add(15);
mySet.add(30);

console.log(mySet.size); // 4 (중복 제거됨)
console.log(mySet.has(10)); // true
console.log(mySet.has(25)); // false

for(const value of mySet.values()){
    console.log(value); // 10 20 15 30
}