호이스팅 쉽게 알아보자


안녕하세요.
고코더 입니다.


오늘은 자바스크립트 언어의 고유한 특징인 "호이스팅(Hoisting)"을 간단하게 알아보겠습니다. 저는 최대한 한눈에 알아 볼 수 있게 쉽게 설명하려고 합니다. 


개념


 1. 호이스팅의 단어의 뜻

영어 사전을 보면 해당 단어의 뜻이 "끌어 올리기; 들어올려 나르기."라고 사전에 나옵니다. 이 개념의 의미는 선언들을 끌어올려 최상단에 갖다. 두는 걸 이렇게 표현했습니다.


 2. 호이스팅의 개념

- 자바스크립트가 실행되면 parser가 빌드하면서 문법을 검사합니다. 이 와중에 끌어올릴 값을 선택하여 내부적으로 최상단으로 끌어 올려 처리합니다.
- 여기서 끌어 올려질 내용들은 선언입니다.  var, let, const, function 등이 대표적입니다.
- 전역 범위(global scope)내에서는 스크립트 최상단으로 끌어 올립니다.
함수 범위(function scope)내에서는 함수의 최상단으로 끌어 올립니다.



변수 호이스팅 예제



 3. 해당 소스를 실행합니다. var 변수 선언을 하단에 할당하고 위에서는 선언하지 않은 변수에 먼저 값을 넣었습니다.
1
2
3
Go = 5
console.log(Go);
var Go; //parse에 의해 끌어올려진다
cs

결과 값은 5가 정상적으로 노출 됩니다. 

.

 4. 실제로 parser 끌어 올려 실행된 소스의 형태는 이렇습니다.
1
2
3
var Go; //parse에 의해 끌어올려짐
Go = 5
console.log(Go);
cs

우리가 아래에 실수로 변수를 선언해도 오류가 없었던건 바로 호이스팅이 끌어 올렸기 때문입니다. 


함수 호이스팅 예제


 5. 함수는 아래에 존재하지만 위에서 함수를 실행합니다. 과연 어떻게 될까요?
1
2
3
4
Coder();
function Coder() { // parser에 의해 상단으로 끌어올려진다
    console.log("고코더");
}
cs

 6. 결과 값은 :고코더"라는 문자열이 정상적으로 노출 됩니다. 


 7. 실제로 parser에 의해 끌어올려진 모습은 이렇습니다. 함수가 먼저 선언되어 있기 때문에 오류 없이 실행되어었던 것입니다. 
1
2
3
4
function Coder() {
    console.log("고코더");
}
Coder();
cs

실무에서 function이 밑에 있는데 실행되는걸 의아하게 생각했던분들은 호이스팅이 범인입니다.


호이스팅 되는 순서 


 8. 그렇다면 이렇게 함수와 변수가 동시에 아래에 있다면 어떤 요소가 제일 상단으로 올라갈까요? 아래 예제 소스를 한번 수정 해보세요.

1
2
3
4
5
6
7
8
Go = 5
console.log(Go);
var Go;
 
Coder();
function Coder() { 
    console.log("고코더");
}
cs

 9. 정답은 이렇습니다. 변수가 가장 맨위로 올려지고 함수가 그 다음에 위치합니다. 우선 순위는 변수가 최우선 입니다. 

1
2
3
4
5
6
7
8
9
var Go;    //parser에 의해 최상단
function Coder() {  // parser에 의해 변수 다음으로 
    console.log("고코더");
}
 
Go = 5
console.log(Go);
Coder();
 
cs



주의사항


 10. 호이스팅을 사용할때 조심할 점이 있습니다.
 
- 호이스팅이 없는 거처럼 상단에 먼저 선언하는 것이 좋은 코딩입니다. 하지만 호이스팅만 믿고 아무데나 선언하는건 좋은 코딩이 아닙니다.
- 함수선언식은 호이스팅 되지 않습니다. 이 부분은 나중에 더 상세하게 다루겠습니다.
- let/const 사용을 권장합니다. 



마무리


호이스팅 단어 뜻 그대로 개념을 외우시면 될거 같습니다. 


댓글을 달아 주세요