[JS] Map, Set

🗣️ Map, Set의 개념과 활용 방법에 대해 설명해주세요.

• 의도: 지원자가 ES6에서 도입된 Map과 Set의 개념과 그 활용법을 이해하고 있는지 평가

• 팁
  • Map과 Set의 기본 사용법과 그 장점에 대해 설명한다.
  • 주요 메서드(add, delete, has, clear 등)에 대한 예제를 떠올려본다.

• 모범 답안

  자바스크립트의 Map과 Set은 ES6에서 도입된 새로운 컬렉션 자료구조입니다.

  Map은 키와 값을 한 쌍으로 저장한다는 점에서 객체와 비슷하지만,
  모든 타입의 값을 키로 사용할 수 있고, 키의 삽입 순서를 유지한다는 차이가 있습니다.
  그래서 주로 순서가 중요하거나, 객체 키 외의 값을 키로 사용해야 할 때 활용됩니다.
  예를 들어 API 응답 캐싱, DOM 요소별 데이터 매핑 같은 경우에 유용합니다.

  반면 Set은 중복되지 않는 유일한 값의 집합을 저장하는 자료구조입니다.
  값이 한 번만 존재해야 하는 상황, 예를 들어 중복 제거, 배열에서 고유한 값 추출 등에 자주 사용됩니다.
  삽입 순서도 유지되기 때문에 순회 시에도 안정적입니다.

  두 구조 모두 size, has, delete, clear 같은 메서드를 제공해 데이터 관리가 객체보다 훨씬 직관적이고 효율적입니다.

---

📝 개념 정리

🌟 Map

• 개념
  • 키-값(key-value) 쌍을 저장하는 ES6 컬렉션
  • 키로 모든 자료형 사용 가능 (문자열/숫자/객체/함수/NaN 등)
  • 삽입 순서를 유지하며, 순회 시 그 순서대로 나옴

