파고들기 시리즈를 만들어야겠다고 생각한 이유는 간단하다.
첫째로 부트캠프 진도 따라가기에 급급하니 내 공부를 한다는 생각이 안 들었고,
두번째로 진도 내용을 공부하다가 모르는 것을 검색해봤을 때 또 모르는 개념이 나와서 난처했던 경험이 많았기 때문이며,
세번째로 기초를 잘 다진 개발자가 되고 싶다는 생각 때문이다.
파고들기 시리즈는 주로 주말에 공부할 예정이기 때문에 조금 여유를 가지고 찾아볼 수 있을 것 같다.
파고들기 첫번째 포스트는 자주 들었지만 무슨 뜻인지 몰랐던 '호이스팅'이라는 개념에 대해 공부하고 작성하기로 했다.
let a
a = "what";//가능
const a //SyntaxError : Missing initializer in const declaration
a = "what"
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가 적용된다.
호이스팅은 인터프리터*가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미하며, 스코프 안의 어디에서든 변수 선언문이 코드의 선두(최상위)로 끌어올려진 것처럼 동작한다.
사실 호이스팅의 정의를 찬찬히 읽어 보아도 감이 잘 안 와서 예시들을 찾아봤다. 가장 많이 볼 수 있는 예시가 아래와 같은 경우였다.
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의 경우에는 스코프에 대해서 배울 때도 차이를 중요하게 언급하고 넘어갔던 것 같은데 늘 주의해서 사용해야겠다는 생각이 든다!