본문 바로가기
WEB front-end/Javascript

호이스팅(hoisting)

by 겸둥이곰 2022. 5. 26.
반응형

Javascript에서 호이스팅이란 , 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미.

 

var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화

 

let, const로 선언한 변수의 경우 호이스팅 시 초기화 하지 않음 ==> 호이스팅 안되는거나 마찬가지임. 

 

Javascript는 초기화를 제외한 선언만 호이스팅 함.

 

간단하게 var로 선언한 변수와 function 키워드로 생성된 함수만 맨처음(코드상 맨 위로 끌어올려짐)에 실행 된다고 생각하면 쉬울듯.. 

 

console.log(a);
var a ;
a = "Hello";

위와 같은 경우 콘솔에 출력되는 a의 값은 undefined 임 .

 

변수 a는 호이스팅에 의해 미리 초기화 되지만 a에 "Hello"의 할당은 console.log(a) 보다 뒤에 이루이 지므로 출력되는 a의 값은 undefined 임 . 

 

그리고 가끔 변수를 선언하지 않고 사용하는 경우가 있는데(var, let, const 로 선언하지 않음)...

 

이런 경우는 호이스팅이 발생하지 않음. 

 

console.log(a);
a = "Hello";

위 코드의 경우는 선언부가 없기 때문에 호이스팅이 발생하지 않아 초기화가 안되므로 RefferenceError 가 발생함 . 

 

let, const는

console.log("a > ", a);
console.log("b > ", b);

let a = 1;
const b = 2;

 

맨처음에 얘기한것처럼 let, const는 선언만 되지 초기화는 안되기 때문에 ReferenceError 발생함 . 

 

아래는 함수의 호이스팅 예...

log("Hello");

function log(a){
    console.log(a);
}

코드 상 선언이 되기전에 호출이 되었으나 호이스팅에 의해 함수의 선언이 먼저 되므로 이상없이 실행 됨. 

 

실수를 줄이 기 위해 변수를 선언하고 나서 초기화를 하고 사용하는 습관을 들이자.

반응형

'WEB front-end > Javascript' 카테고리의 다른 글

async/await  (0) 2022.05.27
promise  (0) 2022.05.27
arrow function  (0) 2022.05.17
반복문  (0) 2022.05.17
switch 문  (0) 2022.05.17

댓글