[Basic] JS - Hoisting (호이스팅) - 변수선언끌어올리기 (= 변수선언위치변경)

1. Hoisting 정의
2. Hoisting 예제 - 변수값이 출력 전에 할당된 경우엔 결과 동일
3. Hoisting 예제 - 변수값이 출력 후에 할당된 경우엔 결과 상이
4. Hoisting 동강

Hoisting 정의 

선언을 코드 경계범위 (또는, 현재 함수)의 맨 위로 끌어올리는 JS 내장 기본 기능.

 

---

 

1.

JS에선 변수가 사용된 이후 선언 가능. 즉, 변수 선언 전에 변수 사용 가능.

 

2.

hoisting 되는 건 오직 변수 선언 자체일 뿐, 초기변수값은 hoisting 안 됨. 예제2 참고

 

3.

var 키워드로 선언된 변수는 hoisting 가능하지만, 

let 또는 const 키워드로 선언된 변수는 hoisting 안 됨.

4.

되도록이면 모든 변수 선언은 코드 경계범위의 최상단에 할 것.
왜냐면, 호이스팅 작동원리 이해 못 하면 에러 발생의 원인 됨.

 

5.

JS 엄격모드에선 hoisting 사용 불가. 
즉, 미리 선언 안 된 변수는 사용 불가.

 

Hoisting 예제 - 변수값이 출력 전에 할당된 경우엔 결과 동일

[예제1] - 값 할당 후, 나중에 변수 선언

 

<p id="demo"></p>

<script>

s = 5; // 변수 s에 5 할당.

hz = document.getElementById("demo"); 

hz.innerHTML = s; // 변수 s 출력

var s; // 변수 s 선언

</script>

 

결과보기 

---

[예제2] - 변수 선언 후, 나중에 값을 할당

 

<p id="demo"></p>

<script>

var s; // 변수 s 선언

s = 5; // 변수 s에 5 할당.

hz = document.getElementById("demo"); 

hz.innerHTML = s; // 변수 s 출력

</script>

 

결과보기

※ 두 예제 결과 동일.

Hoisting 예제 - 변수값이 출력 후에 할당된 경우엔 결과 상이

[예제1] - 출력 후 값을 할당

 

<p id="demo"></p>

<script>

var x = 3; // 변수 x 선언 및 초기값 할당.

hz = document.getElementById("demo"); // Find an element 

hz.innerHTML = x + " " + y; // 변수 x, y 출력  

var y = 4; // 변수 y 선언 및 초기값 할당. (아래 PS 예제의 빨간색 코드와 동일)

</script>

 

결과보기

---

[예제2] - 출력 전 값을 할당

 

<p id="demo"></p>

<script>

var x = 3; // 변수 x 선언 및 초기값 할당.

var y = 4; // 변수 y 선언 및 초기값 할당.

hz = document.getElementById("demo"); // Find an element 

hz.innerHTML = x + " " + y; // 변수 x, y 출력

</script>

 

결과보기

※ 두 예제 결과 다름. 

PS. 예제

 

<p id="demo"></p>

<script>

var x = 3; // 변수 x 선언 및 초기값 할당.

var y;  

hz = document.getElementById("demo"); 

hz.innerHTML = x + " " + y;  // 변수 x, y 출력  

y = 4; // 변수 y 선언 및 초기값 할당.

</script>

 

결과보기

Hoisting 동강