[javascript - scope, hoisting] 전역 및 지역 스코프 호스팅 이해하기

javascript의 변수가 같는 scope에 대하여 알아보고자

잘못된 정보의 대한 피드백은 언제든지 환영 입니다.

 

참고 소스

최근 ES6 문법을 지원한 이후로 var를 이용한 변수 선언은 거의 사용하지 않는 편으로 위는 스코프와 함께 호이스팅의 예시를 위한 코드입니다.

스코프 이해하기

전역이란 코드의 가장 바깥 영역을 말하며 전역은 전역 스코프를 만들게 된다.
위 코드에서 전역 스코프란 프로그램의 전체를 의미하며 실행 컨텍스트이다.

전역 공간에 변수를 선언하게 되면 전역 스코프를 갖는 전역 변수가 되며 이는 프로그램 어디에서든 참조를 할 수 있다.

위 코드의 지역 스코프

전역 스코프보다 좁은 범위의 지역 스코프가 존재하며 지역 스코프란 함수 내부 몸체를 말하며 지역은 지역 스코프를 만들게 된다. 지역에 변수를 선언하게 되는 경우 지역 스코프를 갖는 지역 변수가 되며 자신의 지역 스코프와 하위 지역 스코프에서 유효한 범위를 갖게 된다.

위의 예시 코드는 3개의 스코프가 존재를 하게 되며 위의 도표를 참조하면 된다. 

스코프는 위와 같은 계층 구조를 갖게 되며 모든 지역 스코프의 최상위 스코프는 전역 스코프가 된다. 

여기서 변수를 참조할 때 자바스크립트의 엔진은 스코프 체인을 통해 변수를 참조할 수 있게 되는데 

inner의 지역 스코프에서 Outer와 전역 스코프의 변수를 참조할 수 있으나 상위 스코프에서 하위 스코프를

참조하는 것은 불가능하다.

 

위의 코드에서 inner 스코프에 선언된 지역변수(var x)의 참조 범위는 inner 함수 내부에서만 가능하며 

outer 스코프에 선언된 지역변수(var z)의 참조 범위는 outer, inner 스코프 내부까지 참조가 가능하다.

전역 스코프에 선언된 전연변수 (var x, var y)의 참조 범위는 전역스코프, outer, inner 스코프 범위에서 참조가 가능하다.

 

호이스팅

위의 코드에서 var x는 전역 스코프와 inner의 지역 스코프에 각각 선언이 되어 있으며 

위 코드에서 console.log(x)를 실행하게 되면 undefined가 출력되는 것을 볼 수 있다.

여기서 java를 기존에 경험하신 개발자의 경우 console.log(x)의 출력값이 global x가 출력 될 것이라 

생각을 하셨겠지만 실행을 해보시면 undefined가 호출되는 것을 볼 수 있다.
이의 대한 이유는 자바스크립트 엔진의 호이스팅과 관련이 있다. 

 

호이스팅이란 자바스크립트의 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하고자 선언부를 프로그램의 상단으로 끌어올리는 것을 의미한다.

위 코드를 자바스크립트의 엔진에서 해석한 개념으로 보자면 다음과 같은 코드로 변경되게 된다.

자바스크립트는 메모리의 공간을 할당하기 위해 선언부를 상단으로 올리게 되며 선언은 하였으나

값을 할당하지 않은 상태가 되며 해당 값을 출력하게 되면 undifined 값이 출력된다.