[JavaScript] 함수 선언문과 블록스코프

함수 선언문 형식으로 작성하면 호이스팅으로 인해 호출을 먼저 해도 코드가 동작한다.

함수 선언문 형식은 함수 스코프를 가져서 전역에 hello 함수가 추가되기 때문에 문제 없이 실행되는 것이다.

 

하지만 아래 예제를 보자.

📝 예제 코드

// 1
{
  c();
  function c() {
    console.log("block");
  }
}

// 2
{
  function c() {
    console.log("block");
  }
}
c();

// 3
c();
{
  function c() {
    console.log("block");
  }
}

1번과 2번 코드는 에러 없이 동작한다.

하지만 3번 코드는 TypeError가 발생한다. 왜 그럴까?

 

🔍 예제별 동작 원리

✅ 예제 1

{
  c();
  function c() {
    console.log("block");
  }
}

블록 안에서 c를 호출했기 때문에

블록 내부 함수 선언이 블록 스코프 안에서 호이스팅 되어 정상적으로 실행된다.

 

✅ 예제 2

{
  function c() {
    console.log("block");
  }
}
c();

함수 선언이 블록 안에 있고, 호출은 블록 바깥에서 일어난다.

블록 내부에 선언된 함수를 전역에 등록하기 때문에 c()가 동작한다.

* 엄격 모드나 모듈 환경에서는 에러가 나기 때문에 주의할 것

 

❌ 예제 3 (TypeError 발생)

c();
{
  function c() {
    console.log("block");
  }
}

함수 호출이 먼저 나오고, 블록 안에서 함수 선언이 이뤄진다.

호이스팅 과정에서 c라는 식별자는 마치 var c처럼 미리 선언된다.

호출 시점에 c는 이미 존재하지만 값은 undefined 상태이다.

 

자바스크립트는 이 코드를 아래 코드처럼 처리한다.

var c;

c(); // undefined() -> TypeError 발생

{
  function c() {
    console.log('block');
  }
}

예제 3에서는 호이스팅이 일어나지만 값이 undefined인 상태여서

호출 시 TypeError: c is not a function가 발생한다.

 

📚 참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/function

함수 선언 - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/block

block - JavaScript | MDN