JavaScript 문법 종합 2주차(Map&Set)

Map과 Set

이 두 자료 구조는 데이터의 구성, 검색 및 사용을 객체나 배열보다 효율적으로 처리할 수 있기 때문에 많이 각광받고 있다.(여러가지의 데이터 형태이며, array와 object도 자료 구조에 해당된다.) 

 

Map

Map은 key - value 쌍을 저장하는 객체와 비슷하다. Map은 각 쌍의 key와 value을 저장하며, 객체와 달리 key로 사용할 수 있는 모든 유형을 사용할 수 있다.(key에 어떤 데이터 타입, 유형이 모두 들어갈 수 있다.) Map은 key가 정렬된 순서로 저장되기 때문에, 추가한 순서대로 반복할 필요가 없다. Map을 사용하면 다음과 같은 작업을 수행할 수 있다.

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

Map 생성

Map() 생성자를 사용해서 새로운 Map을 만든다.

const myMap = new Map();

 

Map에 값을 추가

set( ) 메소드를 사용한다.

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

 

Map에서 값을 검색

get( ) 메소드를 사용한다.

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

---

💫Map의 반복

Map에서는 keys( ), values( ), entries( ) 메소드를 사용하여 키, 값 및 키-값 쌍을 반복할 수 있다.

💡 [for …of 반복문]

for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문이다. for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야 한다.(직접 명시 가능).

iterator는 반복자라는 의미로, 요소 하나하나를 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 열거되어있는 자료구조로 이해하면 된다.

 

keys( )

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

// keys()
console.log(myMap.keys());
// [Map Iterator] { 'one', 'two', 'three' }

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

// 하나하나돌릴 변수명 = of 뒷부분에서 하나하나 돌아가면서 배정되는 key
// for (const 하나하나돌릴 변수명 of myMap.keys()) {
//    처리할 logic
// }; 
for (const key of myMap.keys()) {
  console.log(key);
}
// one
// two
// three

 

values( )

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

// values( )
console.log(myMap.values());
// [Map Iterator] { 1, 2, 3 }

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

// value = of뒤의 myMap.values()에서 하나하나 돌아가며 배정하는 value
for (const value of myMap.values()) {
  console.log(value);
}
// 1
// 2
// 3

 

 

entries( ) 

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

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

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

// entry = of뒤의 myMap.entries()에서 하나하나 돌아가며 배정하는 value
for (const entry of myMap.entries()) {
  console.log(entry);
}
// [ 'one', 1 ]
// [ 'two', 2 ]
// [ 'three', 3 ]

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

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

// 배열로 되서 한줄한줄로 돌아가면서 나오는거 그래서 인덱스로 0번과1번인거
// one: 1
// two: 2
// three: 3

---

Map의 크기 및 존재 여부 확인

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

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

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

 

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

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

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

---

set

Set은 고유한 값을 저장하는 자료 구조이다. Set은 값만 저장하며, 키를 저장하지 않는다. Set은 값이 중복되지 않는 유일한 요소로만 구성된다. Set을 사용하면 다음과 같은 작업을 수행할 수 있다.

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

set생성 및 사용

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

const mySet = new Set();

 

Set에 값을 추가

add() 메소드를 사용한다.

const mySet = new Set();

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

 

Set에서 값을 검색

has() 메소드를 사용한다.

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 똑같은 요소를 추가하면 중복으로 처리하여 2를 출력하게 되는것

const mySet = new Set();

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

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

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