• 언제 쓰나?

  • 문자열 이외의 값(예: 객체, 함수)을 키로 써야 할 때

    const map = new Map();
    
    const user = { id : 1 };
    function handler() {}
    const notANumber = NaN;
    
    map.set(user, { role: "admin" });
    map.set(handler, { once: true });
    map.set(notANumber, "special");
    
    // 동일 참조로 조회 가능
    console.log(map.get(user)); // { role: "admin" }
    console.log(map.get(handler)); // { once: true }
    console.log(map.get(NaN)); // "special"

    • 객체(Object)의 키는 문자열/심볼로 강제됨 (객체를 키로 넣으면 문자열로 변환되어 충돌/의도치 않은 동작 발생)
    • Map은 모든 타입을 키로 안전하게 사용 가능, 삽입 순서 유지
    • Map은 키를 문자열로 변환하지 않고, "그 객체 참조 자체"를 키로 씀
    • 즉, { id: 1 } 그 객체(메모리 상의 참조)가 그대로 키로 저장됨
    • 그래서 동일한 모양의 다른 객체는 키가 다름

      const user1 = { id: 1 };
      const user2 = { id: 2 }; // 내용 같아도 다른 객체(참조 다름)
      const map = new Map();
      map.set(user1, "A");
      map.get(user1); // "A"
      map.get(user2); // undefined (문자열 키였다면 충돌/혼동이 생겼을 부분)

  • 키 개수를 자주 확인할 때(size) (예: 간단 LRU 캐시 트리밍)

    // 최대 N개까지만 보관하는 캐시: size로 즉시 판단 후 가장 오래된 항목 제거
    const MAX = 3;
    const cache = new Map();
    
    function setCache(key, value) {
      if (cache.size >= MAX) {
        // 가장 먼저 들어온(가장 오래된) 키를 하나 제거
        const oldestKey = cache.keys().next().value;
        cache.delete(oldestKey);
      }
      cache.set(key, value);
    }
    
    setCache("a", 1); // size: 1
    setCache("b", 2); // size: 2
    setCache("c", 3); // size: 3
    setCache("d", 4); // size가 3을 넘기 직전이므로 'a' 제거
    
    console.log([...cache.entries()]); // [ ['b', 2], ['c', 3], ['d', 4] ]
    console.log(cache.size); // 3

    💻 cache.keys()

    • Map의 키 이터레이터(Iterator)를 돌려줌
    • 이 이터레이터는 for...of로 돌릴 수 있고, 내부 순서는 삽입 순서임

    💻 .next()

    • 이터레이터에서 다음 항목 하나를 꺼내라는 뜻
    • 반환값은 { value: <키값>, done: <불리언> } 형태의 IteratorResult 객체
      • value: 이번에 꺼낸 요소
      • done: 더 꺼낼 게 없으면 true, 있으면 false

    💻 .value

    • 위에서 받은 객체에서 키 값만 추출함
    • 즉, 첫 번째(가장 오래된) 키가 들어옴

    • Map.size는 O(1)로 즉시 확인 가능
    • 객체는 키 개수 계산 시 Object.keys(obj).length처럼 매번 순회 비용이 듦
    • 캐시/버퍼처럼 용량 관리가 필요한 곳에 유리함

  • 순서가 중요한 매핑, 캐시, 빈도/카운트 테이블 등

    • 순서 보존 매핑: 폼 필드 - 라벨/검증 순서대로 렌더링

      const fieldMap = new Map([
        ["email", { label: "이메일", required: true }],
        ["password", { label: "비밀번호", required: true }],
        ["nickname", { label: "닉네임", required: false }],
      ]);
      
      // 삽입 순서대로 UI 렌더
      for (const [name, meta] or fieldMap) {
        console.log(`{meta.label} (${meta.required ? "필수" : "선택"})`);
      }
      // 출력 순서: 이메일 → 비밀번호 → 닉네임

    • 캐시(최근 참조를 뒤로 밀기) - 간단한 LRU 접근

      const cache = new Map();
      
      function get(key) {
        if (!cache.has(key)) return undefined;
        const val = cache.get(key);
        // 사용된 항목을 '최신'으로 만들기 위해 삭제 후 재삽입 → 순서 뒤로 이동
        cache.delete(key);
        cache.set(key, val);
        return val;
      }
      
      function put(key, val, max = 3) {
        if (cache.has(key)) cache.delete(key);
        cache.set(key, val);
        if (cache.size > max) {
          const oldestKey = cache.keys().next().value;
          cache.delete(oldestKey);
        }
      }
      
      put("A", 1); put("B", 2); put("C", 3); // A, B, C
      get("A"); // A를 최근으로: B, C, A
      put("D", 4); // 초과: 가장 오래된 B 제거
      console.log([...cache.keys()]); // ['C', 'A', 'D']

    • 빈도/카운트 테이블 (단어 등장 순서 유지해 통계 출력)

      function frequency(list) {
        const freq = new Map();
        for (const item of list) {
          freq.set(item, (freq.get(item) ?? 0) + 1);
        }
        return freq; // 삽입 순서(첫 등장 순서)도 함께 보존
      }
      
      const words = ["a", "b", "a", "c", "b", "a"];
      const table = frequency(words);
      
      for (const [word, count] of table) {
        console.log(`${word}: ${count}`);
      }
      // a: 3 → b: 2 → c: 1 (첫 등장 순서대로)

• 주요 특징
  • 크기: map.size
  • 존재 확인: map.has(key)
  • 추가/갱신: map.set(key, value) (동일 키면 갱신)
  • 조회: map.get(key) (없으면 undefined)
  • 삭제/초기화: map.delete(key), map.clear()
  • 순회: for (const [k, v] of map), map.forEach((v, k) => ...)
  • 키 동등성: SameValueZero

    🔎 SameValueZero란?

    개념

    • 자바스크립트에서 값의 "같음"을 판단하는 규칙(동등 비교 알고리즘) 중 하나
    • 대부분 ===처럼 비교하지만 NaN을 서로 같다고 보고, +0과 -0도 같다고 봄

    비교 규칙 차이표

    비교 규칙	NaN vs. NaN	+0 vs. -0	객체 비교
    === (엄격 동등)	false	true	참조 동일성
    SameValueZero	true	true	참조 동일성
    Object.is	true	false	참조 동일성

    ❓ 참조 동일성(reference equality)

    • "두 값이 메모리에서 같은 객체를 가리키느냐?"를 묻는 개념
    • 두 피연산자가 동일한 객체 인스턴스(같은 참조)를 가리키면 true, 아니면 false

    왜 중요한가?

    Map/Set은 키(또는 값) 동등성을 SameValueZero로 판단함
    그래서 NaN을 키로 써도 정상 동작함

    const m = new Map();
    m.set(NaN, 'ok');
    console.log(m.get(NaN)); // 'ok' (NaN도 같은 키로 인식)
    const s = new Set([NaN, NaN]);
    console.log(s.size); // 1 (중복으로 판단함)

    반면 배열 검색은 규칙이 다를 수 있음

    const array = [NaN];
    array.indexOf(NaN); // -1 (indexOf는 === 규칙 적용)
    array.includes(NaN); // true (includes는 SameValueZero 규칙 적용)

