Hoisting

Javascript에는 Hoisting이라는 개념이 있다.

개발할 때는 알고 개발을 하고 있지만 막상 설명하려면 제대로 설명을 못하겠다.

실행시 변수, 함수 선언부가 해당 scope 최상단에 위치하는 개념이다.

console.log(asdf); // undefined, 오류가 나질 않는다. 즉 프로그램이 뻗질 않는다.
console.log(qwer); // undefined
console.log(zxcv); // function zxcv() { console.log(456); }
var asdf = 'asdf';
var qwer = function() {
  console.log(111);
};
function zxcv() {
  console.log(456);
}

ES6에서는 어떻게 되는지 생각을 안해봤는데 TDZ(임시적 사각 지대)가 생길 수 있다고 한다.

점점 복잡해 진다...

const asdf = 'asdf';
const qwer = function() {
  console.log(asdf); // Uncaught ReferenceError: asdf is not defined
  let asdf = 'qwer';
}
qwer();

Javascript는 이와 같이 오류가 날것 같은데 안나거나 안날것 같은데 나는 상황들이 종종 발생하게 된다.

가장 좋은 방법은 다른 언어와 같이

변수 선언부는 무조건 최상단에 작성하여

Hoisting이 일어나도 동일하게 동작하게 구현을 하는 것이다.


* 출처
https://perfectacle.github.io/2017/04/26/js-002-hoisting/