JavaScript - 호이스팅이란? 간단한 예제로 알아보기 / Hoisting

---

호이스팅 쉽게 알아보자

---

안녕하세요.

고코더 입니다.

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

---

개념

---

● 1. 호이스팅의 단어의 뜻

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

● 2. 호이스팅의 개념

- 자바스크립트가 실행되면 parser가 빌드하면서 문법을 검사합니다. 이 와중에 끌어올릴 값을 선택하여 내부적으로 최상단으로 끌어 올려 처리합니다.

- 여기서 끌어 올려질 내용들은 선언입니다.  var, let, const, function 등이 대표적입니다.

- 전역 범위(global scope)내에서는 스크립트 최상단으로 끌어 올립니다.

- 함수 범위(function scope)내에서는 함수의 최상단으로 끌어 올립니다.

---

변수 호이스팅 예제

---

● 3. 해당 소스를 실행합니다. var 변수 선언을 하단에 할당하고 위에서는 선언하지 않은 변수에 먼저 값을 넣었습니다.

Go = 5; 
console.log(Go);
var Go; //parse에 의해 끌어올려진다

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

.

● 4. 실제로 parser 끌어 올려 실행된 소스의 형태는 이렇습니다.

var Go; //parse에 의해 끌어올려짐
Go = 5; 
console.log(Go);

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

---

함수 호이스팅 예제

---

● 5. 함수는 아래에 존재하지만 위에서 함수를 실행합니다. 과연 어떻게 될까요?

Coder();
function Coder() { // parser에 의해 상단으로 끌어올려진다
    console.log("고코더");
}

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

● 7. 실제로 parser에 의해 끌어올려진 모습은 이렇습니다. 함수가 먼저 선언되어 있기 때문에 오류 없이 실행되어었던 것입니다. 

function Coder() {
    console.log("고코더");
}
Coder();

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

---

호이스팅 되는 순서 

---

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

Go = 5; 
console.log(Go);
var Go;
 
Coder();
function Coder() { 
    console.log("고코더");
}

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

var Go;    //parser에 의해 최상단
function Coder() {  // parser에 의해 변수 다음으로 
    console.log("고코더");
}
 
Go = 5; 
console.log(Go);
Coder();
 

---

주의사항

---

● 10. 호이스팅을 사용할때 조심할 점이 있습니다.

 

- 호이스팅이 없는 거처럼 상단에 먼저 선언하는 것이 좋은 코딩입니다. 하지만 호이스팅만 믿고 아무데나 선언하는건 좋은 코딩이 아닙니다.

- 함수선언식은 호이스팅 되지 않습니다. 이 부분은 나중에 더 상세하게 다루겠습니다.

- let/const 사용을 권장합니다. 

---

마무리

---

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