JavaScript 면접 질문 완벽 정리: 클로저, 호이스팅, 이벤트 루프

console.log(name) // undefined (에러 아님!)
var name = '홍길동'
console.log(name) // '홍길동'

// 실제 실행 순서 (개념적으로)
var name       // 선언만 호이스팅
console.log(name) // undefined
name = '홍길동'
console.log(name) // '홍길동'

console.log(age) // ❌ ReferenceError: Cannot access 'age' before initialization
let age = 30

greet() // ✅ '안녕하세요' (호이스팅으로 동작)

function greet() {
  console.log('안녕하세요')
}

// 함수 표현식은 변수만 호이스팅
sayHi() // ❌ TypeError: sayHi is not a function

var sayHi = function() {
  console.log('안녕')
}

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

  return function() {
    count++         // 내부 함수가 외부 변수에 접근
    return count
  }
}

const counter = makeCounter()
counter() // 1
counter() // 2
counter() // 3
// count는 외부에서 직접 접근 불가 → 캡슐화

// 1. 데이터 은닉
function createUser(name) {
  let _name = name // private 변수

  return {
    getName: () => _name,
    setName: (newName) => { _name = newName }
  }
}

// 2. 커링 (함수 분리)
function multiply(x) {
  return (y) => x * y
}

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

double(5) // 10
triple(5) // 15

// 3. 메모이제이션
function memoize(fn) {
  const cache = {}
  return function(n) {
    if (cache[n] !== undefined) return cache[n]
    cache[n] = fn(n)
    return cache[n]
  }
}

// 1. 일반 함수 호출 → 전역 객체 (strict mode: undefined)
function show() {
  console.log(this) // window (브라우저)
}

// 2. 메서드 호출 → 메서드를 소유한 객체
const obj = {
  name: '홍길동',
  greet() {
    console.log(this.name) // '홍길동'
  }
}
obj.greet()

// 3. 화살표 함수 → 상위 스코프의 this 상속
const obj2 = {
  name: '홍길동',
  greet: () => {
    console.log(this.name) // undefined (화살표 함수는 this가 없음)
  },
  greetLater() {
    setTimeout(() => {
      console.log(this.name) // '홍길동' (상위 스코프의 this)
    }, 1000)
  }
}

// 4. call / apply / bind
function introduce(greeting) {
  console.log(`${greeting}, ${this.name}입니다`)
}

const user = { name: '홍길동' }
introduce.call(user, '안녕하세요')   // this를 user로 고정하고 즉시 호출
introduce.apply(user, ['안녕하세요']) // apply는 인자를 배열로
const boundFn = introduce.bind(user) // this를 고정한 새 함수 반환
boundFn('반갑습니다')

function Animal(name) {
  this.name = name
}

Animal.prototype.speak = function() {
  return `${this.name}이(가) 소리를 냅니다`
}

const dog = new Animal('강아지')
dog.speak() // '강아지이(가) 소리를 냅니다'

// dog에 speak가 없으면 프로토타입 체인에서 찾음
// dog → Animal.prototype → Object.prototype → null

class Animal {
  constructor(name) {
    this.name = name
  }
  speak() {
    return `${this.name}이(가) 소리를 냅니다`
  }
}

class Dog extends Animal {
  speak() {
    return `${this.name}이(가) 멍멍!`
  }
}

console.log('1')

setTimeout(() => console.log('2'), 0)

Promise.resolve().then(() => console.log('3'))

console.log('4')

// 출력 순서: 1, 4, 3, 2