[JS] 자바스크립트 Hoisting

코드 실행 시 변수 처리

- 자바스크립트 엔진이 코드 읽으면 생성 단계에서 실행 컨텍스트 생성

- 함수 선언문은 실행 단계에서 함수 전체가 실행 컨텍스트에 저장

- var 변수는 저장 시 undefined로 초기화

- let, const는 초기화 X

 

 

Hoisting

console.log(call()) //undefined
var x = 1;
console.log(call()) //1
function call(){
	return x
}

- 변수가 선언된 시점보다 앞에서 사용되는 현상

- var 변수는 생성 단계에서 undefined로 초기화

- 함수는 생성 단계에서 함수 전체가 저장되므로 뒤에서 선언되어도 호출 가능

 

console.log(call()) // ReferenceError : Cannot access 'x'
let x = 1
console.log(call()) // 1
function call(){
	return x
}

- let, const 변수는 생성 단계에서 초기화되지 않기 때문에 선언문 이전 접근 시 오류 발생

- let, const는 hoisting이 발생하지 않음

 

 

var, let, const 

- 변수 선언 키워드

- var, let 변수는 재할당 가능, const는 재할당 불가능

- var은 함수 스코프, let과 const는 블록 스코프 변수

function varFor(){
  for(var i=0;i<3;++i){
    setTimeout(()=>console.log("i: ",i),0);
  }
}

function letFor(){
  for(let i=0;i<3;++i){
    setTimeout(()=>console.log("i: ",i),0);
  }
}

varFor() // 3 3 3
letFor() // 0 1 2

varFor

• i는 varFor 함수 범위에 존재하는 변수
• setTimeout이 호출될 때, i는 for 블록이 끝난 시점에 소멸하지 않음

 

letFor

• i는 for 블록 안에 존재하는 변수
• 각 for 블록이 실행되고 i 소멸, 화살표 함수의 클로저에 저장