function first() {
  console.log("첫 번째");
  second();
  console.log("첫 번째 끝");
}

function second() {
  console.log("두 번째");
}

first();

// 콜 스택 순서:
// 1. first() push
// 2. console.log("첫 번째") push → pop
// 3. second() push
// 4. console.log("두 번째") push → pop
// 5. second() pop
// 6. console.log("첫 번째 끝") push → pop
// 7. first() pop

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

function square(n) {
  return multiply(n, n);
}

function printSquare(n) {
  const result = square(n);
  console.log(result);
}

printSquare(4);

// 콜 스택 변화:
// 1. [printSquare(4)]
// 2. [printSquare(4), square(4)]
// 3. [printSquare(4), square(4), multiply(4, 4)]
// 4. [printSquare(4), square(4)]  // multiply 리턴
// 5. [printSquare(4)]  // square 리턴
// 6. [printSquare(4), console.log(16)]
// 7. []  // 모두 완료

// 출력: 16

console.log("1");

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

console.log("3");

// 출력:
// 1
// 3
// 2

// 왜?
// 1. console.log("1") 실행 (콜 스택)
// 2. setTimeout은 Web API로 이동 (콜 스택에서 제거)
// 3. console.log("3") 실행 (콜 스택)
// 4. 콜 스택 비움
// 5. 이벤트 루프가 태스크 큐에서 setTimeout 콜백 가져옴
// 6. console.log("2") 실행

console.log("시작");

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

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

console.log("끝");

// 출력 순서:
// 시작
// 끝
// Promise 1
// Promise 2
// setTimeout

// 이유:
// 1. 동기 코드 먼저 (시작, 끝)
// 2. 마이크로태스크 (Promise)
// 3. 매크로태스크 (setTimeout)

console.log("Script start");

setTimeout(function timeout() {
  console.log("setTimeout");
}, 0);

Promise.resolve()
  .then(function promise1() {
    console.log("Promise 1");
  })
  .then(function promise2() {
    console.log("Promise 2");
  });

requestAnimationFrame(function animation() {
  console.log("requestAnimationFrame");
});

console.log("Script end");

// 출력 순서:
// Script start
// Script end
// Promise 1
// Promise 2
// requestAnimationFrame (다음 프레임)
// setTimeout

// 실행 순서:
// 1. 동기 코드 실행 (콜 스택)
// 2. 마이크로태스크 큐 비우기 (Promise)
// 3. 렌더링 (requestAnimationFrame)
// 4. 매크로태스크 큐에서 하나 실행 (setTimeout)

// ❌ 스택 오버플로우 발생
function recursiveFunction() {
  recursiveFunction();
}

// recursiveFunction(); // Uncaught RangeError: Maximum call stack size exceeded

// ✅ setTimeout으로 해결
function safeRecursive() {
  console.log("실행");
  setTimeout(safeRecursive, 0);
}

// safeRecursive(); // 무한 실행되지만 스택은 안전

// ❌ 5초 동안 화면이 멈춤
const startTime = Date.now();
while (Date.now() - startTime < 5000) {
  // 5초 대기
}
console.log("5초 경과");

// ✅ 화면이 멈추지 않음
setTimeout(() => {
  console.log("5초 경과");
}, 5000);

console.log("다른 작업 계속 가능");

console.log(name); // undefined (호이스팅)
var name = "홍길동";

// Creation Phase:
// - name 변수 선언 (값은 undefined)
// - 함수 선언 전체를 메모리에 저장

var name = "홍길동";
console.log(name); // "홍길동"

// Execution Phase:
// - name에 "홍길동" 할당
// - 코드 한 줄씩 실행

console.log(age); // undefined
var age = 30;

// 위 코드는 내부적으로 이렇게 동작:
var age;
console.log(age); // undefined
age = 30;

// ✅ 함수 선언식: 호이스팅됨
sayHello(); // "Hello!"

