<aside> <img src="/icons/cursor-click_brown.svg" alt="/icons/cursor-click_brown.svg" width="40px" /> 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!
</aside>
우리는 이전에 이러한 함수를 실행했을 때, 어떠한 결과가 출력되는지를 확인한 적이 있습니다.
이러한 에러가 발생하는 이유를 그저 박스 내부에 변수가 갇혔기 때문이라는 정도로 넘어갔었는데요. 지금부터 이러한 에러가 발생하는 원인에 대해 조금 더 자세하게 알아보겠습니다. JavaScript에는 scope라는 개념이 존재합니다. 우선 전역 스코프와 지역 스코프에 대해 알아볼까요.
위 이미지에서 파란색 박스는 전역 스코프 공간을 의미합니다. 그리고 붉은색 박스는 지역 스코프 공간을 의미하죠. 변수 x는 scopeTest라고 하는 함수의 지역 스코프 내에서 참조될 수 있을까요?
x는 지역 스코프에서 참조될 수 있습니다.
전역 스코프에 존재하는 변수는 지역 스코프 내에서 참조될 수 있죠. 이렇게 전역 스코프에서 존재하는 변수를 우리는 전역 변수라고 이야기합니다. 그렇다면 함수의 지역 스코프 내에 존재하는 변수 y는 어떨까요. 전역 스코프에서 참조될 수 있을까요?
y는 전역 스코프에서 참조될 수 없습니다.
지역 스코프 내에서 선언된 변수는 해당 지역에서만 존재할 수 있습니다. y와 같이 특정 지역 스코프 내에서 존재하는 변수를 지역 변수라고 이야기합니다. 스코프가 정확하게 무엇인지, 어느 시점에 생성되는지에 대해서는 아래에서 알아보도록 할겁니다. 지금은 지역 스코프를 생성하는 몇가지 종류에 대해 알아볼게요.
JavaScript에서 지역 스코프를 생성하는 종류는 함수 레벨 스코프와 블록 레벨 스코프가 있습니다. 대부분의 프로그래밍 언어는 블록 레벨 스코프를 따릅니다. 그런데 JavaScript는 과거 함수 레벨 스코프를 따랐었죠. 현재는 let, const 키워드의 등장으로 블록 레벨 스코프를 따를 수 있게 되었습니다. 함수 레벨 스코프란, 함수를 실행할 때 생겨나는 지역 스코프입니다.