[JavaScript] 함수 스코프(function-scope)와 블록 스코프(block-scope)

- 지난 시간

안녕하세요.  지난 시간에는 스코프(Scope)에 대해 알아봤습니다.

 

혹시 놓치고 오신 분들은 아래 링크를 통해 학습하고 오시는 걸 추천드리겠습니다.

[JavaScript] 스코프(Scope) 개념

[JavaScript] 스코프(Scope)개념

 

- 개요

이번 시간에는 함수 스코프와 블록 스코프에 대해 알아보겠습니다.

 

ECAMScript 2015(ES6)에서 let과 const 문법이 추가되면서 자바스크립트 생태계는 많이 변화가 됐습니다.

 

자바스크립트는 기본적으로 함수 스코프를 따릅니다. 지난 시간에 스코프에 개념에 대해 알아봤습니다. :)

 

무슨 말이냐 let과 const 문법이 추가되기 전까지 우리는 var 키워드를 통해 변수를 선언했습니다.(엄청난... 삽질을 했었죠ㅠ.ㅠ)

 

var 키워드를 사용하면 변수는 호이스팅 되서 전역 또는 해당 함수에 지역변수로 선언됩니다. (호이스팅에 대해서는 다음에 다뤄보도록 하겠습니다.)

 

아래 소스 코드를 보면 hey라는 값이 true라면 if 조건문이 실행됩니다.

function Hi(hey) {

  if (hey) {
  
    var hi = "Hi"

    return hi
  }

  //여기서는 hi 변수는 undefined로 존재한다.
  console.log(hi)
}
Hi()

 

하지만 Hi() 함수를 호출할 때 hey 값을 설정하지 않아서 if 조건문을 통과하지 않습니다. 그렇기 때문에 console.log(hi)가 실행됩니다.

 

하지만 실행 결과를 확인해보면 console.log(hi)는 Error를 발생하지 않고 undefined를 출력합니다.

 

왜 그렇까요? 그럼 도대체 let 또는 const를 사용하면 어떻게 될까요?

 

function Hi(hey) {

  if (hey) {
  
    let hi = "Hi"

    return hi
  }

  //여기서는 hi 변수는 ReferenceError: hi is not defined 에러가 발생한다.
  console.log(hi)
}
Hi()

 

var 키워드를 let으로 변경했습니다. 이번에는 undefined가 출력되지 않고 Error를 발생했습니다.

 

이 부분은 호이스팅과 함수 & 블록 스코프와 연관되어있습니다.

 

기본적으로 var 키워드를 사용하면 실제 자바스크립트 엔진은 hi 변수를 함수에 지역변수로 선언합니다.

function Hi(hey) {
  //지역 변수
  var hi

  if (hey) {
    //hi 변수 값은 지금 할당
    hi = "Hi"

    return hi
  }
  
  //여기서는 hi 변수는 undefined로 존재한다.
  console.log(hi)
}
Hi()

 

위와 같이 hi 변수를 함수에 지역변수로 선언하는 것처럼 만들어 놓습니다. 그렇다면 let과 const는 어떻게 될까요?

 

 var는 함수 스코프이기 때문에 hi 변수지역 변수에 등록되지만, let과 const는 블록 스코프이기 때문에 전역 변수에 등록되지 않습니다.

 

- 함수 스코프(function-scope),  블록 스코프(block-scope)

스코프는 범위를 나타낸다고 했습니다.

 

블록 스코프는 "주어진 코드 블록({}) 안에서만 사용이 가능하며 밖에서는 접근할 수 없음"을 의미합니다.

함수, if문, for문, while문, try/catch문 등에서 사용되는 let과 const는 해당 블록 내부에서만 사용이 가능합니다.

 

그렇기 때문에 아래와 같은 소스코드에서는 hi를 접근할 때  ReferenceError: hi is not defined 가 발생합니다.

해당 if문 안에서만 사용되기 때문에 다른 외부에서는 접근을 할 수 없는 것입니다.

function Hi(hey) {

  if (hey) {
  
    let hi = "Hi"

    return hi
  }

  //여기서는 hi 변수는 ReferenceError: hi is not defined 에러가 발생한다.
  console.log(hi)
}
Hi()

 

하지만 var 키워드는 함수 스코프이기 때문에 해당 함수에 전역 변수로 설정되기 때문에 Error가 발생하지 않는 것입니다.

- 주의사항

var 키워드를 사용한 변수는 함수 스코프이기 때문에 외부에서 접근이 가능한 건가?라는 생각을 할 수 있습니다.

 

하지만 var 키워드는 함수로 감싸져 있다면 함수 외부에서는 접근이 불가능합니다.(if문, for문 등 다른 문법에서는 접근이 가능)

즉, var 키워드가 호이스팅 되는 순간은 해당 함수에 지역 변수로 등록되기 때문에 해당 함수에서는 접근이 가능하지만

 

함수 외부에서 접근은 불 가능합니다.!! 꼭 주의하세요. :)

 

이번 시간에는 함수 스코프(function-scope)와 블록 스코프(block-scope)에 대해 알아봤습니다.