JavaScript 핵심 — 클로저, 프로토타입, this, 이벤트 루프

function outer() {
  const a = 1;

  function inner() {
    const b = 2;
    console.log(a + b); // 3
  }

  inner();
}

outer();

console.log(x); // undefined
var x = 10;

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 20;

{
  // --- TDZ 시작 ---
  console.log(name); // ReferenceError
  // --- TDZ 끝 ---
  let name = "JavaScript";
  console.log(name); // "JavaScript"
}

sayHi(); // "안녕!"

function sayHi() {
  console.log("안녕!");
}

sayBye(); // TypeError: sayBye is not a function

var sayBye = function () {
  console.log("잘 가!");
};

// var: 함수 스코프
function example() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 10 — if 블록 밖에서도 접근 가능
}

// let/const: 블록 스코프
function example2() {
  if (true) {
    let y = 20;
  }
  console.log(y); // ReferenceError
}

const value = "global";

function printValue() {
  console.log(value);
}

function wrapper() {
  const value = "local";
  printValue(); // "global" — 호출 위치가 아닌, 정의 위치 기준
}

wrapper();

function makeCounter() {
  let count = 0;

  return {
    increment() { count++; },
    getCount() { return count; }
  };
}

const counter = makeCounter();
counter.increment();
counter.increment();
console.log(counter.getCount()); // 2

function createUser(name) {
  let _password = "1234"; // 외부에서 직접 접근 불가

  return {
    getName() { return name; },
    checkPassword(input) { return input === _password; },
    changePassword(oldPw, newPw) {
      if (oldPw === _password) {
        _password = newPw;
        return true;
      }
      return false;
    }
  };
}

const user = createUser("심정훈");
console.log(user._password);              // undefined
console.log(user.checkPassword("1234"));   // true

function multiply(a) {
  return function (b) {
    return a * b;
  };
}

const double = multiply(2);
const triple = multiply(3);

console.log(double(5));  // 10
console.log(triple(5));  // 15

