자바스크립트

[Javascript] 호이스팅과 실행 컨택스트란?

취업 드가자잇 2024. 4. 5. 22:03

 

이 분야에 대해서 공부를 하면서 느끼는 것이지만 왜 이렇게 용어가 어렵고 추상적인지 모르겠다.

더 쉽고 간결하게 설명할수는 없는걸까?

물론 있지만 그렇게 되면 설명이 굉장히 길어지고, 듣는 사람 입장에서는 TMI처럼 들릴 수 있기 때문에 보다 간결한 커뮤니케이션을 위해 이러한 전문 용어들이 있는게 아닐까 싶다...

 

필자는 현재 공부를 해나가고 있는 과정이기에 이 문서를 통해 정확한 지식을 얻기보다는 "이 사람은 이 개념에 대해 이런 방식으로 접근하고 있구나" 정도로 봐주시길 바란다.

 

서론이 길었는데 이번 주제인 호이스팅에 관하여 이야기 해볼려고 한다.

 

 

호이스팅은 "함수와 변수가 스코프의 최상단으로 끌어올려지는 것과 같은 현상"이라고 들었다.

여전히 추상적이다... 그래서 그게 뭔데...

 

여기서부터는 필자의 이해다. 

1. 우선, 자바스크립트 엔진은 우리가 작성한 코드를 본격적으로 실행하기 이전 우리가 선언한 변수, 함수들에 대한 정보를 모두 메모리에 저장한다 (이 단계에서 var, let, const 와 같은 변수들의 차이점이 드러나고, 실행 컨택스트라는 개념이 등장한다)

 

자, 그럼 실행 컨택스트라는건 뭘까?

필자가 이해한 실행 컨택스트는 우리가 선언한 변수, 함수들을 자바스크립트 엔진이 메모리에 기억하여 코드를 실행할 수 있는 환경을 셋팅하는 것이다. 즉, 우리가 어떠한 함수, 변수를 선언했는지 자바스크립트가 기억하여 우리가 작성한 코드를 실행할 준비를 한다는 것이다.

 

자 근데 이쯤에서 그런 의문이 들 수 있다. 근데 호이스팅은 그래서 뭐하는건데..? 최상단으로 변수와 함수가 끌여올려져서 그게 뭔데..?

호이스팅이 우리에게 주는 영향에 대해서 알아보기 위해 이를 var, let, const의 차이점과 연관지어 설명해보겠다.

 

var 같은 경우는 ES6(2015)이전 버전부터 존재하던 자바스크립트의 근본(?) 변수 선언 방식이다.

반면, let, const는 ES6이후 추가된 문법으로 당연히 뭔가 나은 점이 있어서 업데이트되었을 것이다

 

var의 호이스팅

var의 경우, 선언이전에 호출했을 경우 undefined가 뜬다

예를 들어, 이런 식이다

console.log(varVariable); // undefined
var varVariable = "I am defined!";

 

let과 const의 호이스팅

반면, let과 const도 기술적으로는 호이스팅 되지만, 선언이전에 해당 변수를 호출했을시에는 var과 달리 주소값오류가 발생한다. 

예를 들어, 이런 식이다 

console.log(letVariable); // ReferenceError: Cannot access 'letVariable' before initialization
let letVariable = "I am defined!";

 

이렇게 되는 이유는 var의 경우 자바스크립트 엔진이 코드를 실행하기이전에 실행 컨택스트를 생성하면서 var 변수안에 undefined를 자동으로 넣어주기 때문이고, 이를 값을 초기화한다 라고 필자는 이해했다

반면에 let과 const의 경우는 실행 컨택스트를 생성하는 과정에서 아무런 값도 넣어주지 않기 때문에(값의 초기화가 이루어지지 않기 때문에) 선언이전에 이를 호출할시 주소값 에러가 발생하는 것이다. 

그리고 이처럼 선언이전에 값을 호출했을때 우리가 원하는 바가 동작하지 않는 현상을 "일시적 사각지대(Temporal Dead Zone, TDZ)"라고 한다. 

 

그렇다면 함수는 어떨까?

함수의 호이스팅

함수 호이스팅또한 변수 호이스팅과 마찬가지로 실행컨택스트 생성과정에서 이루어진다.

자바스크립트는 이 단계에서 함수안에 있는 코드또한 메모리에 저장한다.

console.log(5, 2) // 7이 출력

function add(a, b) {

   return a + b;

}

 

이처럼, 함수의 선언보다 함수를 호출한 코드가 먼저 작성되었음에도 정상적으로 원하는 값이 도출된다.

이렇게 함수 호이스팅덕분에 코드를 실행하기 이전에 자바스크립트가 해당 함수를 기억(실행 컨택스트 생성)하면서 우리가 원하는 바의 동작을 수행할 수 있는 것이다.