• 이터레이션 & 반환
  • entries / keys / values

    for (const [k, v] of m.entries()) {}
    for (const k of m.keys()) {}
    for (const v of m.values()) {}

  • 객체 ↔ Map

    const m2 = new Map(Object.entries({ a: 1, b: 2 }));
    const obj = Object.fromEntries(m2); // { a: 1, b: 2 }

    💻 Object.entries({ a: 1, b: 2 })

    • 반환: [['a', 1], ['b', 2]] 형태의 [키, 값] 튜플 배열
    • 포함 범위: 열거 가능한(enumerable) 문자열 키만 포함
      • 비열거 프로퍼티는 제외
      • Symbol 키는 제외
    • 키 타입: 문자열로 넘어옴

    💻 new Map(<iterable>)

    • Map 생성자는 [key, value] 쌍들의 이터러블을 받음
    • 위에서 받은 [['a', 1], ['b', 2]]를 넣으면
      • m2.get('a') === 1, m2.get('b') === 2
      • 삽입 순서 유지
    • 포인트: 이 경우 키가 문자열이지만, Map은 원래 모든 타입을 키로 쓸 수 있음(객체, 함수, NaN 등)

    💻 Object.fromEntries(m2)

    • 역할: [key, value] 쌍의 이터러블을 객체 리터럴로 변환
    • m2는 이터러블(Map은 기본 순회가 [key, value])이므로 그대로 전달 가능
    • 결과: { a: 1, b: 2 }

  • 배열 ↔ Map

    const m3 = new Map([["x", 10], ["y", 20]]);
    const arr = [...m3]; // [ ["x", 10], ["y", 20] ]

---

🌟 Map 실전 활용 예제

