Purple Bobblehead Bunny

Frontend/JAVASCRIPT

[JAVASCRIPT] Hoisting, 호이스팅

준영어린이 2022. 6. 13. 20:39

호이스팅 Hoisting

 

Hoist는 밧줄이나 장비를 이용하여 끌어올리는다. 라는 뜻을 가진다.

어원 그대로 변수나 함수가 선언이 되면, 선언 된 위치와 상관없이

코드 최상단으로 끌어올리는 것을 말한다.

자바스크립트의 모든 선언에서 호이스팅이 일어난다.

 

var는 선언과 함께 undefined로 초기화되어 저장되지만, 

let const는 초기화 되지 않은 상태로 올라가기 때문에 에러가 발생한다.

addString("ABC","DEFG");

function addString(str1, str2){
   return str1 + str2;  
}

// 출력 값 : ABCDEFG

선언 되어 있지 않은 값을 참조할 때

 

addStirng 실행 하는 과정에 addString 함수가 선언되어 있지 않아서 오류가 발생해야 하지만

정상적으로 코드가 실행이 된다. addString 함수를 상단으로 올려 참조할 수 있게 하는데,

이것을 호이스팅 이라고 한다. 

 

 

console.log(a) // undefined
var a = "A";   // var 변수
console.log(a);// A

 

/* 호이스팅 소스 코드*/
var a;
console.log(a);
a = "A";
console.log(a);

변수 a가 선언되기 전에 console.log 로 출력을 해도 오류가 나지 않고, undefined를 출력한다.

이유는 자바스크립트가 선언문 var a를 소스코드 최상단으로 호이스팅을 하기 때문이다.

'Frontend > JAVASCRIPT' 카테고리의 다른 글

[JAVASCRIPT] Map  (0) 2022.06.20
[JAVASCRIPT] Event  (0) 2022.06.19
[JAVASCRIPT] 변수 선언, let, var, const  (0) 2022.06.13
[JAVASCRIPT] 자바스크립트 기본 문법  (0) 2022.06.11