호이스팅

안녕하세요🌞

이번 시간에는 자바스크립트의 호이스팅에 대해 배워보도록하겠습니다.

호이스팅이란, 아직 선언되지 않은 함수나 변수들을 해당 스코프의 맨 위로 끌어올려서 사용하는 것처럼 보이게하는 자바스크립트의 작동 방식을 의미합니다.

자바스크립트에는 변수 호이스팅과 함수 호이스팅이 있는데요,

코드샌드박스에서 함수 호이스팅에 대해 먼저 배워보겠습니다.

작성된 코드를 살펴보겠습니다.

print();

function print() {
    console.log("hello world");
}

"hello world" 라는 문장을 출력하는 기능의 print 함수를 선언하고,

우리가 배웠던 것과는 다르게 print 함수의 호출문을 print 함수의 선언문보다 아래에 작성하지 않고, print 함수의 선언문 위에 print 함수의 호출문을 작성했습니다.

작성된 코드를 실행시켜보면, print 함수를 호출하면 함수가 아직 선언되지 않았지만, 오른쪽 콘솔 탭에 "hello world" 가 출력되었고, 함수가 오류 없이 정상적으로 작동하는 것을 확인할 수 있습니다.

해당 코드가 정상적으로 작동하는 이유는, 자바스크립트 엔진이 코드를 해석하는 과정에서 이렇게 print 호출문 보다 선언문이 먼저 작성되어있는 코드로 받아들였기 때문입니다.

function print() {
    console.log("hello world");
}

print();

이렇게 print 함수의 선언문을, print 함수가 갖는 스코프, 유효범위의 가장 위쪽으로 끌어올려서 코드를 해석하는 자바스크립트의 작동 방식을 함수 호이스팅 이라고 부릅니다.

이번엔 변수 호이스팅에 대해 배워보겠습니다.

자바스크립트의 변수 선언 키워드 중 var를 이용해 변수를 선언하고, 변수의 선언문 위쪽에 해당 변수를 출력하는 코드를 작성해보았습니다.

console.log(num); // undefined

var num = 10;

변수 num이 선언되기 전에 console.log 함수로 num의 값을 출력하려했지만, 실행 결과 ERROR 가 아닌 undefined 가 출력됩니다.

그 이유는 자바스크립트 엔진이, 이러한 코드를 이렇게 해석했기 때문입니다.

var num;
console.log(num); // undefined
num = 10;

이번엔 var num = 10; 코드가 전부 해당 스코프의 맨 위로 올라가지 않고,

var num; 이라는 num변수의 선언문만 위쪽으로 올라간 것을 볼 수 있습니다.

num = 10; 처럼 이렇게 변수에 값을 할당하는 것을 변수를 초기화 한다 라고 하기도 하는데,

변수 호이스팅 은 변수의 초기화문이 아닌, 변수의 선언문만 해당 스코프의 최상단으로 올려 해석하는 방식입니다.

그렇기 때문에 앞에서 배웠던 것처럼, 맨 윗 줄에서는 num의 값에 undefined이 할당되어 코드 실행 결과 undefined가 출력되게 됩니다.

그럼 이번엔 var 가 아닌 let 과 const로 변수를 선언하고 동일한 코드를 작성해보겠습니다.

console.log(num1); // error

let num1 = 10;

console.log(num2); // error

const num2 = 15;

자 이렇게 동일한 코드를 작성한 다음, 코드를 실행시켜보면 전부 undefined 이라는 값이 출력됩니다.

코드샌드박스가 어떠한 보정을 하고 있는지, 해당 코드를 이렇게 코드샌드박스에서 실행하면 undefined이 출력되는데, 더 정확한 확인을 위해 브라우저 콘솔에 코드를 작성해보겠습니다.

작성된 코드를 복사하고, 브라우저의 개발자도구 콘솔탭에 코드를 붙여넣어 실행하면, var로 선언한 변수는 undefined가 출력되지만 let과 const는 undefined가 출력되지 않고, 에러가 발생하는 것을 볼 수 있습니다.

let과 const로 선언된 변수는 왜 선언전에 접근하려하면 에러가 발생하는지를 이해하기 위해서는, TDZ라는 것에 대해 알고있어야합니다.

TDZ는 Temporal Dead Zone 의 약자로, 일시적인 사각지대, 즉 변수를 사용하는 것을 허용하지 않는 공간이라고 할 수 있습니다.

let과 const는 호이스팅이 발생하지 않는 것이 아니라, var와는 다르게 변수 스코프의 맨 위에서 변수의 초기화가 완료될 때 까지, TDZ라는 공간에 있기 때문에 호이스팅이 발생하지 않는 것 처럼 보이는 것입니다.

var와 다르게 let과 const가 변수가 초기화 될때까지 TDZ에 머물러있는 이유는, var는 변수를 생성한 다음 바로 메모리에 변수의 공간을 미리 할당해주지만,

let과 const는 그렇지 않기 때문에, 변수가 초기화 될 때까지 메모리 공간이 확보되지 않은 상태가 되어 해당 키워드로 생성된 변수들은 변수를 사용할 수 없는 공간인 TDZ에 들어가게 되는 것입니다.

호이스팅은 자바스크립트의 기본 성질이지만, const와 let 외에도 TDZ에 머물러있는 몇 가지 구문들이 있기 때문에, 웬만하면 변수와 함수의 선언문 이후 변수와 함수에 접근하는 코드를 작성하는 것이 좋습니다.

또한 호이스팅이 많이 발생하게 작성된 코드는 가독성이 좋지 않아 코드의 이해도가 떨어지고, 오류를 발생시킬 수 있습니다.

이번 강의에서도 되도록 변수와 함수는 var 대신 let 과 const로 선언해 사용하고, 함수는 호출 전에 미리 선언을 할 수 있도록 코드를 작성해봅시다.

이번 시간에는 이렇게 자바스크립트의 호이스팅에 대해 배워보았습니다.

다음시간에는 함수의 표현식과 선언식에 대해 다뤄보겠습니다.

감사합니다.

Last updated 1 year ago