• API 응답 캐시

  const cache = new Map();
  async function fetchWithCache(url) {
    // 캐시에 있으면 즉시 반환(O(1)))
    if (cache.has(url)) return cache.get(url);
    // 캐시에 없으면 fetch → JSON 파싱
    const res = await fetch(url).then(r => r.json());
    // 결과를 캐시에 저장
    cache.set(url, res);
    // 호출자에 반환
    return res;
  }

  💫 동작 포인트

  • cache는 Map<string, any> 역할: 키는 URL 문자열, 값은 파싱된 응답 객체
  • cache.has(url) → cache.get(url)의 조합으로 캐시 히트를 O(1)로 처리
  • 최초 요청(미스)일 때만 fetch를 수행하고 응답을 set하여 다음 호출 최적화
  • Map을 쓰는 이유: size/has/get/set이 빠르고, 키 충돌 없이 문자열 키를 그대로 사용

  💫 실무에서 바로 생각해야 할 것들

  1. 요청 중복(동시성) 이슈
     동시에 같은 URL이 여러 번 호출되면, 위 코드에선 중복 fetch가 발생할 수 있음
     → "진행 중인 프라미스"를 캐시에 저장하면 해결됨

     const cache = new Map();
     async function fetchWithCache(url) {
       if (cache.has(url)) return cache.get(url); // 값 또는 프라미스 모두 반환 가능 
       const p = fetch(url)
       	.then(r => {
            if (!r.ok) throw new Error(`HTTP ${r.status}`);
            return r.json();
          })
       	.then(data => {
            cache.set(url, data); // 완료 후 실제 데이터로 치환
            return data;
          })
       	.catch(err => {
            cache.delete(url); // 실패 시 캐시에서 제거 (불량 프라미스 남지 않게)
            throw err;
          });
       cache.set(url, p); // "진행 중인 프라미스" 캐싱 → 중복 요청 방지
       return p;
     }

  2. 만료(TTL)/무효화
     데이터가 오래되면 갱신해야 함
     → 간단히 타임스탬프를 함께 저장하거나 LRU + TTL을 도입함

     const cache = new Map(); // url -> { data, ts }
     const TTL = 60_000; // 60s
     async function fetchWithTTL(url) {
       const hit = cache.get(url);
       const now = Date.now();
       if (hit && now - hit.ts < TTL) return hit.data;
       const data = await fetch(url).then(r => r.json());
       cache.set(url, { data, ts: now });
       return data;
     }

  3. 키 설계
     • 쿼리스트링이 다르면 다른 리소스로 간주: ?page=1 vs. ?page=2
     • POST/헤더/바디에 따라 결과가 달라질 수 있음 → 요청 파라미터를 직렬화해 키로 포함해야 함
     • 인증 토큰, 로케일 등도 캐시 키에 반영 필요
  4. 에러 처리
     • response.ok 체크, 네트쿼으 에러 핸들링, 실패 시 재시도/백오프 전략 고려
     • 실패 응답을 캐시하면 안 되는 경우가 많음 → 실패 시 캐시 제거
  5. 메모리 관리
     • 무한히 쌓이지 않게 최대 용량을 두고 LRU로 제거
     • 탭 이동/앱 종료 시 사라지는 프로세스 메모리 캐시임을 이해해야 함 (영속성 필요하면 IndexedDB/Cache Storage 고려)
  6. 보안/민감 데이터
     • 사용자별로 다른 결과가 나오는 개인화 데이터는 사용자 컨텍스트 단위로 분리하거나 캐시 금지

  💫 언제 유용한가?

  • 동일 URL을 짧은 시간 안에 반복 호출하는 화면 (리스트 재방문, 탭 전환, 무한 스크롤의 재요청 등)
  • 서버에 캐시 헤더가 없거나, 클라이언트 레벨에서 더 공격적으로 최적화하고 싶을 때

• 등장 빈도/카운팅

  function countBy(arr) {
    const map = new Map();
    for (const v of arr) map.set(v, (map.get(v) ?? 0) + 1);
    return map;
  }

  💫 코드의 역할

  • 입력 배열 arr의 값을 각 키로, 그 등장 횟수를 값으로 갖는 Map을 만들어 반환함
  • 결과 Map의 순서는 해당 값이 처음 등장한 순서를 따름 (삽입 순서 유지)

  💫 단계별 동작

  1. const map = new Map();
     • 빈 카운트 테이블 생성
  2. for (const v of arr)
     • 배열을 순차 순회
  3. map.set(v, (map.get(v) ?? 0) + 1);
     • 현재 값 v의 기존 카운트를 읽고(map.get(v))
     • 없으면 undefined이므로 널 병합 연산자(Nullish Coalescing Operator) ??로 0을 대신 사용
     • + 1해서 다시 저장함
  4. return map;
     • Map<값, 카운트> 반환

  💫 자주 하는 실수

  • map.set(v, (map.get(v) || 0) + 1)
    • ||는 0이나 ""(빈 문자열)도 "없음"으로 처리하므로 비추천
    • 이 코드는 현재 맥락에서는 정상적으로 동작하지만 습관화하면 다른 상황에서 버그를 유발할 수 있음
    • 따라서 항상 ??을 사용하는 것이 안전함

