프론트엔드 스터디 심화: this, 실행 컨텍스트, 이터러블

// 1. 일반 함수 호출 — 전역 객체 (strict mode에서는 undefined)
function foo() {
  console.log(this); // window (브라우저)
}
foo();

// 2. 메서드 호출 — 호출한 객체
const obj = {
  name: "철수",
  greet() {
    console.log(this.name); // "철수"
  },
};
obj.greet();

// 3. 생성자 호출 — 새로 생성되는 인스턴스
function  

const timer = {
  name: "타이머",
  start() {
    // 일반 함수 — this가 전역으로 바뀜
    setTimeout(function () {
      console.log(this.name); // undefined
    }, 1000);

    // 화살표 함수 — 상위 스코프(start 메서드)의 this 유지
    setTimeout(() => {
      console.log(this.name); // "타이머"
    }, 1000);
  }

const x = "전역";

function outer() {
  const y = "outer";

  function inner() {
    const z = "inner";
    console.log(x, y, z); // 스코프 체인으로 탐색
  }

  inner();
}

outer();

// 콜 스택의 변화:
// 1. 전역 실행 컨텍스트 생성 (x 등록)
// 2. outer() 호출 → outer 실행 컨텍스트 생성 (y 등록)
// 3. inner() 호출 → inner 실행 컨텍스트 생성 (z 등록)
// 4. inner 종료 → inner 컨텍스트 제거
// 5. outer 종료 → outer 컨텍스트 제거

// 배열, 문자열, Map, Set — 모두 이터러블
for (const char of "hello") {
  console.log(char); // h, e, l, l, o
}

const [a, b, ...rest] = new Set([1, 2, 3, 4]);
// a=1, b=2, rest=[3, 4]

// 중복 제거
const arr = [1, 2, 2, 3, 3, 4];
const unique = [...new Set(arr)]; // [1, 2, 3, 4]

// 기본 사용
const set = new Set([1, 2, 3]);
set.add(4);
set.has(2); // true
set.delete(1);

// 일반 객체와 달리 어떤 타입이든 키로 사용 가능
const map = new Map();
map.set("name", "철수");
map.set(1, "숫자 키");
map.set({ id: 1 }, "객체 키");

map.get("name"); // "철수"
map.has("name"); // true
map.size; // 3

// 이터러블이라 for...of 가능
for ( key value  map