Hoisting?
지난번 TIL에서 호이스팅을 올리기로 했었는데 마침 관련 주제를 포스팅 할 기회가 생겨 올린다.(처음으로 추후 포스팅을 올린다는 약속을 지키는거 같다)
[220411 TIL - 재귀함수, var, let, const 차이]
https://velog.io/@eotkds/220411-TIL
[let, const, var?]
https://velog.io/@eotkds/let-const-var
let, cosnt, var 변수 선언에 대한 차이와 조금 가까운 주제이기 때문에 참고로 올려 놓는다. 간단히 설명하자면 Hoisting 은 let, const는 불가하지만 var 선언에서는 가능하다는 것이다.
서론이 길었다. 호이스팅은 직역하자면 끌어올린다는 의미이다. 변수선언이나 함수선언 을 코드를 실행하기 전에 상단으로 끌어올리는 의미라고 생각하기 쉽지만, 그렇지는 않다고 한다. 단지 현상이 그렇게 보여서 그렇다고 한다.
자바스크립트 엔진이 코드를 실행하기 전 실행가능한 코드를 형상화 하고 구분하는 과정을 거친다고 한다. 여기서 모든 선언(var, let, const, function, class)을 스코프에 등록한다고 한다. (그리고 실행 컨텍스트 까지라고 하는데 정확한 의미는 모르겠다) 즉, 실행 시점으로 넘어가기전 선언된 식별자에 대한 정보를 이미 알고 있다고 한다.
변수 생성 3단계
1단계 선언 단계(Delaration phase)
변수를 변수객체에 등록한다고 한다. 이 변수 객체는 스코프가 참조하는 대상이 된다고 한다.
2단계 초기화 단계(Initailization phase)
변수객체에 등록된 변수를 위한 공간을 메모리에 확보한다고 한다. 이 단계에서 변수는 undefined로 초기화 된다고 한다.
3단계 할당 단계(Assignment phase)
undefined로 초기화된 변수에 실제 값을 할당한다고 한다.
var 로 선언한 변수는 선언 단계와 초기화 단계까지 한번에 이뤄진다고 한다. 스코프에 변수를 등록 후 공간을 확보하고(1단계) undefined로 초기화 한다고 한다.(2단계) 그리고 실행 단계에서 변수안에 값을 넘겨준다.(3단계)
다시 설명하자면 var은 1,2단계를 동시에 하기 때문에 선언을 실행하는 하는 쪽보다 아래쪽에 해도 에러 없이 실행된다는 것이다. 다만 Undefined를 반환할 뿐이다.
console.log(a) // undefined
var a = 'b' let, const로 선언한 변수는 1단계 작업만 이루어 지고, 실행 시점에서 2단계인 메모리 할당을 한다고 한다. 그렇기 때문에 실행 지점보다 아래 부분에서 선언한 경우 참조에러를 발생시킨다.
console.log(a) // ReferenceError: a is not defined
let a = 'b'엄밀히 말하면 let, const는 변수 선언은 한 것이지만 할당이 안된 것이라 이해 할 수도 있다. 이것을 일시적 사각지대, TDZ(Temporal Dead Zone) 이라고도 한다.
마치면서
hoisting이라는 직역으로 이해하면 쉬울 거 같았지만 알고보니 그렇지 않았다. 그래도 하나 알아가는 거 같아서 not bad 하다.
참조
[[JavaScript] 호이스팅(Hoisting)이란?, HANAMON, 2022년05월03일 접속]
https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/
[호이스팅, MDN WEB DOCS, 2022년05월03일 접속]
https://developer.mozilla.org/ko/docs/Glossary/Hoisting
[호이스팅에 대한 오해와 진실, Tecoble, 2022년05월04일 접속]
https://tecoble.techcourse.co.kr/post/2021-04-25-hoisting/