• DOM/객체 ↔ 데이터 매핑

  const dataByEl = new Map();
  function bind(el, data) { dataByEl.set(el, data); }
  function getData(el) { return dataByEl.get(el); }

  💫 역할

  • dataByEl
    • Map<Node, any> 역할을 함
    • 키: DOM 요소(또는 임의의 객체) 참조
    • 값: 그 요소에 연결해 두고 싶은 임의의 데이터(상태, 옵션, 메타정보 등)
  • bind(el, data): 요소 el에 data를 붙임(Map에 저장)
  • getData(el): 나중에 같은 요소 참조로 즉시 꺼냄(O(1))

  💫 왜 Map으로 할까?

  • 객체/함수/DOM 등 비문자열을 키로 안전하게 사용할 수 있음(문자열 키 강제 변환 없음)
  • 요소에 직접 커스텀 프로퍼티를 달지 않아도 됨 → 외부 라이브러리/DOM을 오염시키지 않음
  • 삽입·조회가 평균 O(1), 순회 필요 없이 빠름

  💫 사용 예시

  // 1) 상태 연결
  const el = document.querySelector('#btn');
  bind(el, { clicked: 0, color: 'teal' });
  // 2) 이벤트에서 상태 업데이트
  el.addEventListener('click', () => {
    const st = getData(el);
    st.clicked += 1;
    console.log(st.clicked);
  });

  💫 실전 팁

  1. GC(가비지 컬렉션)까지 신경 쓴다면 WeakMap이 더 적합
     • DOM/객체가 어디에서도 더 이상 참조되지 않으면 WeakMap은 엔트리를 자동으로 정리함(약한 참조)
     • WeakMap: 키가 반드시 객체 또는 DOM이어야 하고, 그 키 객체가 어디에서도 더 이상 참조되지 않으면 해당 엔트리가 자동으로 가비지 컬렉션 되는 Map

       // 키가 반드시 객체/DOM이어야 함. size/순회 불가(의도적)
       const dataByEl new WeakMap();
       function bind(el, data) { dataByEl.set(el, data); }
       function getData(el) { return dataByEl.get(el); }
       function hasData(el) { return dataByEl.has(el); }

       ➡️ 컴포넌트 생성/파괴가 잦고, DOM이 제거되면 자동 정리되길 원할 때(메모리 누수 방지) 사용함
  2. 키는 "참조 동일성"
     모양이 같은 다른 요소/객체를 새로 만들어도 다른 키임
  3. 데이터 구조 예시
     • 단순 값: { opened: true }, { role: 'dialog' }
     • 복합 상태: { timer, cleanup, options }
     • 캐시: { measuredRect, lastComputedAt }
  4. 직접 프로퍼티로 붙이는 방식과 비교

     // 안티패턴(권장 X): DOM을 오염시키고 키 충돌 위험
     el.__myData = { ... };

     ➡️ 스타일/라이브러리 충돌 위험, 타입 안전성/캡슐화 떨어짐 → Map/WeakMap 권장

