JavaScript 호이스팅

정의

호이스팅 (hoisting)은
"선언이 실제 코드 위치와 상관없이, 해당 스코프의 맨 위에서 처리되는 것 처럼 보이는 현상"
을 지칭한다.

변수 호이스팅

• var로 선언된 변수는 스코프 최상단으로 "선언"이 끌어올려진다.

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

• let과 const는 선언 자체는 호이스팅이 되지만, Temporal Dead Zone으로 인해 참조 에러를 발생한다

console.log(a); // ReferenceError: a is not defined
let a = 10;
console.log(a);

결론 : var보다는 let과 const가 안전하다.

함수 호이스팅

• 함수 선언식(function foo() {})은 전체 함수 정의가 통째로 스코프 최상단으로 호이스팅 된다. 즉 함수 선언적 호출이 가능하다.

foo(); // 'Hello'
function foo() {
  console.log("Hello");
}

• 함수 표현식(const foo = function() {})은 "변수만" 호이스팅되고, 실제 함수 값은 나중에 할당 되므로 할당 이전에 호출하면 에러가 나타난다.

foo(); // ReferenceError: foo is not defined
const foo = function() {
  console.log("Hello");
}

const foo = function() {
  console.log("Hello");
}
foo(); // 'Hello'

호이스팅에 주의해야하는 이유

• 가독성 저하 : 변수와 함수의 선언 위치보다 먼저 사용되면 코드가 읽기 어려워 진다
• 의도치 못한 동작 : undefined같은 원하지 않는 결과가 나올 수 있다

호이스팅 대비법

• 항상 스코프의 상단에서 변수를 선언하고 초기화 함
• var 대신 let/const 사용
• 함수 선언 위치를 일정 규칙에 맞게 정리