[JavaScript] Map, Set

내일배움캠프: Node.js_4기

18일차 TIL

~오늘의 수강 과목~

1. JavaScript 문법 종합반 2주차 (최원장 튜터님)

_ Map, Set

모던 자바스크립트 핵심 가이드(알베르토 몬탈레시) 서적도 추가로 참고

 

---

Map과 Set은 ES6 문법에서 새로 생긴 자료구조

데이터의 구성, 검색, 사용을 기존의 객체, 배열보다 효율적으로 처리하기 위함

 

 

Map

key : value

key가 정렬된 순서로 저장되기 때문에 key에 어떤 데이터 타입도 전부 들어올 수 있음

검색, 삭제, (완전한)제거 여부 확인

 

const myMap = new Map();

Map을 새롭게 생성

이제 Object(key: value)처럼 map에 값을 넣어 줄 차례

 

mayMap.set('key', 'value')

myMap.get('key')

Map에는 항상 set을 이용하여 데이터를 넣어줘야 함

set으로 넣어준 값은 get을 통해 검색이 가능

(get과 set은 항상 페어)

값을 셋팅하다 / 값을 겟해오다 <<이렇게 외우기

 

---

Map은 보통 대량 데이터를 처리하려고 사용하기 때문에, 반복적인 부분이 중요

이터레이터(iterator)라는 반복자를 가지고 있으면 값을 하나하나 순회하며 체크가 가능

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

 

반복을 위해 Map에서 사용하는 메서드

keys() : key로 이루어진 이터레이터들이 나옴 (= 반환하는 값이 이터레이터)

values() : value로 이루어진 이터레이터들이 나옴

entries() : key와 value로 이루어진 이터레이터들이 나옴

 

이렇게 뽑은 값을 for of 혹은 forEach로 반복문을 돌릴 수 있는 것이 map의 장점

 

 

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'}

여기에서 콘솔에 출력된 부분이 이터레이터

 

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

// 출력 결과
// one
// two
// three

for of 메서드로 myMap의 key를 하나하나 돌려가며 순회 후 출력

(여기서 key는 of의 뒷부분에서 하나하나 돌아가며 배정)

추후 이렇게 출력 뿐만 아니라 필터링, 값의 입력 등 여러 방면으로 활용 가능

 

keys가 아닌 values로 돌려도 마찬가지!

 

 

console.log(myMap.entries());

// 출력 결과
// [Map Iterator] { ['one', 1], ['two', 2], ['three', 3] }

 

entries로 예제로 살펴보기

entries는 출력 시 [묶인 배열]이 {이터레이터}를 통해 담겨서 나옴

 

for (const entry of myMap.entries() {
	console.log(entry);
}

// 출력 결과
// [ 'one', 1 ]
// [ 'two', 2 ]
// [ 'three', 3 ]

 

 

그 외

console.log(myMap.size); // map의 사이즈(길이)
console.log(myMap.has.("two1")); // key 기반 검색(특정 key가 존재하는지 검색. 이런 key를 가지고 있는 value가 있는지)

// 출력 결과
// 3
// false

 

 

 

Set

중복되지 않는(=유일한) 고유한 값을 저장하는 자료구조

Map과 다르게 value만 저장 (key X)

 

const mySet = new Set();

새로운 Set 생성

 

mySet.add(‘value1’); 
mySet.add(‘value2’);
mySet.add(‘value2’); // 여기 주목. 3이 아니라 2임

console.log(mySet.size); // 2 출력. 똑같은 값을 추가하면 중복된 값으로 인식하기 때문

Map과 다른 점

• 값은 set이 아닌 add로 추가
• key가 없으므로 value만 넣음
• 유일한 값만 있어야 하기 때문에 value 중 중복되는 값이 있으면 합쳐짐

 

console.log(mySet.has(‘value1’); // true
console.log(mySet.has(‘value2’); // true
console.log(mySet.has(‘value3’); // false

 

이제 이터레이터로 반환해보기

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

// 출력 결과
// value1
// value2

Map과 달리 for of에서 key, value, entry 같은 선택지가 없고 무조건 value만 가능

 

 

---

 

점점 읽을 수 있게 된ㅋㅋ 책

오늘의 메모

• 개인과제 시작하고 바로 팀 과제로 넘어가느라 집중력도 떨어지고 강의를 들어도 들은 것 같지가 않았다. 오늘은 노드로 넘어가는 날이고 부랴부랴 복습 아닌 복습(이유: 분명 강의를 들었는데도 초면같음) 중이다ㅠㅠ
• 그래도 과제에서 코드에 먼저 몸통박치기 하고 난 이후에 개념을 다시보니 확실히 알것같은 기분이다. 
• 오늘 분량도 강의 들을 당시에는 흠? 스러웠는데 과제에서 forEach를 사용한 후에 다시 들어보니 감이 잡힌다.
• 원래 내배캠 시작한 이후로 늘 주말은 비워두고 있긴 한데 새로 받은 노드 강의 슥 훑어보니 내 페이스로는 평일은 물론이고 주말에 하루종일 들어도 뭔가 모자랄것같다🙄

 

내일의 목표

1. 노드 기초 강의 시작하기

 

앞으로의 목표

1. 노드 수업 잘 적응하기
2. 노드 숙련주차 전까지 js 기초도 열심히 보기