[JS] Map, Set 자료형 심화 이해

iterable 객체

정의

• for…of 반복문을 적용할 수 있는 객체로 Symbol.iterator가 구현된 객체
• for…of 문은 Symbol.iterator를 자동으로 호출함.
• 배열, 문자열이 대표적 사례이며 객체는 iterable이 아닌 대표적 사례

개념 심화

• 관심사의 분리 원칙에 근거해 object[Symbol.iterator] 활용

  let range = {
    from: 1,
    to: 5
  };
  
  // 1. for..of 최초 호출 시, Symbol.iterator가 호출됩니다.
  range[Symbol.iterator] = function() {
  
    // Symbol.iterator는 이터레이터 객체를 반환합니다.
    // 2. 이후 for..of는 반환된 이터레이터 객체만을 대상으로 동작하는데, 이때 다음 값도 정해집니다.
    return {
      current: this.from,
      last: this.to,
  
      // 3. for..of 반복문에 의해 반복마다 next()가 호출됩니다.
      next() {
        // 4. next()는 값을 객체 {done:.., value :...}형태로 반환해야 합니다.
        if (this.current <= this.last) {
          return { done: false, value: this.current++ };
        } else {
          return { done: true };
        }
      }
    };
  };
  
  // 이제 의도한 대로 동작합니다!
  for (let num of range) {
    alert(num); // 1, then 2, 3, 4, 5
  }
  

• 참고: https://ko.javascript.info/iterable

개념 비교 vs. array-like

• 공통점: push, pop 불가 ⇒ Array.from으로 배열 바꿔주면 해결
• 차이점: array-like와 달리 숫자 index와 length 프로퍼티가 없음

 

종류

Map

• 정의: 객체와 유사하게 key, value 쌍을 가지며, key에 다양한 자료형을 가질 수 있음.

const map = new Map() //iterable object를 인자로 받음.
map.set(key, value) 
map.delete(key) = value
map.get(key) = value

map.has(key) = ture

map.size = number

map.forEach(value, key, map)

map.keys() map.values() map.entries() returns iterable object

Set

• 정의: 배열과 유사하나 중복을 허용하지 않은 컬렉션
• 특징
  • 중복 값 여부 찾기에 특화
  • arr.find 는 배열 내 요소 전체를 뒤지기 때문에 성능이 떨어짐

const set = new Set() //iterable object를 인자로 받음. 

set.add(value), set.delete(value) 

set.has(value) = boolean

set.size 

set.forEach(value, valueAgain, set) => {}

set.keys() set.values() set.entries() returns iterable obejct