[Deep Dive CS - Q19] 실행결과

Q19. 아래 코드 실행 시 (1), (2), (3), (4)의 순서대로 어떤 일이 발생하나요?

// 실행 순서대로 따라가보세요.
console.log(add(1, 2));    // (1)
console.log(sub(3, 2));    // (2)
console.log(div(4, 2));    // (3)
console.log(User);         // (4)

// --- 선언부 ---

// 함수 선언문
function add(a, b) {
  return a + b;
}

// 함수 표현식 (var)
var sub = function(a, b) {
  return a - b;
};

// 함수 표현식 (const)
const div = (a, b) => {
  return a / b;
};

// 클래스 선언
class User {}

 

 

• (1) add: 3 출력 (정상)
  • 함수 선언문은 선언, 초기화, 할당이 동시에 호이스팅되어 어디서든 호출 가능합니다.
• (2) sub: TypeError: sub is not a function 발생!
  • var sub는 호이스팅되어 undefined가 들어있습니다. undefined(3, 2)를 실행하려니 타입 에러가 납니다.
• (3) div: ReferenceError 발생! (만약 위에서 에러가 안 났다면)
  • const div는 호이스팅되지만 TDZ에 갇혀 있습니다. 접근 자체가 불가능합니다.
• (4) User: ReferenceError 발생!
  • 클래스(class)도 let/const처럼 호이스팅은 되지만 TDZ의 적용을 받습니다.