• 양방향 맵 (값↔키 역조회)

  class BiMap {
    #kv = new Map(); // key -> value
    #vk = new Map(); // value -> key
    
    // 쌍 추가/갱신
    set(k, v) { this.#kv.set(k, v); this.#vk.set(v, k); }
    
    // key -> value
    getByKey(k) { return this.#kv.get(k); }
    
    // value -> key
    getByValue(v) { return this.#vk.get(v); }
    
    // key와 그에 대응하는 value 모두 제거
    deleteByKey(k) {
      const v = this.#kv.get(k);
      this.#kv.delete(k);
      this.#vk.delete(v);
    }
  }

  💫 역할

  • 내부에 Map 두 개를 둠
    • #kv: key → value
    • #vk: value → key
  • set(k, v) 때 두 맵을 동시에 갱신해 두 방향의 조회를 모두 빠르게 함
  • getByKey, getByValue로 양쪽 방향을 O(1)로 조회함
  • deleteByKey는 한쪽에서 지우면 반대편도 함께 지워 일관성을 유지함

  💫 문법/디자인 포인트

  • #kv, #vk는 프라이빗 필드(클래스 외부에서 접근 불가)
  • Map의 삽입 순서 유지나 size, has 등 이점 그대로 활용 가능
  • 참조 동일성이 적용됨: 객체/함수를 키, 값으로 쓰면 같은 모양이어도 같은 참조여야 같은 것으로 인식함

  💫 동작 예시

  const bm = new BiMap();
  bm.set('KR', 82);
  bm.set('US', 1);
  bm.getByKey('KR'); // 82
  bm.getByValue(1); // 'US'
  bm.deleteByValue(1); // value 기준 삭제도 가능
  bm.hasKey('US'); // false

  💫 언제 유용할까?

  • 코드/라벨 상호 변환: 국가 코드 ↔ 전화 코드, MIME ↔ 확장자
    🔍 MIME: 파일/데이터의 형식(미디어 타입)을 표준 문자열로 나타내는 규칙
  • ID ↔ 인스턴스 역참조: 리소스 풀, 소켓/세션 매핑
  • 토큰 ↔ 사용자 매핑 등 역조회가 빈번한 시나리오

---

🌟 Set

• 개념
  • 중복 없는 값의 모음(집합) 컬렉션
  • 삽입 순서를 유지하며, 값 존재 확인/추가/삭제가 빠름

• 언제 쓰나?

  • 배열 중복 제거

    // 숫자/문자열 중복 제거
    const arr = [1, 2, 2, 3, 3, 3];
    const unique = [...new Set(arr)];
    console.log(unique); // [1, 2, 3]
    
    // NaN도 한 번만 남음 (Set은 SameValueZero 규칙 적용)
    console.log([...new Set([NaN, NaN])]); // [NaN]
    
    // 객체는 '참조 동일성' 기준
    const a = { id: 1 }, b = { id: 1 };
    console.log([...new Set([a, a, b])].length); // 2
    // -> a는 같은 참조 1개로 합쳐지고, b는 별개

    1. 숫자/문자열 중복 제거
       • new Set(arr)로 배열을 Set으로 변환하면서 중복을 자동 제거함
       • [...] 스프레드로 다시 배열로 펼침 → Set은 이터러블이지만 배열 메서드가 없기 때문
       • 시간 복잡도(평균): Set 빌드 O(n), 메모리 O(n)
    2. NaN도 한 번만 남음
       • Set은 값 비교에 SameValueZero를 사용함 → NaN을 서로 같은 값으로 봄
       • 그래서 NaN을 여러 번 넣어도 중복으로 판단되어 1개만 유지됨
    3. 객체는 '참조 동일성' 기준
       • 객체는 모양이 같아도 다른 참조면 다른 값임
       • a는 같은 객체 참조를 두 번 넣었으므로 1개로 합쳐짐
       • b는 a와 다른 객체라 별도 원소로 남아 총 2개가 됨

  • 방문 체크/토글

    // 선택/즐겨찾기/방문 여부 토글
    const selected = new Set();
    
    function toggle(id) {
      if (selected.has(id)) selected.delete(id);
      else selected.add(id);
    }
    
    toggle('p1'); // 선택
    toggle('p2'); // 선택
    toggle('p1'); // 해제
    console.log([...selected]); // ['p2']
    
    // "처음 방문인가?" 방문 체크
    const seen = new Set();
    function isFirstVisit(key) {
      if (seen.has(key)) return false; // 이미 본 적 있음
      seen.add(key); // 처음 보면 등록
      return true; // 처음 방문
    }
    console.log(isFirstVisit('A')); // true
    console.log(isFirstVisit('A')); // false

    1. 선택/즐겨찾기 토글 예제
       • selected는 선택된 항목들의 집합임
       • toggle(id)는 같은 ID를 없으면 추가, 있으면 제거하여 토글함
       • selected.has(id)로 포함 여부를 O(1)로 검사함
    2. "처음 방문인가?" 방문 체크
       • 어떤 key(예: 사용자 ID, 페이지 ID)를 한 번이라도 봤는지 기록함
       • 처음이면 true, 이후에는 항상 false

  • 수학적 집합 연산(합/교/차/대칭차) 구현

    const A = new Set([1, 2, 3]);
    const B = new Set([3, 4, 5]);
    
    // 합집합: A ∪ B
    const union = new Set([...A, ...B]);
    console.log([...union]); // [1, 2, 3, 4, 5]
    
    // 교집합: A ∩ B
    const intersection = new Set([...A].filter(x => B.has(x)));
    console.log([...intersection]); // [3]
    
    // 차집합:  A \ B  (A에는 있고 B에는 없는 원소)
    const difference = new Set([...A].filter(x => !B.has(x)));
    console.log([...difference]); // [1, 2]
    
    // 대칭차: (A \ B) ∪ (B \ A)
    const symmetricDiff = new Set([
      ...[...A].filter(x => !B.has(x)),
      ...[...B].filter(x => !A.has(x)),
    ]);
    console.log([...symmetricDiff]); // [1, 2, 4, 5]

    1. 합집합 (A ∪ B)
       • ...A, ...B로 두 집합을 펼쳐서 하나의 배열로 만든 뒤 new Set(...)에 넣어 중복을 제거함
       • 시간복잡도(평균): O(|A| + |B|)
    2. 교집합 (A ∩ B)
       • A의 원소 중 B에 존재하는 것만 걸러서 Set으로 생성함
       • 핵심은 B.has(x)가 평균 O(1)이라 전체 시간복잡도는 O(|A|)
    3. 차집합 (A \ B)
       • A에서 B에 없는 것만 남김
       • 시간복잡도(평균): O(|A|)
    4. 대칭차 (A △ B)
       • 양쪽 차집합을 합쳐서 Set에 넣어 중복 제거
       • 시간복잡도(평균): O(|A| + |B|)

• 주요 특징
  • 크기: set.size
  • 존재 확인: set.has(value)
  • 추가: set.add(value) (이미 있으면 변화 없음)
  • 삭제/초기화: set.delete(value), set.clear()
  • 순회: for (const v of set), set.forEach(v => ...)
  • 값 동등성: SameValueZero (NaN도 동일 취급)

• 배열과의 상호 변환

  const arr = [1, 1, 2, 3];
  const unique = [...new Set(arr)]; // [1, 2, 3]
  
  const s2 = new Set(arr);
  const backToArray = Array.from(s2);

  🔍 Array.from

  1. 정의

  • 이터러블(iterable) 또는 유사 배열(array-like)을 진짜 배열로 반환함
    • 이터러블: Set, Map, 문자열, 제너레이터 등 Symbol.iterator이 있는 것
    • 유사 배열: length와 인덱스 프로퍼티가 있는 객체(예: arguments, DOM NodeList 등)

  2. 시그니처

  Array.from(source, mapFn?, thisArg?)

  • source: 이터러블/유사 배열
  • mapFn(value, index): 생성하면서 매핑(성능·메모리 유리)
  • thisArg: mapFn 내부의 this

  3. 예제 모음

  1) Set/Map → Array

  const s = new Set([1, 2, 3]);
  Array.from(s); // [1, 2, 3]
  const m = new Map([['a', 1], ['b', 2]]);
  Array.from(m); // [['a', 1], ['b', 2]]
  Array.from(m, ([k, v]) => k); // ['a', 'b'] (키만)

  2) 유사 배열 → Array

  function f() {
    const args = Array.from(arguments); // 진짜 배열
    // [...arguments]는 일부 환경에서 실패(이터러블이 아닐 수 있음)
  }

  const nodeList = document.querySelectorAll('div'); // 유사 배열 + iterable
  Array.from(nodeList, el => el.textContent.trim());

  3) 문자열 → 문자 배열

  Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']

  4) 생성 + 매핑 한 번에 (성능 이점)

  Array.from({ length: 5 }, (_, i) => i * i); // [0, 1, 4, 9, 16]

  4. 스프레드(...)와 차이

  상황	Array.from	스프레드([...src])
  Set/Map/문자열	가능	가능
  유사 배열(iterator 없음)	가능	불가능(TypeError)
  생성 시 매핑	mapFn 제공	만들고 나서 map 한 번 더
  유니코드(문자 단위)	문자열 이터레이터로 OK	문자열 이터레이터로 OK

  • 유사 배열인데 iterator가 없는 객체 예시

    const arrayLike = { 0: 'a', 1: 'b', length: 2 }; // iterator 없음
    Array.from(arrayLike); // ['a', 'b'] ✅ 가능 (length/인덱스를 읽어 배열 생성)
    [...arrayLike]; // ❌ TypeError: arrayLike is not iterable

  5. 희소 배열(sparse) 처리

  Array.from({ length: 3 }); // [undefined, undefined, undefined]

  • Array.from은 인덱스를 0 ~ length-1로 순회하며 빈 칸도 채워 undefined가 됨
  • 반면 리터럴로 만든 희소 배열([ , , ])은 구멍이 남을 수 있음
  • 일관성이 필요하면 Array.from이 안전함

  6. 얕은 복사 (Shallow)

  객체 요소는 참조만 복사됨

  const a = [{ x: 1 }];
  const b = Array.from(a);
  b[0].x = 2;
  console.log(a[0].x); // 2 (같은 객체 참조)

