[새싹x코딩온] 웹 개발자 부트캠프 과정 3주차 회고 | 자바스크립트의 호이스팅(Hoisting)

1. 서론

• JavaScript의 변수와 함수의 호이스팅에 대해서 알아보기

2. 본론

호이스팅이란?

호이스팅이란 변수 및 함수 선언이 코드의 최상단으로 올려지는 것처럼 동작하는 현상을 말한다.

 

변수 호이스팅

변수는 프로그램을 실행하는 동안 다양한 형태의 데이터를 저장할 수 있는 메모리 공간이다.

자바스크립트에서 사용되는 변수는 var, let, const 가 있다.(변수에 대해 정리한 포스팅 : https://daddda3232.tistory.com/5)

 

var, let, const 의 차이점을 표로 간단히 정리해보았다. 

변수 키워드	재선언	재할당	스코프	생성과정	호이스팅
var	가능	가능	함수 스코프	1. 선언 및 초기화 2. 할당	O
let	불가능	가능	블록 스코프	1. 선언 2. 초기화 3. 할당	O
const	불가능	불가능	블록 스코프	1. 선언+초기화+할당	O

 

🤷‍♀️  어? 근데 어디서 let이랑 const는 호이스팅이 안된다 그랬는데 왜 O로 되어있죠???

 

이를 이해하기 위해서는 자바스크립트의 호이스팅이 어떻게 동작하는지 먼저 알아야 한다!

1. 자바스크립트 엔진이 코드가 실행이 되기 전에 코드를 훑으면서 선언해둔 변수와 함수를 기억한다.
2. 함수 내에 존재하는 변수와 함수 선언에 대한 정보를 기억하고 먼저 실행한다.

저게 몬말이지???

 

한마디로 말하면 자바스크립트 엔진은 변수 선언이 코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행한다는 말이다.

 

아래 예시를 살펴보자

아래와 같이 선언도 전에 변수 a를 부르는 코드가 있다.

console.log(a);
var a = 1;

 

자바스크립트도 위에서부터 아래로 읽어들이기 때문에 원래대로라면 위와 같이

변수를 선언하기 전에 부르면 아래와 같은 에러가 떠야한다.

실제 a라는 변수가 선언되지 않았을 때 뜨는 참조 에러

그러나 자바스크립트의 호이스팅 때문에 a라는 변수를 먼저 부르고 밑에서 선언해도 불러와진다.

a변수 부르고 a 변수를 선언했을 때 뜨는 창 : undefined

 

🙋‍♀️ undefined 뜨는데 에러난거 아니에요???

 

아니다! undefined도 엄연한 자료형이다. (자료형에 대한 블로그 포스팅 : https://daddda3232.tistory.com/6)

var라는 키워드로 변수를 선언과 동시에 초기화가 되면서 undefined라는 값이 들어간 것이다.

이렇게 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 것을 호이스팅 이라고 한다.

 

.🤷‍♀️ 근데 이게 모가 문제죠???

 

이렇게 되면 예기치 못한 오류가 발생하기 하고 코드를 예측하는데 혼란을 줄 수 있다!

 

ES6 문법에서는 var의 호이스팅 문제와 재선언 및 재할당으로 인한 코드 혼란을 방지하기 위해

let과 const의 사용을 권장하고 있다.

 

.🤷‍♀️ let과 const 도 호이스팅 된다면서요?? 

let과 const로 선언한 변수는 변수 호이스팅이 동작하지 않는 것처럼 동작한다.

 

아래의 코드 예시를 살펴보자

let 키워드로 선언된 b라는 변수를 선언하기 전에 불러보았다.

console.log(b);
let b = 2;

let은 var와는 달리 참조에러가 발생했다.

b를 선언하기 전에 b를 사용했을 때 뜸 : 초기화 전에는 사용 못함 이라는 참조에러 발생

 

실제론 let도 호이스팅이 되었지만 변수 선언만 되고 초기화는 되지 않은 상태로 일시적 사각지대(Temporal Dead Zone)에 있어서 ReferenceError 가 뜨는 것이다.

 

🤷‍♀️ 둘의 차이가 뭐죠??

var 는 변수 선언 단계와 초기화 단계가 동시에 되지만

let 은 선언 단계와 초기화 단계가 분리되어 진행된다. 

(선언 단계, 초기화 단계, 할당 단계에 대해서는 변수에 대해 정리한 블로그 포스팅에 같이 써놓았다

참고 : https://daddda3232.tistory.com/5 )

 

let 키워드로 선언된 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점(변수 선언문)까지 변수를 참조할 수 없다.

스코프의 시작 지점부터 초기화 단계 시작 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대(TDZ : Temporal Dead Zone) 이라 한다.

 

아래의 그림을 살펴보면 더 이해하기 쉽다.

 

이미지 출처 : 모던 자바스크립트 Deep Dive

이미지 출처 : 모던 자바스크립트 Deep Dive

 

 

 

자바스크립트에서 재할당이 필요한 경우는 let을 쓰고,

상수와 같이 변하지 않아야 할 값을 할당할 때는 const를 써야 한다!

var는 선언과 동시에 초기화가 이뤄져서 호이스팅이 동작하지만

let과 const 는 선언과 초기화 단계가 별개로 동작하므로 호이스팅이 동작하지 않는 것처럼 보인다.

(var와 달리 초기화가 선언문을 만났을 때 동작하며,  초기화 전에는 TDZ에 있어서 호이스팅이 동작하지 않는 것처럼 보인다)

 

함수 호이스팅

함수 호이스팅을 설명하기 전에 함수를 생성하는 2가지 방법에 대해 먼저 알아보자

 

1) 함수 선언문

function 키워드를 이용해서 함수를 선언하는 방식이다.

function add(x, y) {
 return x + y
}

2) 함수 표현식

변수에 함수 객체를 할당하는 방식

const multifly = function(x, y){
 return x * y
}

 

🙋‍♀️ 그냥 아무거나 쓰면 안되나요

위의 코드만 보면 별 차이가 없는 것처럼 보이지만 둘의 차이 중 하나는 

이 글의 주제인 호이스팅이다.

함수를 언제 호출하느냐에 두 함수가 어떻게 결과를 도출하는지 아래 예시로 살펴보자

 

1) 함수를 먼저 선언한 후 그 아래에서 호출한 경우

 

