[TIL] 3주차 금요일. JavaScript 문법 종합반 - Map, Set. 팀 과제 - 영화 검색 사이트 디벨롭 (3)

Minji Kim·2024년 5월 3일

내배캠TIL

목록 보기

15/73

1. JavaScript 문법 종합반 - Map

Map, Set의 목적: 데이터의 구성, 검색, 사용을 효율적으로 처리. 기존의 객체 또는 배열보다.

Map

key / value 페어를 저장

key에 (객체와는 다르게) 문자 뿐이 아닌 어떤 데이터 타입도 다 들어갈 수 있다.

Map은 key가 정렬된 순서로 저장되기 때문이다.
DB에도 데이터가 저장될 때 정렬된 순서대로 저장되는 기법들이 있는데, 그런 방식을 차용했다고 보면 됨

기능: 검색, 삭제, 제거, 여부 확인

1. get과 set

Map에서 get과 set은 세트라고 보면 됨!

<script>
	const myMap = new Map();
    myMap.set('key', 'value');
    // ...
    myMap.get('key')
</script>

2. Map과 반복문

Map을 쓰는 이유는 대량의 데이터를 사용하기 위해서가 크다. 따라서 '반복'을 하는 부분이 굉장히 중요함.
Map에서 반복을 하기 위한 method: keys(), values(), entries()

3. for ... of 반복문, iterator

for of 구문을 사용하기 위해선 컬렉션 객체가 Symbol.iterator 속성을 가지고 있어야만 한다.

<script>
	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]}`);
    }
</script>

iterator (=반복자) : 요소 하나 하나를 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 열거되어 있는 자료구조로 이해하면 됨. 위 코드에서 myMap.keys()로 쓸 수 있는 이유는 myMap.keys가 반환하는 값이 iterator이기 때문.
set('key', 'value')일 때,
keys는 set에 저장되어 있는 key들로 이루어진 iterator들
values는 set에 저장되어 있는 value들로 이루어진 iterator들
=> for [of key들로 이루어진 iterator들] 을 반복문으로 돌릴 수 있다는 점이 map의 장점이다!

4. Map의 크기; 존재 여부 확인

Map의 크기(길이)를 확인: size 속성 사용

<script>
	console.log(myMap.size); // 3
</script>

특정 key가 Map에 존재하는지 여부 확인: has() 메소드 사용

<script>
	console.log(myMap.has('two')); // true
</script>

2. JavaScript 문법 종합반 - Set

Set

Set도 마찬가지로 자료구조의 일종

고유한 값을 저장하는 자료구조

value(값)만 저장, key는 저장 X

값이 중복되지 않는 유일한 요소로만 구성된다.

값 추가, 검색, 삭제, 모든 값 제거, 존재 여부 확인

1. value 중복 X

<script>
	const mySet = new Set();
    mySet.add("value1");
    mySet.add("value2");
    mySet.add("value2");
   	console.log(mySet.size); // 2 (중복된 값은 저장하지 않음)
</script>