• 집합 연산 유틸 (실전에서 자주 쓰는 형태)

  const union = (A, B) => new Set([...A, ...B]);
  const intersection = (A, B) => new Set([...A].filter(x => B.has(x)));
  const difference = (A, B) => new Set([...A].filter(x => !B.has(x)));
  const symmetricDiff = (A, B) => new Set([...difference(A, B), ...difference(B, A)]);

---

🌟 Set 실전 활용 예제

• 중복 제거 & 유니크 보장

  const users = ["kim", "lee", "kim"];
  const uniqueUsers = [...new Set(users)]; // ["kim", "lee"]

  💫 단계별 동작

  1. new Set(users)
     • 배열을 Set으로 바꾸는 순간 중복 요소가 자동 제거됨
     • Set은 값 비교에 SameValueZero 규칙을 써서 NaN도 하나로 취급하고, 삽입 순서를 유지함
  2. [...set]
     • Set(이터러블)을 배열로 다시 펼침
     • 결과: ["kim", "lee"] (첫 등장 순서 유지)

  💫 왜 Set을 쓸까?

  • 간결 + 빠름: 평균 O(n)으로 한 번에 처리함
  • 중복 자동 방지: 같은 값이 여러 번 와도 하나만 유지함
  • 순서 보존: 원래 배열에서 최초 등장 순서가 결과에도 반영됨

