[ JavaScript ] 자바스크립트의 핵심: 스코프와 렉시컬 스코프 완벽 이해하기

 

---

클로저나 호이스팅 개념을 공부하려고하니 스코프 개념이 빠지지 않고 나왔다.
렉시컬스코프, 스코프, 전역스코프, 지역스코프, 함수스코프, 블록스코프 ... 여러 스코프 개념이 복합적으로 등장했고 그에 대한 이해가 기본이 된 상태여야 다른 개념을 이해할 수 있겠다는 생각이들어 이참에 확실하게 스코프 개념을 정리 해 두고자 글을 쓴다.

개념이해를 확실히 하기전에 포함관계를 한눈에 확인 가능하면 이해가 쉬워지겠다는 생각이 들어 위 이미지와 같이 도식화 해 두었다.

1. 스코프와 렉시컬스코프 이해하기

스코프란 무엇일까?
스코프는 참조대상 식별자, 쉽게 말해서 변수명•함수명을 찾아내기 위한 규칙이다.
일반적으로 스코프는 중첩된 구조를 형성하는데 
동작방식을 설명하자면,
내부 스코프는 외부 스코프에 접근할 수 있지만, 외부 스코프는 내부 스코프에 직접 접근할 수 없다.


이렇게만 들으면 끄덕끄덕하며 그렇지 하고 넘어갈 수 있는데,
클로저라는 개념을 이해하고자 하면 렉시컬스코프라는 개념이 나온다. 여기서 부터 나의 혼란이 시작되었는데 스코프개념은 알겠는데 렉시컬 스코프는 무엇을 말하는것일까?

구글에 검색을 해보면 이렇게 설명을 해 주는데 이해하기가 쉽지 않았다.
지금 다시 보니 즉, 이후부터의 설명이 더 이해하기가 쉽게 돼 있다는 생각이 든다.

렉시컬 스코프 개념을 설명 해 보자면,
변수의 유효 범위를 결정하는 매커니즘 으로서 스코프의 동작방식을 설명하는 개념이다.

렉시컬 스코프의 대조되는 개념으로는 다이나믹(동적) 스코프가 있는데
이 둘의 차이점은 아래와 같다.
렉시컬 스코프 - 함수를 어디에서 선언하였는지에 따라 변수와 함수 식별자의 유효 범위가 결정됨
다이나믹 스코프 - 함수를 호출하는 시점에서 호출된 위치에 따라 변수와 함수 식별자의 유효 범위가 결정됨

정리하자면,
렉시컬 스코프는 스코프의 동작방식( 변수명, 함수명을 찾아내기 위한 동작방식 )중 하나로, 함수를 어디에서 선언하였는지에 따라 변수와 함수 식별자의 유효범위를 결정하는 메커니즘이다.

2. 스코프의 구분 알아보기

자바스크립의 스코프의 동작방식인 렉시컬스코프에 대해서 이해했으니,
다음으로는 스코프의 구분에 대해서 알아보자.

크게 전역스코프와 지역스코프로 나뉘는데
전역스코프는 코드 어디에서든 참조할 수 있는 스코프이고,
지역스코프는 함수 자신과 하위 함수에서만 참조할 수 있는 스코프이다.

지역스코프는 함수스코프와 블록스코프를 포괄하는 개념이며 변수의 유효 범위를 제한하기 위해 사용된다.
함수스코프와 블록스코프의 구분은 아래의 설명과 같다.
함수 스코프 - 함수가 정의된 범위 내에서 변수와 함수가 유효한 스코프를 가지는 것
                    (함수 내에서 선언된 변수와 함수는 해당 함수 내부에서만 접근할 수 있고, 외부에서는 접근할 수 없다.)
                    var는 함수스코프를 따른다.
블록 스코프 - 중괄호 {}로 둘러싸인 블록(if 문, for 문) 내에서 변수와 함수가 유효한 스코프를 가지는 것

                   (해당 블록 내에서 선언된 변수와 함수가 블록 내에서만 접근할 수 있고, 블록 외부에서는 접근할 수 없다.)

                  let, const는 블록스코프를 따른다.

---

참고: https://poiemaweb.com/js-scope