[파고들기] 호이스팅

ㅜㅜ·2022년 9월 24일
1

파고들기

목록 보기
1/2
post-thumbnail

파고들기 시리즈를 만들어야겠다고 생각한 이유는 간단하다.
첫째로 부트캠프 진도 따라가기에 급급하니 내 공부를 한다는 생각이 안 들었고,
두번째로 진도 내용을 공부하다가 모르는 것을 검색해봤을 때 또 모르는 개념이 나와서 난처했던 경험이 많았기 때문이며,
세번째로 기초를 잘 다진 개발자가 되고 싶다는 생각 때문이다.

파고들기 시리즈는 주로 주말에 공부할 예정이기 때문에 조금 여유를 가지고 찾아볼 수 있을 것 같다.

파고들기 첫번째 포스트는 자주 들었지만 무슨 뜻인지 몰랐던 '호이스팅'이라는 개념에 대해 공부하고 작성하기로 했다.



선행 학습 : 자바스크립트 변수 생성 과정

  1. 선언 : 스코프, 변수 객체의 생성 + 스코프가 변수 객체 참조
  2. 초기화 : 변수 객체 값을 위한 공간을 메모리에 할당. (이 때 할당되는 값은 'undefined')
  3. 할당 : 변수 객체에 값을 할당.
  • var는 선언과 동시에 초기화 이루어짐. = 선언과 동시에 undefined가 할당.
  • let/const는 선언만 되고 초기화가 이루어지지 않는데, 이 단계에서 TDZ에 들어감. (선언된 변수의 자리가 메모리에 준비되어 있지 않은 상태)
  • 참고로 const는 초기화와 동시에 선언이 이루어져야 함.
let a
a = "what";//가능

const a //SyntaxError : Missing initializer in const declaration
a = "what"




선행 학습 : Temporal Dead Zone (TDZ)

TDZ에 있는 변수에 접근하게 되면 'Reference Error : Cannot access '변수이름' before initialization'과 같은 에러가 발생한다.

pi;//TDZ에 들어가 있는 상태로 Reference Error 발생함.
const pi = 3.14;// 선언되고 초기화된 상태
pi;//3.14가 출력

TDZ는 선언 전에 변수에 접근하는 것을 금지한다.

const, let 선언 키워드 외에도 class구문, constructor() 내부의 super(), default parameter 등에도 TDZ가 적용된다.

var로 선언하는 변수는 선언 전에도 사용할 수 있기 때문에 var 사용은 피하는 것이 좋다.




Hoisting

호이스팅은 인터프리터*가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미하며, 스코프 안의 어디에서든 변수 선언문이 코드의 선두(최상위)로 끌어올려진 것처럼 동작한다.

*인터프리터 (interpreter) : 프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경을 말함.

사실 호이스팅의 정의를 찬찬히 읽어 보아도 감이 잘 안 와서 예시들을 찾아봤다. 가장 많이 볼 수 있는 예시가 아래와 같은 경우였다.

console.log(num);
var num;

위 코드를 콘솔에서 출력하면 undefined가 출력되는데, 변수 num의 선언이 소스코드가 실행되는 시점이 아니라 그 이전에서 먼저 실행이 되기 때문에, 변수 선언을 실제로 우리가 보기에 console.log 뒤쪽에 했어도 변수가 선언된 것처럼 출력한다.

위 예시에서 num은 var 키워드로 선언되어 있는데, var 키워드는 위 선행학습에서 공부했듯이 선언과 동시에 초기화 되면서 undefined가 할당되므로, 할당되어 있는 값인 undefined가 콘솔에 출력된다.

console.log(num);
var num = 6;

위 코드에서 콘솔에 출력할 경우에도 동일하게 undefined가 출력이 되는데, 6을 num에 할당해주었음에도 불구하고 undefined가 출력되는 이유는 자바스크립트가 선언만 호이스팅 하기 때문이다. 할당된 값은 호이스팅 되지 않는다.

console.log(num);
let num = 10;//const인 경우도 동일함

위 코드에서는 그러나 콘솔에 undefined가 아닌 Reference Error가 출력된다.
let, const 선언이 호이스팅을 수행하지 않아서일까?

아니다!!!

let, const 선언 역시 호이스팅 대상이다.

let과 const는 선언할 경우 선언만 될 뿐, var처럼 동시에 초기화가 이루어지지 않기 때문에 이 과정에서 TDZ에 들어가게되고, Reference Error가 나오게 된다.


호이스팅은 함수 호출에도 적용되는데,
함수가 선언되기 전 함수를 호출해도 제대로 동작한다.

catName("클로이");

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

//결과: "제 고양이의 이름은 클로이입니다"

😋

호이스팅에 대해 알기 위해서 모르는 개념들을 타고 올라가 선행하는 과정에서 변수가 생성되는 과정이나 TDZ에 대해서 배울 수 있었다.

키워드 var, let, const의 경우에는 스코프에 대해서 배울 때도 차이를 중요하게 언급하고 넘어갔던 것 같은데 늘 주의해서 사용해야겠다는 생각이 든다!

profile
다시 일어나는 중

0개의 댓글