Js 호이스팅

호이스팅

코드 실행전 엔진이 선언한 코드와 함수를 가져가서 메모리에 기억을 해둠

누군가 a 라는 변수를 부르면 메모리에 저장된 변수를 가져온다 

 

함수가 실행되기전 안에있는 변수 함수들에 범위의 최상단으로 올리는것 

 

console.log(name);  //undefined
var name = '지훈';   
console.log(name);  //지훈

변수가 선언이 되기도 전에 name이라는 변수를 눌렀는데 왜 Error가 안뜨고 undefined 이 나올까 ? 

이유는 호이스팅 떄문이다 

 

Js 호이스팅은 변수의 선언과 초기화를 같이 시킨다.  값 할당은 나중에  그 줄 가서 할당한다. 

name 이라는 변수가 있기는 한데 name에 값을 할당 받기 전이니 

첫번째 console.log(name) 이 undefined이 나온다

 

 

 

 

 

 

 

 

 

for(var i = 1; i<5; i++){
	console.log(i)
}		//  1,2,3,4
console.log(i) //  5

이코드은 말이안된다. 하지만 잘 출력된다 왜 ? 

var에 같은 경우에는 함수만 지역변수로 호이스팅이 되고 나머지는 다 전역변수로 올려버린다

for,문 등등 함수만 제외하고 다 전역변수로 올린다 

 

var a = 1
console.log(a) //1
var a = 2
console.log(a) //2

이코드는 말이 안된다.하지만 작동한다 이게 var에 문제점이다 

 

이렇게 말이 안되는 상황을 보완하기 위해 만들어진게 es6 let 이다 

 

let도 호이스팅이 된다 하지만 TDZ (Temporal Death Zone) 개념을 사용해서

변수나 함수가 호이스팅으로 기억은 하지만 변수 함수 선언문이 나오기전까지는 

 변수 함수에 접근할수 없게 한다 

 

 

정리를 하자 

 

• 호이스팅은 변수의 선언을 최상단에 끌어올린다는 뜻이다.
• var let const는 모두 호이스팅 된다.
• let 선언과 동시에 TDZ에 들어가서 초기화가 필요한 별도의 상태로 관리된다.
• const 는 선언과 동시에 초기화, 할당까지 이루어진다.
• var는 왠만하면 쓰지말자 그냥 쓰지말자 제발 쓰지말자 쓰지말라면 쓰지말아라
• let대신 const를 사용하자. let으로 선언되어 있다면, 어디선가 이 변수가 바뀔지도 모른다는 생각을 가지고 있어야 하므로, 코드를 읽기가 어려워진다. 반면 const는 초기화, 선언, 할당까지 되어 있으니 변경되지 않을 것이다라는 확신으로 코드를 볼 수 있다. (물론 객체의 속성은 바뀔 수 있음.)

참고 https://yceffort.kr/2020/05/var-let-const-hoisting

Home