목차
- Hoisting 정의
- Hoisting 예제 - 변수값이 출력 전에 할당된 경우엔 결과 동일
- Hoisting 예제 - 변수값이 출력 후에 할당된 경우엔 결과 상이
- 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 동강
