자바스크립트 완전 정복

// var 호이스팅 (선언만 끌어올림, 초기화 X)
console.log(a); // undefined (에러 없음! ⚠️)
var a = 5;
// 실제 동작: var a; → console.log(a) → a = 5

// let/const — TDZ (선언 전 접근 = 에러)
// console.log(b); // ❌ ReferenceError: Cannot access 'b' before initialization
let b = 10;

// 함수 선언식: 선언+초기화 모두 호이스팅
greet(); // ✅ "Hello!"
function greet() { console.log("Hello!"); }

// 함수 표현식: 변수만 호이스팅
// sayHi(); // ❌ Cannot read properties of undefined
var sayHi = function() { console.log("Hi!"); };

// var의 블록 스코프 문제
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
  // 결과: 3, 3, 3 ❌ (var는 함수 스코프)
}
for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 100);
  // 결과: 0, 1, 2 ✅ (let은 블록 스코프)
}

// 클로저로 private 상태 관리
function makeCounter(initial = 0) {
  let count = initial; // 외부 직접 접근 불가

  return {
    increment() { return ++count; },
    decrement() { return --count; },
    reset()     { count = initial; },
    get()       { return count; }
  };
}

const c1 = makeCounter(10);
const c2 = makeCounter();
c1.increment(); // 11
c1.increment(); // 12
c2.increment(); // 1  (c1과 독립적)

// 함수 팩토리 — factor를 클로저로 기억
function multiplier(factor) {
  return n => n * factor;
}
const double = multiplier(2);
const triple = multiplier(3);
double(5); // 10
triple(5); // 15

// 메모이제이션 (결과 캐싱)
function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
}
const expFib = memoize(n => n <= 1 ? n : expFib(n-1) + expFib(n-2));
expFib(40); // 빠름 (캐시 활용)

// 1. 암묵적 바인딩 — 호출 객체가 this
const obj = {
  name: "Kim",
  greet() { return `Hi, ${this.name}`; }
};
obj.greet(); // "Hi, Kim" (this = obj)

// 2. 명시적 바인딩 — call/apply/bind
function introduce(age) { return `${this.name}, ${age}세`; }
introduce.call({ name: "Lee" }, 30);    // "Lee, 30세"
introduce.apply({ name: "Park" }, [25]); // "Park, 25세"
const bound = introduce.bind({ name: "Choi" });
bound(28); // "Choi, 28세" (나중에 호출)

// 3. new 바인딩
function Person(name) {
  this.name = name; // this = 새 인스턴스
}
const p = new Person("민수"); // p.name = "민수"

// 4. 기본 바인딩 (엄격 모드에서 undefined)
function alone() { console.log(this); }
alone(); // 전역(window) or undefined (strict mode)

// 화살표 함수 — 렉시컬 this (정의 위치 기준)
const timer = {
  count: 0,
  start() {
    // 화살표 함수는 start()의 this를 그대로 사용
    setInterval(() => { this.count++; }, 1000); // ✅
    // 일반 함수: this가 전역이 되어 count 참조 불가 ❌
  }
};

function Dog(name) {
  this.name = name; // 인스턴스 프로퍼티
}
// 프로토타입에 메서드 추가 (모든 인스턴스가 공유)
Dog.prototype.speak = function() {
  return `${this.name}: 멍멍!`;
};

const d1 = new Dog("바둑이");
const d2 = new Dog("해피");
d1.speak(); // "바둑이: 멍멍!"  (Dog.prototype에서 탐색)
d2.speak(); // "해피: 멍멍!"

// 프로토타입 체인 확인
d1.__proto__ === Dog.prototype;         // true
Dog.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null;    // true (체인 끝)

// hasOwnProperty: 자신 소유 프로퍼티만 확인
d1.hasOwnProperty("name");   // true (직접 소유)
d1.hasOwnProperty("speak");  // false (prototype에 있음)
"speak" in d1;               // true (체인 포함 탐색)

// Object.create: 특정 객체를 prototype으로 설정
const animal = { breathe() { return "호흡 중"; } };
const cat = Object.create(animal);
cat.name = "나비";
cat.breathe(); // "호흡 중" (animal에서 탐색)

// Map
const map = new Map();
map.set("name", "Kim");
map.set(42, "숫자 키");
map.set({ id: 1 }, "객체 키");  // 객체도 키 가능!

map.get("name");    // "Kim"
map.has("name");    // true
map.size;           // 3
map.delete("name");

for (const [key, val] of map) console.log(key, val);

// 객체를 Map으로 변환
const obj = { a: 1, b: 2 };
const m2 = new Map(Object.entries(obj));
// Map 다시 객체로
const obj2 = Object.fromEntries(m2);

