자바스크립트 심화

// call: 즉시 실행, 개별 인자
func.call(thisArg, arg1, arg2);

// apply: 즉시 실행, 배열 인자
func.apply(thisArg, [arg1, arg2]);

// bind: 지연 실행, 새 함수 반환
const boundFunc = func.bind(thisArg, arg1);

// 일반 함수: 호출 방식에 따라 this 결정
function regular() {
  console.log(this); // 호출 시점에 결정
}

// 화살표 함수: 정의 시점의 상위 스코프 this 참조
const arrow = () => {
  console.log(this); // 정의된 위치의 this 고정
};

// 함수 정의 위치에 따라 스코프 결정
const name = "global";
const sayName = () => console.log(name);

const outer = () => {
  const name = "outer";
  sayName(); // "global" 출력 (정의 위치 기준)
};

// 실제 호출 예시
outer(); // 결과: "global"

// 비교: 동적 스코프라면?
function dynamicExample() {
  const name = "dynamic";
  eval("console.log(name)"); // 동적으로 평가되어 "dynamic" 출력
}

// 콜백 지옥 😵
getData(function (a) {
  getMoreData(a, function (b) {
    getMoreData(b, function (c) {
      // 깊어지는 중첩...
    });
  });
});

// Promise 체이닝 ✨
getData()
  .then((a) => getMoreData(a))
  .then((b) => getMoreData(b))
  .then((c) => finalOperation(c));

// Promise.all: 모두 성공해야 성공
const results = await Promise.all([api1(), api2(), api3()]);

// Promise.race: 가장 빠른 결과만
const fastest = await Promise.race([api1(), api2()]);

// Promise.allSettled: 모든 결과 반환 (성공/실패 무관)
const allResults = await Promise.allSettled([api1(), api2()]);

// AbortController 활용한 타임아웃
function fetchWithTimeout(url, timeout = 5000) {
  const controller = new AbortController();

  const timeoutId = setTimeout(() => {
    controller.abort();
  }, timeout);

  return fetch(url, { signal: controller.signal }).finally(() =>
    clearTimeout(timeoutId),
  );
}

// try-catch로 동기식 에러 처리
async function fetchData() {
  try {
    const response = await fetch("/api");
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Error:", error);
    throw error; // 상위로 전파
  }
}

// 순차 실행 (느림)
const a = await fetchA();
const b = await fetchB();

// 병렬 실행 (빠름)
const [a, b] = await Promise.all([fetchA(), fetchB()]);

// CDN을 통한 최적화된 리소스 요청
Promise.any([
  requestImage("south korea", "image.jpg"),
  requestImage("eastern usa", "image.jpg"),
  requestImage("china", "image.jpg"),
]).then((result) => {
  // 첫 번째 성공한 응답 사용
  displayImage(result);
  // AbortController로 나머지 요청 중단
  remainingControllers.forEach((ctrl) => ctrl.abort());
});

const { promise, resolve, reject } = Promise.withResolvers();

promise.then(() => {
  console.log("fulfilled");
});

resolve(); // 외부에서 제어

import pLimit from "p-limit";

// 동시에 1개씩만 실행 (순차 처리)
const limit = pLimit(1);

const tasks = [
  limit(() => fetchA()),
  limit(() => fetchB()),
  limit(() => fetchC()),
];

const results = await Promise.all(tasks);

// 기능 지원 여부 확인 패턴
if ("serviceWorker" in navigator) {
  // Service Worker 기능 사용
}

if (navigator.share) {
  // 네이티브 공유 기능 사용
} else {
  // 대체 공유 방법 제공
}

// FinalizationRegistry: GC 시점에 콜백 실행
const registry = new FinalizationRegistry((heldValue) => {
  console.log(`${heldValue}가 GC 되었습니다!`);
});

const obj = { name: "obj" };
registry.register(obj); // GC 콜백 등록

// WeakRef: 약한 참조 생성
const weakRef = new WeakRef(obj);

// ❌ 메모리 누수 발생
function createHeavyObject() {
  const heavyArray = new Array(1000000).fill(0);

  return function () {
    console.log("heavyArray 전체를 클로저로 유지");
    // heavyArray 전체가 메모리에 남음
  };
}

// ✅ 메모리 효율적 패턴
function createHeavyObject() {
  const heavyArray = new Array(1000000).fill(0);
  const usefulData = heavyArray[0]; // 필요한 데이터만 추출

  return function () {
    console.log("필요한 데이터만 사용", usefulData);
    // heavyArray는 GC 대상이 됨
  };
}

// DOM 요소에 데이터 연결 시 WeakMap 활용
const elementData = new WeakMap();
const element = document.getElementById("myDiv");

elementData.set(element, { clicks: 0, data: "some data" });
// element가 DOM에서 제거되면 WeakMap의 데이터도 자동 GC