• 방문/선택 상태 관리 (토글)

  const selected = new Set();
  function toggle(id) {
    if (selected.has(id)) selected.delete(id);
    else selected.add(id);
  }

  💫 코드 설명

  • selected: 현재 선택되어 있는 항목들의 집합
  • toggle(id)
    • 이미 있으면(has) → 제거(delete) = 해제
    • 없으면 → 추가(add) = 선택

  💫 사용 예 (동작 확인)

  toggle('p1'); // 선택: {'p1'}
  toggle('p2'); // 선택: {'p1', 'p2'}
  toggle('p1'); // 해제: {'p2'}
  console.log([...selected]); // ['p2']

• 필터링 보조 (화이트리스트/블랙리스트)

  const allow = new Set(["/home", "/about"]);
  const filtered = routes.filter(r => allow.has(r.path));

  💫 코드 설명

  • allow: 접근/노출을 허용할 경로들의 집합
  • routes: { path: string, ...} 형태의 라우트 배열이라고 가정
  • filter: 각 라우트 r의 r.path가 allow에 있으면(has) 남기고, 없으면 버림
  • 결과 filtered: "/home", /"about"만 포함된 라우트 배열

  💫 시간 복잡도

  • 필터링 전체: O(|routes|) (각 요소당 has 한 번)
  • 배열에 includes를 쓰면 O(|routes|×|allow|)로 커질 수 있음

• 교집합 기반의 빠른 교차 체크

  function hasAnyOverlap(aArr, bArr) {
    const B = new Set(bArr);
    return aArr.some(x => B.has(x));
  }

  💫 코드 설명

  • bArr를 Set으로 만들어 포함 검사를 O(1)로 빠르게 하고,
  • aArr를 순회하면서 하나라도 B에 있으면 true를 즉시 반환(조기 종료)함
  • 끝까지 없으면 false

  💫 시간 복잡도

  • B.has(x)는 평균 O(1)
  • 전체 복잡도는 O(|aArr|+|bArr|)
  • 배열에 includes를 쓰면 O(|aArr|×|bArr|)가 되어 커질수록 느려짐

  💫 동작 예시

  hasAnyOverlap([1, 2, 3], [4, 5]); // false
  hasAnyOverlap([1, 2, 3], [3, 4, 5]); // true
  hasAnyOverlap(['a', 'b'], ['B']); // false (대소문자 구분)

---

🌟 Map vs. Object / Set vs. Array 선택 가이드

상황	추천
키로 객체/함수/NaN 등 비문자열을 써야 함	Map
키의 삽입 순서 유지 + 빈번한 순회	Map
키 개수 자주 확인	Map (size)
JSON 직렬화 간단/정적 키 구조	Object
중복 제거/집합 연산이 핵심	Set
인덱스 접근/정렬/슬라이싱 등 배열 기능	Array