[ES6][중급반] Step 3. 현대적 이터레이션: Map, Set, 그리고 이터러블 프로토콜

1. Map (맵): 객체의 한계를 넘는 키-값 저장소

일반 객체({})는 키로 문자열이나 심볼만 사용할 수 있지만, Map은 어떤 값(함수, 객체 포함)도 키가 될 수 있습니다.

• 데이터 순서 보장: 삽입된 순서대로 요소를 유지합니다.
• 크기 확인 용이: .size 프로퍼티로 데이터 개수를 즉시 알 수 있습니다.
• 성능: 잦은 추가와 제거가 일어나는 시나리오에서 일반 객체보다 성능이 뛰어납니다.

JavaScript

 

const myMap = new Map();

const keyObj = { id: 1 };
const keyFunc = () => {};

myMap.set(keyObj, '객체를 키로 사용');
myMap.set(keyFunc, '함수를 키로 사용');
myMap.set('name', 'Gemini');

console.log(myMap.get(keyObj)); // '객체를 키로 사용'
console.log(myMap.size);        // 3

---

2. Set (셋): 중복 없는 고유한 값들의 집합

배열과 비슷하지만, 중복된 값을 절대 허용하지 않는다는 점이 핵심입니다.

• 중복 제거: 배열에서 중복 요소를 제거할 때 가장 깔끔하게 사용됩니다.
• 값 존재 확인: .has() 메서드를 통해 특정 값이 있는지 확인하는 속도가 배열의 indexOf보다 매우 빠릅니다.

JavaScript

 

const mySet = new Set([1, 2, 2, 3, 4, 4, 5]);

console.log(mySet); // Set(5) {1, 2, 3, 4, 5}
console.log(mySet.has(3)); // true

// 실전 팁: 배열 중복 제거
const uniqueArray = [...new Set([1, 1, 2, 3])]; // [1, 2, 3]

---

3. Iterable Protocol (이터러블 프로토콜)

자바스크립트가 for...of, Spread(...), Destructuring을 수행할 수 있는 이유는 대상이 이터러블 프로토콜을 따르고 있기 때문입니다.

• Iterable (이터러블): Symbol.iterator 메서드를 가지고 있는 객체.
• Iterator (이터레이터): .next() 메서드를 호출하면 { value, done } 객체를 반환하는 객체.

🛠️ 커스텀 이터러블 만들기

JavaScript

 

const customRange = {
  from: 1,
  to: 3,
  [Symbol.iterator]() {
    let current = this.from;
    return {
      next: () => {
        return current <= this.to 
          ? { value: current++, done: false } 
          : { value: undefined, done: true };
      }
    };
  }
};

for (let num of customRange) {
  console.log(num); // 1, 2, 3
}

---

4. for...in vs for...of: 확실히 구분하기

많은 중급 개발자들이 헷갈려 하는 부분입니다.

• for...in: 객체의 **열거 가능한 속성(Key)**을 순회합니다. (배열에서는 인덱스가 나옴)
• for...of: 이터러블의 **요소(Value)**를 순회합니다. (배열, 문자열, Map, Set에 사용 가능)

💡 시니어의 조언: 배열을 다룰 때는 가급적 for...of나 고차 함수(forEach, map)를 사용하세요. for...in은 의도치 않은 상속된 속성까지 순회할 위험이 있습니다.