// Set — 중복 자동 제거
const set = new Set([1, 2, 2, 3, 3, 3]);
set.size;         // 3 (중복 제거됨)
set.has(2);       // true
set.add(4).add(5);
set.delete(1);

// 배열 중복 제거 (실전 패턴)
const arr = [1, 2, 2, 3, 3, 4];
const unique = [...new Set(arr)]; // [1, 2, 3, 4]

// 두 배열의 교집합
const a = new Set([1, 2, 3]);
const b = new Set([2, 3, 4]);
const intersection = [...a].filter(x => b.has(x)); // [2, 3]
const union = new Set([...a, ...b]); // {1,2,3,4}

// 구조분해 — 배열
const [a, b, ...rest] = [1, 2, 3, 4, 5];
// a=1, b=2, rest=[3,4,5]
const [x, , z] = [10, 20, 30]; // 중간 건너뜀

// 구조분해 — 객체 (별칭, 기본값)
const { name: n, age = 20, city = "서울" } = { name: "Kim" };
// n="Kim", age=20, city="서울"

// 함수 매개변수 구조분해
const show = ({ name, score = 0 }) => `${name}: ${score}`;
show({ name: "Lee", score: 95 }); // "Lee: 95"

// 단축 프로퍼티 & 메서드
const x2 = 10, y = 20;
const point = { x2, y, move() { return `(${this.x2},${this.y})`; } };

// 스프레드 연산자
const arr1 = [1, 2, 3];
const arr2 = [0, ...arr1, 4]; // [0,1,2,3,4]

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3, b: 99 }; // { a:1, b:99, c:3 } (덮어씀)

// Object 정적 메서드
const person = { name: "Park", age: 28 };
Object.keys(person);    // ["name", "age"]
Object.values(person);  // ["Park", 28]
Object.entries(person); // [["name","Park"],["age",28]]

// 깊은 복사
const deep1 = JSON.parse(JSON.stringify(person)); // 간단, Date/함수 손실
const deep2 = structuredClone(person);            // 모던 방법 ✅

class Animal {
  #name;       // private 필드 (외부 직접 접근 불가)
  #sound;

  constructor(name, sound) {
    this.#name  = name;
    this.#sound = sound;
  }

  // getter / setter
  get name() { return this.#name; }
  set name(v) {
    if (!v) throw new Error("이름 필수");
    this.#name = v;
  }

  speak() { return `${this.#name}: ${this.#sound}!`; }

  // 정적 메서드 — 인스턴스 없이 호출
  static compare(a, b) { return a.name.localeCompare(b.name); }
}

// 상속 (extends)
class Dog extends Animal {
  #breed;

  constructor(name, breed) {
    super(name, "멍멍"); // 반드시 this 사용 전에 호출
    this.#breed = breed;
  }

  // 메서드 오버라이딩
  speak() { return super.speak() + " 🐶"; }
  info()  { return `${this.name} (${this.#breed})`; }
}

const dog = new Dog("바둑이", "진돗개");
dog.speak();           // "바둑이: 멍멍! 🐶"
dog.info();            // "바둑이 (진돗개)"
dog instanceof Dog;    // true
dog instanceof Animal; // true (상속 체인)

// Promise 생성
function fetchUser(id) {
  return new Promise((resolve, reject) => {
    if (id <= 0) reject(new Error("유효하지 않은 ID"));
    else setTimeout(() => resolve({ id, name: "User" + id }), 500);
  });
}

// .then / .catch / .finally
fetchUser(1)
  .then(user => { console.log(user); return fetchUser(2); }) // 체이닝
  .then(user2 => console.log(user2))
  .catch(err => console.error("에러:", err.message))
  .finally(() => console.log("항상 실행"));

// Promise.all — 모두 성공해야 / 하나라도 실패하면 전체 실패
const [u1, u2] = await Promise.all([fetchUser(1), fetchUser(2)]);

// Promise.allSettled — 성공/실패 상관없이 모두 기다림
const results = await Promise.allSettled([fetchUser(1), fetchUser(-1)]);
results.forEach(r => {
  if (r.status === "fulfilled") console.log(r.value);
  else console.error(r.reason.message);
});

// Promise.race — 가장 빠른 것 반환
const fastest = await Promise.race([fetchUser(1), fetchUser(2)]);

// Promise.any — 첫 성공 (모두 실패하면 AggregateError)
const first = await Promise.any([fetchUser(-1), fetchUser(2)]);

// async 함수는 항상 Promise 반환
async function getNum() { return 42; }
getNum().then(console.log); // 42

// 순차 실행 (느림 — 각 요청이 완료 후 다음 시작)
async function sequential() {
  const u1 = await fetchUser(1); // 500ms 대기
  const u2 = await fetchUser(2); // 500ms 대기
  return [u1, u2];               // 총 1000ms
}

// 병렬 실행 (빠름 — 동시에 시작)
async function parallel() {
  const [u1, u2] = await Promise.all([
    fetchUser(1),
    fetchUser(2),
  ]);
  return [u1, u2]; // 총 ~500ms
}

// Fetch API 실전 패턴
async function getPost(id) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  if (!res.ok) throw new Error(`HTTP Error: ${res.status}`);
  return await res.json();
}

