Hoisting

mangjell·2022년 5월 4일
0

호이스팅(Hoisting)이란?

호이스팅은 코드를 실행하기 전 변수선언/ 함수선언을 해당 스코프의 최상단으로 끌어올리는 것이 아니다!!
호이스팅은 코드 실행하기 전 변수선어/ 함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다.

자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.
자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다.
함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.
유효 범위: 함수 블록 {} 안에서 유효
즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.
실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다.
실제 메모리에서는 변화가 없다.

자바스크립트 엔진은 코드를 실행가기 전 실행 가능한 코드를 형상화하고 구분하는 과정(실행컨텍스트를 위한 과정)을 거친다.

자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한 과정에서 모든 선언들을 var let const function class 를 스코프에 등록한다.

코드 실행 전 이미 변수선언/ 함수 선언이 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 작동한다. (정확히는 var 키워드로 선언한 변수와 함수 선언문일 경우 오류 없이 동작한다. 이는 선언이 파일의 맨 위로 끌어올려진 것 처럼 보이게 한다.)

실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경을 의미히고 실행되기 전 이러한 실행 컨텍스트 과정 즉 코드를 구분하는 과정을 거친다.

참조
https://hanamon.kr/javascript-%ed%98%b8%ec%9d%b4%ec%8a%a4%ed%8c%85%ec%9d%b4%eb%9e%80-hoisting/

https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

profile
프론트엔드 개발자

0개의 댓글