[javascript] 스코프(Scope)와 호이스팅(Hosting)

1. 스코프

 

스코프는 변수의 선언 형태에 따라 전역 스코프와 함수 스코프로 나뉘게 됩니다. 전역 스코프는 함수의 외부에서 선언된 변수이며 지역 스코프는 함수 안에서 선언된 변수입니다.

var global = 1;

function myfunc()
{
	var local = 2;
	console.log(local);
	console.log(global);
}

myfunc();

예제를 보면 당연한 얘기지만 global변수는 어떤 함수에서든지 접근할 수 있으며 myfunc() 함수안에서 선언된 local은 myfunc() 함수를 벗어나게 되면 접근할 수 없게 됩니다.

 

그런데 만약 myfunc() 함수안에서 gloabl변수를 선언하게 되면 외부에 선언된 global은 무시되고 함수 내부에 선언된 global변수를 사용하게 됩니다. 내부에 global변수가 있으니 상위로 거슬로 올라가 전역 변수에 global이 있는지를 확인하지 않는 것입니다. 이처럼 현재 영역안에서 우선적으로 검색하고 없으면 상위 영역으로 거슬로 올라가 찾는 것을 스코프 체인이라고 합니다.

---

2. 호이스팅

 

일반적으로 자바스크립트는 위에서부터 순서대로 실행되지만 꼭 그렇게 되지 않는 경우도 있습니다.

console.log(x);
var x = 1;

위 실행결과는 undefined인데 이는 변수가 없다는 것이 아니라 변수에 값이 할당되지 않았다는 뜻입니다. 변수는 분명 console.log() 아래에 있기 때문에 순서대로 라면 오류가 나야 하지만 그렇지 않은 것이죠.

 

이는 자바스크립트 해석기가 코드를 파싱 하면서 전역으로 선언된 함수나 변수를 먼저 처리하기 때문입니다. 이 때문에 x변수가 아래에 있어도 변수 선언 자체는 우선적으로 처리되어 console.log()가 실행될 때 변수는 이미 선언되어 있는 것입니다.

var x;
console.log(x);
x = 1;

그리고 자바스크립트에서는 이러한 현상을 호이스팅이라고 합니다.