[Javascript] 호이스팅(Hoisting)

호이스팅 (Hoistirng)

영어를 번역하자면 '끌어 올리기'라는 뜻이 있다.

mozilla문서에서는 Javascript에서의 호이스팅은 코드가 실행되기 전에 변수와 함수를 선언 전에 메모리 공간에 저장하는 과정을 말한다.

호이스팅을 설명할 땐 "변수 및 함수의 선언부가 스코프(유효범위) 최상단으로 끌어올려지는 것처럼 동작하는 것" 이라고 한다.  (선언과 할당의 분리)

변수의 초기화: 변수를 선언하고 처음으로 값을 저장하는 것 (undefined)

실행 컨텍스트: 코드가 실행되는데 필요한 정보를 가진 환경(객체 형태), 코드가 실행되기 전에 변수, 함수가 객체로 저장된다.

var foo = 1;
// 변수의 선언 / 초기화
var foo // undefined
// 할당
foo = 1

실행 단계에서 foo 변수가 현재 스코프 내에 있는지 검색하고 변수를 발견하면 대입을 실행한다.

선언은 컴파일 단계에서 처리, 대입(실행은) 코드 실행 단계에서 처리

선언과 대입(실행)이 따로 처리 되어서 선언문이 코드 상단으로 '끌어 올려지는 듯한' 효과가 발생한다.

// 함수 실행
myName('너굴맨')

// 함수 선언
function myName(name) {
	console.log(`내 이름은 ${name} 입니다.`)
}

위와 같이 소스코드에서 함수의 실행부가 선언보다 먼저 작성 되어도 에러가 나지 않고 실행된다. 

 

변수의 생성 단계

1. 선언 단계: 변수를 실행 컨텍스트의 변수 객체를 등록하는 단계
2. 초기화 단계: 변수 객체에 등록되어 있는 변수를 위하여 메모리를 할당하는 단계이며, undefined로 초기화한다.
3. 할당 단계: 변수에 실제로 값이 할당되는 단계이다. (undefined -> 할당 값)

const / let

const, let 키워드는 var와 다르게 선언 단계와 초기화 단계가 분리 되어서 진행이 된다.

그렇기 때문에 변수가 선언은 됐지만 메모리에 할당되지는 않아서 참조 에러가 발생하게 된다.

console.log(name); // ReferenceError
let name = '너굴'

 

var

var는 선언하기 전에 사용하면 error가 아닌 undefined로 출력된다.

var 키워드는 변수의 선언과 초기화 단계를 동시에 진행하게 된다. 그래서 아래와 같이 name에 undefined로 먼저 초기화가 된 후 값이 할당 된다.

// 소스 코드
console.log(name) // undefined
var name = "너굴"

// 동작
var name;
console.log(name); // undefined
name = '너굴'

 

TDZ(Temporal Dead Zone)

한글로 직역하면 일시적인 사각지대란 뜻이다.

선언 단계와 초기화 단계 사이 구간을 TDZ라고 한다.

const와 let도 호이스팅의 대상이지만 TDZ의 제한으로 초기화 전까지 해당 변수에 접근할 수 없다. 

 

 

함수 선언식은 호이스팅의 대상이 될 수 있지만 함수 표현식은 호이스팅이 발생하지 않는다.

 

결론

코드의 가독성 및 유지보수를 위해 호이스팅이 일어나지 않도록 한다.

되도록이면 함수와 변수를 코드 상단부에 선언하도록 한다.

변수는 const, let 키워드를 사용한다.

그럼에도 var와 호이스팅을 이해해야 하는 이유는 아직 ES6를 지원하지 않는 브라우저가 있을 수 있기 때문이다.

 

참고 자료

호이스팅

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅 - 용어 사전 | MDN

https://www.huskyhoochu.com/hoisting-var-let-const/

호이스팅과 var, let, const

https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/

[JavaScript] 호이스팅(Hoisting)이란? - 하나몬