호이스팅(Hoisting), TDZ(Temporal Dead Zone)

• 변수
  • let (es6)
  • const (es6)
  • var (es5) : 한 번 선언된 변수를 다시 선언할 수 있다.
• 변수 선언 및 출력 (var 로 선언)

console.log(name); // undefined
var name = 'Mike';

// var
// 선언하기 전에 사용할 수 있다.
// 값이 할당되지 않아 undefined으로 출력되지만 오류는 나지 않는다.

// 그 이유는 ?
// 호이스팅 (Hoisting)때문이다.

• 호이스팅 (Hoisting)
  • 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 동작한다.

var name;  // 최상위로 끌어올려지는 것처럼 동작(Hoisting)
console.log(name);

name = 'Mike'; // 할당


// Hoisting
// 선언은 호이스팅 되지만 할당은 호이스팅 되지 않기 때문에 undefined가 출력된다.
// let도 호이스팅 가능

// let, const

console.log(name); // ReferenceError
let name = 'Mike';

•  var와 다르게 오류를 내는 이유는 ?
  • TDZ의 영향을 받는다.
  • 할당하기 전에는 사용할 수 없다.
  • 이는 코드를 예측가능하게 하고, 전체적인 버그를 줄일 수 있다.

// TDZ 설명

console.log(name);
// ---------------------------- Temporal Dead Zone (TDZ)
const name = "Mike";
// ---------------------------- 함수 선언 및 할당
console.log(name);
// ---------------------------- 사용 가능

 

• 변수 생성 과정
  • var
    1. 선언 및 초기화 단계 (※ 초기화 : undefined를 할당 해주는 단계)
    2. 할당 단계
  • let
    
    1. 선언 단계
    2. 초기화 단계
    3. 할당 단계
  • const
    1. 선언 + 초기화 + 할당
• 스코프 (Scope)
  • var
    • 함수 스코프 (function-scoped)
  • let, const
    • 블록 스코프 (block-scoped) : 블록 내부에서만 유효
    • 함수, if문, for문, while문, try/catch문