스코프와 호이스팅

프론트엔드 필수 질문인 자바스크립트 지식에 대해서 적어보려고 한다 . . .

스코프

스코프란 자바스크립트 엔진이 참조의 대상이 되는 식별자를 검색할 때 사용하는 규칙의 집합이다.
즉 , 어떤 변수를 사용하거나 함수를 호출하려고 할 때 해당하는 식별자로 사용하는데, 그 식별자를 검색하는 메커니즘이라고 이해하면 된다.

1. 렉시컬 스코프

프로그래머가 코드를 짤 때 , 변수 및 함수/블록 스코프를 어디에 작성하였는가에 따라 정해지는 스코프를 렉시컬 스코프라고 한다.
"렉시컬(Lexical)" 이라는 명칭이 붙은 이유는 자바스크립트 컴파일러가 소스코드를 토큰으로 쪼개서 의미를 부여하는 렉싱 단계에 해당 스코프가 확정되기 때문이다.
쉽게 말하면 , 변수 혹은 함수/블록이 어디에 써있는가를 보고 그 스코프를 판단하면 된다.

2. 스코프 체인

현재 스코프에서 식별자를 검색할 때 상위 스코프를 연쇄적으로 찾아나가는 방식을 말한다.
실행 컨텍스트를 보면 생성될때마다 LexicalEnvironment 가 만들어지고 그 안에 outer 참조 값이 있다는 것을 알텐데 바로 이 outer 값이 상위 스코프의 LexicalEnvironment를 가리키기 때문에 이를 통해 체인처럼 연결되는 것이다.

호이스팅

호이스팅이란 "끌어올리다" 라는 뜻으로 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어오려지는 현상을 말한다.

여기서 주의할 점은 " 선언문 " 이라는 것이며 " 대입문 "은 끌어올려지지 않는다.

console.log(a);
var a = 2;

이렇게 생긴 코드가 있을 시 컴파일러는 자바스크립트 엔진이 인터프리팅을 하기 전에 컴파일을 한다. 이 때,
1. var a , 2. a = 2

이렇게 두개의 구문으로 본다는것이다.

따라서, 변수 a는 호이스팅이 되고 console에는 undefined라는 결과가 나온다.

함수 선언문의 경우도 호이스팅이 된다.

func();
function func() {console.log('함수 호이스팅')}

하지만 함수 호이스팅을 할 때 주의할 점이 있는데 . . . ! !

함수와 변수 선언문중에서는 함수 선언문이 먼저다.

func();
var func = function() { console.log('난 변수 호이스팅')}
function func() {
	console.log('난 함수 호이스팅')
}

동일한 이름으로 함수 , 변수 선언문이 있지만 함수 선언문의 호이스팅이 먼저기 때문에 console에는 ' 난 함수 호이스팅' 이 뜬다.

결론 = "var 쓰지마라"