function debounce(fn, delay) {
  let timer = null;

  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

const handleSearch = debounce((query) => {
  console.log("검색:", query);
}, 300);

// 빠르게 연속 호출해도 마지막 호출 후 300ms 뒤에 한 번만 실행
handleSearch("J");
handleSearch("Ja");
handleSearch("Jav");
handleSearch("Java");

function Dog(name) {
  this.name = name;
}

Dog.prototype.bark = function () {
  console.log(`${this.name}: 멍!`);
};

const dog = new Dog("초코");

console.log(dog.__proto__ === Dog.prototype);       // true
console.log(Dog.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__);            // null — 체인의 끝

const animal = {
  eat() { console.log("먹는다"); }
};

const cat = Object.create(animal);
cat.meow = function () { console.log("야옹"); };

cat.meow(); // "야옹" — cat 자신의 메서드
cat.eat();  // "먹는다" — animal에서 찾음 (프로토타입 체인)

const base = {
  greet() {
    return `안녕, ${this.name}`;
  }
};

const person = Object.create(base);
person.name = "심정훈";
console.log(person.greet()); // "안녕, 심정훈"

console.log(person.hasOwnProperty("name"));  // true
console.log(person.hasOwnProperty("greet")); // false — 프로토타입에서 온 것

function showThis() {
  console.log(this);
}

showThis(); // 브라우저: window / strict mode: undefined

const obj = {
  name: "JavaScript",
  greet() {
    console.log(this.name);
  }
};

obj.greet(); // "JavaScript" — obj가 this

const fn = obj.greet;
fn(); // undefined — 기본 바인딩으로 돌아감

function introduce(greeting) {
  console.log(`${greeting}, 저는 ${this.name}입니다.`);
}

const person = { name: "심정훈" };

introduce.call(person, "안녕하세요");  // call: 인자를 하나씩
introduce.apply(person, ["안녕하세요"]); // apply: 인자를 배열로

const bound = introduce.bind(person); // bind: 새 함수 반환
bound("안녕하세요");

function Person(name) {
  this.name = name;
}

const p = new Person("심정훈");
console.log(p.name); // "심정훈"

const team = {
  name: "프론트엔드팀",
  members: ["A", "B", "C"],

  printMembers() {
    this.members.forEach((member) => {
      // 화살표 함수는 자신만의 this를 갖지 않음 → 상위 스코프(printMembers)의 this 사용
      console.log(`${this.name}: ${member}`);
    });
  }
};

team.printMembers();
// 프론트엔드팀: A
// 프론트엔드팀: B
// 프론트엔드팀: C

console.log("1");

setTimeout(() => {
  console.log("2");
}, 0);

Promise.resolve().then(() => {
  console.log("3");
});

console.log("4");

console.log("start");

setTimeout(() => console.log("timeout 1"), 0);

Promise.resolve()
  .then(() => {
    console.log("promise 1");
    setTimeout(() => console.log("timeout 2"), 0);
  })
  .then(() => {
    console.log("promise 2");
  });

setTimeout(() => console.log("timeout 3"), 0);

console.log("end");

console.log(0 == "");          // true  — 타입 변환 후 비교
console.log(0 === "");         // false — 타입까지 비교
console.log(null == undefined); // true  — 이건 명세에서 특별하게 정의
console.log(null === undefined); // false

// falsy 값 목록
false
0
-0
0n        // BigInt
""        // 빈 문자열
null
undefined
NaN

Boolean([]);           // true  — 빈 배열은 truthy!
Boolean({});           // true  — 빈 객체도 truthy!
Boolean("0");          // true  — 문자열 "0"도 truthy!
Boolean("false");      // true  — 문자열 "false"도 truthy!

console.log([] + []);     // "" — 둘 다 빈 문자열로 변환 후 연결
console.log([] + {});     // "[object Object]"
console.log({} + []);     // 브라우저에 따라 다름 (0 또는 "[object Object]")

console.log(1 + "2");     // "12" — 숫자가 문자열로 변환
console.log("3" - 1);     // 2   — 문자열이 숫자로 변환
console.log(true + true); // 2   — true는 1로 변환
console.log("5" > 3);     // true — 문자열 "5"가 숫자 5로 변환

[] == false
// 1단계: false → 0
[] == 0
// 2단계: [] → "" (ToPrimitive)
"" == 0
// 3단계: "" → 0
0 == 0
// 결과: true

function circularRef() {
  const a = {};
  const b = {};
  a.ref = b;
  b.ref = a;
  // 함수 종료 후 a, b는 서로만 참조 → Reference Counting에서는 회수 불가
  // Mark-and-Sweep에서는 루트에서 도달 불가하므로 정상적으로 회수
}

// WeakMap: 키에 대한 약한 참조 → GC 대상이 됨
const cache = new WeakMap();

function process(obj) {
  if (cache.has(obj)) {
    return cache.get(obj);
  }
  const result = /* 비용이 큰 연산 */ obj.value * 2;
  cache.set(obj, result);
  return result;
}

let data = { value: 42 };
process(data); // 캐시에 저장
data = null;   // data에 대한 강한 참조가 사라지면, WeakMap 엔트리도 GC 대상

let target = { name: "temp" };
const ref = new WeakRef(target);

console.log(ref.deref()); // { name: "temp" }

target = null;
// 다음 GC 사이클 이후
console.log(ref.deref()); // undefined (GC가 회수했다면)

const id = Symbol("id");
const anotherId = Symbol("id");

console.log(id === anotherId); // false — 설명이 같아도 다른 값

const user = {
  name: "심정훈",
  [id]: 12345
};

console.log(Object.keys(user));             // ["name"] — Symbol 키는 나오지 않음
console.log(Object.getOwnPropertySymbols(user)); // [Symbol(id)]

function* fibonacci() {
  let [a, b] = [0, 1];
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

const fib = fibonacci();
console.log(fib.next().value); // 0
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2
console.log(fib.next().value); // 3

// Promise 체이닝
fetch("/api/user")
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err) => console.error(err));

// async/await — 같은 동작을 동기 코드처럼 작성
async function getUser() {
  try {
    const res = await fetch("/api/user");
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

EventTarget ← Node ← Element ← HTMLElement ← HTMLDivElement

const div = document.querySelector("div");

console.log(div instanceof HTMLDivElement); // true
console.log(div instanceof HTMLElement);    // true
console.log(div instanceof Element);        // true
console.log(div instanceof Node);           // true
console.log(div instanceof EventTarget);    // true