렉시컬 스코프

이해하기 어려웠던 개념인 렉시컬 스코프에 대해 확실히 이해하고 넘어가자

JS에서 스코프는 함수를 호출할 때가 아니라 선언할 때 결정된다.

1

1. var text = '하이'

2. function log(){
3.   console.log(text)
4. }

5. function wrapper(){
6.   text = '바이'
7.   log()
8. }

9. wrapper()  // '바이'

위 예제를 보고 로그의 결과값을 예측해 본다면 (7)번째 줄에서 호출되는 log 속의 text(3)는 선언된 위치의 상위에 선언된 (1)번째줄 text를 바라본다.
그리고 (6)번째 줄이 실행되면서 text가 "바이" 로 재할당 되면서 콘솔에는 '바이'가 출력된다

2

그러면 아래의 예제에서는 어떤 값이 출력될까?

1. var text = '하이'

2. function log(){
3.   console.log(text)
4. }

5. function wrapper(){
6.   var text = '바이'
7.   log()
8. }

9. wrapper()  // "하이"

이해하기 어려웠던 부분이었는데 위의 예제에서는 "하이"가 출력된다.

이유는 (3) 에서의 text는 (6) 에 위치한 text를 바라보는게 아니고 가장 가까운 상위 범위인 전역변수 (1)을 바라보고 있기 때문에 "하이"가 출력된다

처음에 말했듯이 JS에서의 스코프는 함수가 "선언" 될때 전역변수 text를 가리키기 때문에 전역변수를 변경하지 않는 이상 결과값은 바뀔 수 가 없다.

정리

렉시컬 스코프라는 용어 자체가 머리에 쉽게 들어오지 않아서 이해하기 힘들었는데
함수가 어디서 "호출" 되는지에 따라 동적으로 결과값이 바뀌는게 아닌
"선언" 될 때 정적으로 스코핑을 한다고 이해하면 될 것 같다!

참고한 글

https://ko.javascript.info/closure
https://www.zerocho.com/category/JavaScript/post/5740531574288ebc5f2ba97e