JS 학습 진행중에 JS의 Lexical Scope와 Function Level Scope에 대해 정리하려한다.
Function Level Scope
보통 Function Level Scope는 Block Level Scope와 비교하며 학습하는 편인데, 타 언어에서도 블록 레벨 스코프는 많이 등장하는 편이고 익숙하기 때문에, JS에서의 var 키워드로 선언된 변수의 동작방식인 함수 레벨 스코프에 대해 알아보고자 한다.
함수 레벨 스코프인 var i 변수는 보통의 타 언어처럼 반복문이 끝났을 때 반복 횟수 카운팅을 위한 지역변수 i 로써 해제되고, 스코프 밖에서의 i는 가장 상단에 선언된 100의 값을 가지고 있어야 하는것으로 보이지만 실제로는 for 문의 블록은 함수 스코프가 아님으로 해제되지 않고 반복문의 i의 값을 유지하게 돼 7을 나타내게 된다.
따라서 함수 외 반복문 조건문 등의 블록 스코프에 따라 지역을 구분하지 않음으로 오류가 생길 가능성을 미연에 방지하기 위해 let, const등을 사용
Lexical Scope
렉시컬 스코프를 이해하는 데 아주 효과적인 예제를 발견해서 차용해 포스팅해보려고 한다.
자바스크립트도 함수의 상위 스코프를 결정함에 있어서는 대부분의 프로그래밍 언어와 같이 렉시컬 스코프 & 정적 스코프 를 따른다. 위의 예시를 보면 자바스크립트는 렉시컬 스코프를 따르므로 함수를 어디서 정의했는지에 따라 상위 스코프를 결정한다. 함수가 호출된 위치는 중요하지 않다. 예제처럼 함수가 처음 정의될때 스코프가 정적으로 결정된다.
예제를 확인해보면 bar() 의 경우에는 전역변수 a를 따르지만 foo() 는 지역내에서 bar()를 호출하기 때문에 10일 것 같지만 정의시에 bar()는 전역에 선언된 함수이기 때문에 전역변수 a의 값인 1을 두번 다 호출한다.
