[JavaScript]자바스크립트 호이스팅

 

 

자바스크립트는 순차적으로 코드가 실행되어 선언문 이후에 변수가 대입되어야 값을 이용할 수 있다고 생각합니다.

하지만, 컴파일러의 역할을 다시 생각해보면, 그것이 아니란 것을 알 수 있습니다.

a = 2;
var a;
console.log( a );

// 출력 : 2

 

💻 컴파일러는 두번 공격한다.

 

자바스크립트의 컴파일레이션 단계에서 '렉시컬 스코프'

: 모든 선언문을 찾아 적절한 스코프에 연결해주는 과정

 

var a = 2 

• var a;
• a = 2;

자바스크립트는 위 구문을 선언문과 대입문으로 나누어 처리합니다.

선언문: 컴파일레이션 단계에서 처리

대입문: 실행단계에서 처리

 

👉 '호이스팅' : 변수와 함수 선언문은 선언된 위치 스코프에서 최상단으로 끌어올려지는 동작

 

❗ 선언문은 컴파일레이션 단계에서 처리되어, 호이스팅이 일어나지만, 대입문은 실행 로직 제자리에 둔다.

 

❗ 함수 선언문은 호이스팅이 일어나지만, 함수 표현식은 함수 표현식을 담은 변수의 선언문만 호이스팅 된다.

❗ 기명의 함수 표현식이어도, 해당 스코프에서 찾지 못해 ReferenceError가 난다. (함수 표현식의 스코프내에 존재)

foo(); // TypeError 👉 undefined 호출
bar(); // ReferenceError
var foo = function bar (){
    // some codes
}

 

💻 함수가 먼저다

함수 선언문 먼저 호이스팅 👉 변수 선언문 호이스팅

foo();//1
var foo;

function foo(){
	console.log(1);
}

foo = function(){
	console.log(2);
}

변수 foo가 먼저 선언되었지만, 함수 선언문의 호이스팅이 먼저 일어나 foo(); 는 1을 출력