콘솔창 결과

 

이 경우 선언을 먼저하고 호출을 했기 때 두 함수 모두 에러가 나지 않는다.

 

2-a) 호출을 먼저 하고 선언한 경우(함수 표현식에 const 키워드 사용)

 

함수 선언문은 호이스팅으로 인해 호출이 되지만, 표현식은 참조 에러를 일으킨다.

 

함수 선언문도 호이스팅이 일어나서 스크립트 어디에서나 호출해도 그 코드를 실행시킨다.

반면 함수 표현식은 변수에 할당된 것이기 때문에 참조 에러를 발생한다.

 

🤷‍♀️ 그러면 var 키워드를 쓰면 되지 않나요?

2-b) 호출을 먼저 하고 선언한 경우(함수 표현식에 var 키워드 사용)

 

var 키워드를 쓰면 타입 에러가 발생한다..

var 키워드를 쓰면 undefined 로 초기화가 되며 변수 호이스팅이 발생하여 타입 에러가 발생한다.

또한 앞에서 말했듯이 var 키워드는 재선언, 재할당이 되기 때문에 쓰지 않는 것이 좋다.

 

스크립트 어디에서나 호출하고 싶으면 함수 선언문으로 쓰면 된다.

함수 표현식을 쓸거면 꼭 함수 표현식 이후에 호출해야 한다!!

(어떤 개발자들은 함수 선언문 대신 함수 표현식을 사용할 것을 권장한다고 한다.)

함수 선언문은 함수 호이스팅이 동작하지만 함수 표현식은 동작하지 않는 것처럼 보인다.

 

3. 결론

호이스팅 개념을 이해하기 어려웠고 감이 안잡혔는데

계속적으로 공부하고 포스팅을 해보니 이제는 조금 알것같다.

스코프 관점에서의 var,let,const의 차이와

호이스팅 관점에서의 var,let, const의 차이는 면접 질문 단골이라고 하니 잘 숙지해야겠다.

4. Reference

 

1. 코딩온 강의 자료

 

2. 모던 자바스크립트 Deep Dive

http://product.kyobobook.co.kr/detail/S000001766445?LINK=NVB&NaPm=ct%3Dlwt20us8%7Cci%3D3eeae87413d188962c2189bfc03af972cec288fd%7Ctr%3Dboksl1%7Csn%3D5342564%7Chk%3D0a86971807241e21311b2f82ad997d61e4c24ab4

모던 자바스크립트 Deep Dive | 이웅모 - 교보문고

 

3.

https://velog.io/@hang_kem_0531/JS-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC

[JS] 자바스크립트 동작 원리

 

4.

https://joshua1988.github.io/web-development/translation/javascript/how-js-works-inside-engine/

자바스크립트의 동작원리: 엔진, 런타임, 호출 스택

 

 

 

5. 자바스크립트를 배우는데 아직도 let과 var의 차이를 모른다고? : 호이스팅(코딩알려주는누나)

https://youtu.be/fETYLCU2YYc?si=kL2N89k1nM8sHIEG

6.

https://enjoydev.life/blog/javascript/2-var-let-const

면접 단골 질문! 호이스팅을 곁들인 var, let, const의 차이

 

 

7. https://kadosholy.tistory.com/174

[Javascript] 자바스크립트 변수(var, let, const) 및 호이스팅(hoisting)

 

 

8. https://velog.io/@hoo00nn/TDZ-Temporal-Dead-Zone-%EC%9D%B4%EB%9E%80

 

9.

https://noogoonaa.tistory.com/78