목차
Hoisting 정의 Hoisting 예제 - 변수값이 출력 전에 할당된 경우엔 결과 동일 Hoisting 예제 - 변수값이 출력 후에 할당된 경우엔 결과 상이 Hoisting 동강
Hoisting 정의
선언을 코드 경계범위 (또는, 현재 함수)의 맨 위로 끌어올리는 JS 내장 기본 기능.
1.
JS에선 변수가 사용된 이후 선언 가능. 즉, 변수 선언 전에 변수 사용 가능.
2.
hoisting 되는 건 오직 변수 선언 자체일 뿐, 초기변수값은 hoisting 안 됨 . 예제2 참고
3.
var 키워드로 선언된 변수는 hoisting 가능하지만,
let const 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 동강
VIDEO
VIDEO