function sayHello() {
  console.log("Hello!");
}

// ❌ 함수 표현식: 호이스팅 안 됨
sayBye(); // TypeError: sayBye is not a function

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

// ❌ ReferenceError
console.log(name); // Cannot access 'name' before initialization
let name = "홍길동";

// TDZ (Temporal Dead Zone):
// 선언은 호이스팅되지만 초기화 전까지 접근 불가

const globalVar = "전역 변수";

function test() {
  console.log(globalVar); // 접근 가능
}

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

  function inner() {
    console.log(outerVar); // 접근 가능 (스코프 체인)
  }

  inner();
}

// console.log(outerVar); // ReferenceError

if (true) {
  let blockVar = "블록 변수";
  const blockConst = "블록 상수";
  var functionVar = "함수 변수";
}

// console.log(blockVar); // ReferenceError
// console.log(blockConst); // ReferenceError
console.log(functionVar); // "함수 변수" (var는 블록 스코프 무시)

const global = "전역";

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

  function inner() {
    const innerVar = "inner";
    console.log(innerVar); // inner
    console.log(outerVar); // outer (상위 스코프 참조)
    console.log(global); // 전역 (최상위 스코프 참조)
  }

  inner();
}

outer();

// 스코프 체인:
// inner → outer → global

function makeCounter() {
  let count = 0; // 외부 함수의 변수

  return function () {
    count++;
    return count;
  };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

// counter 함수는 count 변수를 기억함 (클로저)

function createWallet() {
  let balance = 0; // private 변수

  return {
    deposit(amount) {
      balance += amount;
      return balance;
    },
    withdraw(amount) {
      if (balance >= amount) {
        balance -= amount;
        return balance;
      }
      return "잔액 부족";
    },
    getBalance() {
      return balance;
    },
  };
}

const myWallet = createWallet();
myWallet.deposit(1000); // 1000
myWallet.withdraw(300); // 700
console.log(myWallet.getBalance()); // 700

// balance에 직접 접근 불가
console.log(myWallet.balance); // undefined

function makeMultiplier(multiplier) {
  return function (number) {
    return number * multiplier;
  };
}

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

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

function setupButtons() {
  for (let i = 0; i < 3; i++) {
    const button = document.getElementById(`btn${i}`);
    button.addEventListener("click", function () {
      console.log(`버튼 ${i} 클릭`); // i를 기억 (클로저)
    });
  }
}

// var 사용 시 문제
function setupButtonsBad() {
  for (var i = 0; i < 3; i++) {
    const button = document.getElementById(`btn${i}`);
    button.addEventListener("click", function () {
      console.log(`버튼 ${i} 클릭`); // 항상 3 출력
    });
  }
}

function fetchUser(callback) {
  setTimeout(() => {
    const user = { name: "홍길동", age: 30 };
    callback(user);
  }, 1000);
}

fetchUser((user) => {
  console.log(user); // { name: "홍길동", age: 30 }
});

// ❌ 콜백 지옥
fetchUser((user) => {
  fetchPosts(user.id, (posts) => {
    fetchComments(posts[0].id, (comments) => {
      console.log(comments);
    });
  });
});

function fetchUser() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const user = { name: "홍길동", age: 30 };
      resolve(user);
    }, 1000);
  });
}

fetchUser()
  .then((user) => {
    console.log(user);
    return fetchPosts(user.id);
  })
  .then((posts) => {
    console.log(posts);
    return fetchComments(posts[0].id);
  })
  .then((comments) => {
    console.log(comments);
  })
  .catch((error) => {
    console.error(error);
  });

async function getUserData() {
  try {
    const user = await fetchUser();
    console.log(user);

    const posts = await fetchPosts(user.id);
    console.log(posts);

    const comments = await fetchComments(posts[0].id);
    console.log(comments);
  } catch (error) {
    console.error(error);
  }
}

getUserData();