// top-level await (ES2022, 모듈에서 사용 가능)
// const data = await getPost(1);

// 여러 async 작업을 순서대로 처리
const ids = [1, 2, 3];
const posts = await Promise.all(ids.map(id => getPost(id)));

// try / catch / finally
function divide(a, b) {
  if (b === 0) throw new Error("0으로 나눌 수 없음");
  return a / b;
}

try {
  console.log(divide(10, 0));
} catch (err) {
  console.log(err.name);    // "Error"
  console.log(err.message); // "0으로 나눌 수 없음"
} finally {
  console.log("항상 실행"); // 성공/실패 무관
}

// 커스텀 에러 클래스
class ValidationError extends Error {
  constructor(field, message) {
    super(message);
    this.name = "ValidationError";
    this.field = field;
  }
}

function validateAge(age) {
  if (typeof age !== "number") throw new ValidationError("age", "숫자여야 합니다");
  if (age < 0 || age > 150) throw new ValidationError("age", "유효하지 않은 나이");
}

try {
  validateAge("스물");
} catch (e) {
  if (e instanceof ValidationError) {
    console.log(`${e.field}: ${e.message}`);
  } else {
    throw e; // 예상치 못한 에러는 다시 던짐
  }
}

// async/await 에러 처리
async function loadData(id) {
  try {
    const res = await fetch(`/api/${id}`);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error("로딩 실패:", err.message);
    return null; // 기본값 반환
  }
}

// ===== math.js (내보내기) =====
export const PI = 3.14159;                        // named export
export function add(a, b) { return a + b; }       // named export
export default class Calculator {                  // default export
  multiply(a, b) { return a * b; }
}

// ===== main.js (가져오기) =====
import Calculator, { PI, add } from "./math.js";  // default + named
import { add as myAdd } from "./math.js";          // 별칭
import * as MathUtils from "./math.js";            // 전체 네임스페이스

MathUtils.add(1, 2);  // 3
MathUtils.PI;         // 3.14159

// 동적 import — 필요할 때 로드 (코드 스플리팅)
async function loadChart() {
  const { Chart } = await import("./chart.js"); // 필요시 로드
  return new Chart();
}

// 조건부 로드
const module = await import(isDev ? "./dev-tools.js" : "./prod.js");

// re-export (배럴 파일 패턴)
// index.js
export { add, PI } from "./math.js";
export { formatDate } from "./date.js";
export { fetchUser } from "./api.js";
// 사용처: import { add, fetchUser } from "./utils/index.js"

// import.meta (모듈 메타데이터)
console.log(import.meta.url);  // 현재 모듈 URL

// Debounce — 마지막 호출 후 delay ms 뒤에 실행
function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}
const onSearch = debounce(q => fetchResults(q), 300);
input.addEventListener("input", e => onSearch(e.target.value));

// Throttle — delay ms 간격으로 최대 1회 실행
function throttle(fn, delay) {
  let last = 0;
  return function(...args) {
    const now = Date.now();
    if (now - last >= delay) {
      last = now;
      return fn.apply(this, args);
    }
  };
}
window.addEventListener("scroll", throttle(() => updateNav(), 100));

// Currying — 인수를 하나씩 받는 함수 변환
const multiply = a => b => a * b;
const double = multiply(2);
const triple = multiply(3);
double(5); // 10
triple(5); // 15

// Pipe — 함수를 순서대로 연결
const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);
const process = pipe(
  x => x * 2,        // 10
  x => x + 1,        // 11
  x => `결과: ${x}`  // "결과: 11"
);
process(5); // "결과: 11"

// Observer 패턴 (이벤트 시스템)
class EventEmitter {
  #listeners = new Map();
  on(event, fn)  { (this.#listeners.get(event) || this.#listeners.set(event,[]).get(event)).push(fn); }
  off(event, fn) { const arr = this.#listeners.get(event); if(arr) this.#listeners.set(event, arr.filter(f=>f!==fn)); }
  emit(event, ...args) { (this.#listeners.get(event) || []).forEach(fn => fn(...args)); }
}
const bus = new EventEmitter();
bus.on("data", d => console.log("받음:", d));
bus.emit("data", { id: 1 }); // "받음: { id: 1 }"