반응형
호이스팅(Hoisting)이란?
- 변수의 정의가 범위에 따라 선언과 할당으로 분리되어 변수의 선언을 항상 최상위로 끌어올리는 것을 의미
- 즉, 변수 선언의 위치와 상관없이 해당 범위 내의 실행 코드보다 가장 먼저 실행되어 선언되는 것
- 선언은 호이스팅이 되지만, 할당은 호이스팅이 되지 않음
- 자바 스크립트에서는 var 변수에서 호이스팅이 가능
호이스팅의 장점
호이스팅을 사용하지 않은 정상적인 코드
- 변수의 선언과 할당 이후 값 출력
var a; // 변수 a 선언
a = 1; // a의 1의 값 할당
alert(a); // a의 값 출력
// 1호이스팅을 사용한 코드
- 변수의 선언과 할당은 분리되어 선언을 최상단으로 이동하여 인식
- 선언이 가장 마지막에 있어도 위치에 상관없이 가장 먼저 인식되며 정상적으로 실행
- 즉, 위의 정상적인 코드와 동일하게 작동
a = 1; // a에 1의 값 할당
alert(a); // a의 값 출력
var a; // 변수 a 선언
// 1호이스팅의 단점
정상적인 코드
var a = 1 // 변수 a의 선언과 값
alert(a); // a의 값 출력
// 1호이스팅이 적용된 잘못된 코드
- 선언은 호이스팅이 되지만, 할당은 호이스팅이 되지 않음
- 값이 존재하지 않으므로 undefined 값 반환
alert(a); // a의 값 출력
var a = 1 // 변수 a의 선언과 값
// undefined
/* 아래의 코드와 같은 의미
var a;
alert(a);
a = 1; */- 즉, 잘못된 값(undefined)을 통해 예기치 못한 버그의 주범이 될 가능성이 높음
잘못된 값, 'undefined'를 최소화하려면?
- 호이스팅이 되는 var변수 대신 let변수를 사용
- let변수는 'undefined'의 값이 아닌 참조 에러를 출력하여 버그 발생률을 낮춰줌
- 물론 let변수는 호이스팅을 사용 할 수 없음
- 호이스팅이 잘못 적용된 코드를 let변수로 작성
alert(a); // a의 값 출력
let a = 1 // 변수 a의 선언과 값
// Uncaught ReferenceError: Cannot access 'a' before initialization참고
- var변수는 현재 호이스팅의 부작용으로 인하여 많이 쓰이지 않으며 let변수를 주로 사용한다.
- 다만, var 변수의 호이스팅이 무엇인지의 개념과 왜 안쓰는지에 대한 여부는 알고 있는 것이 좋다.
나무위키 - 호이스팅
반응형