호이스팅과 클로져

그간 공부했던 것들을 복습할 수 있는 마지막 기회인 오늘 무엇을 복습하는 것이 가장 적절할까 고민하던 중 기초때 배웠던 호이스팅과 클로져가 떠올랐다. 그 이후로 배운 실제로 코딩할 때 사용하는 것들은 하다보면 익숙해짐으로써 알게되는 과정이라면 이 부분의 경우 지금이 아니면 나중에 복습하기 정말 쉽지 않을 것 같았다. 그렇게 오랜만에 호이스팅과 클러져 개념에 대해 찾아보았다.

 

개발에 대해 정말 하나도 모르던 시절(그래봤자 1~2달 전이지만) 나름 열정이 가득했어서 진짜 자료를 보고 보고 또 봐서 이해하려했는데, 도무지 이해가 가지 않았었다. 이 개념을 이해하기 위해 블록 스코프, 함수 스코프 등등을 알았어야 했는데 그것들에 대한 개념도 제대로 잡혀있지 않다보니 쉽지 않았던 것 같다. 지금도 다시 봐도 그렇데 와닿지는 않아서 이것저것 찾아보다 한 번에 이해가 가게 도와주는 자료를 찾았다.

 

호이스팅 자료

https://hanamon.kr/javascript-호이스팅이란-hoisting/

 

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

 

클로져 자료

https://youtu.be/tpl2oXQkGZs?si=VwhOdJVPOPhU6Te1

 

 

이 자료들을 기반으로 내가 이해한 각 개념을 정리해보겠다.

 

호이스팅

호이스팅은 도달하지 않은 선언이 끌어올려져서 사용되는 것을 의미한다.

우선 자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정(*실행 컨텍스트를 위한 과정)을 거치기 때문에

함수, 변수 모두 호이스팅이 일어난다.

 

하지만 호이스팅이 일어나도 함수와 var 변수의 경우 정상적으로 작동하는데,

let과 const 변수의 경우에는 오류가 발생하는데, 이를 이해하려면 변수의 생성 절차를 먼저 이해해야 한다.

 

Step1. 실행 컨텍스트 등록 단계 - 실행 컨텍스트에 이름이 올라가는 단계(메모리에는 저장되지 않음)

Step2. 초기화 단계 - 메모리에 undefined 상태로 저장

Step3. 할당 단계 - 값이 메모리에 할당 됨

 

같은 변수이지만 에러가 일어나고