Variable

var

변수의 중복 선언이 가능
var 키워드로 선언한 변수는 undefined로 초기화
선언과 초기화가 동시에 진행

 var name = 'js'
 console.log(name) // js

 var name = 'javascript'
 console.log(name) // javascript

let

변수 중복 선언이 불가능
값을 재할당이 가능
let 키워드로 선언된 변수는 선언단계와 초기화 단계가 분리되어 진행

let name = 'js'
console.log(name) // js

let name = 'javascript'
console.log(name) 
// Uncaught SyntaxError: Identifier 'name' has already been declared

const

변수 중복 선언이 불가능
값을 재할당 불가능
const 키워드로 선언된 변수는 선언단계와 초기화 단계가 분리되어 진행
const 키워드로 선언된 변수는 선언과 할당이 동시에 진행

const name = 'js'
console.log(name) // js

const name = 'javascript'
console.log(name) 
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'react'
console.log(name) 
//Uncaught TypeError: Assignment to constant variable.

TDZ(Temporal Dead Zone)

TDZ ( Temporal Dead Zone )는 해석하면 "일시적 사각지대" 이다.
javascript에서의 변수는 선언, 초기화, 할당이라는 3가지 단계의 걸쳐서 생성된다.

• 선언 단계(Declaration phase) : 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계를 의미. 이 변수 객체는 스코프가 참조하는 대상.
• 초기화 단계(Initialization phase) : 실행 컨텍스트에 존재 하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계. 이 단계에서 할당된 메모리에는 undefined로 초기화.
• 할당 단계(Assignment phase) : 사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단계.

TDZ의 영향을 받는 구문

const 변수

console.log(javascript) // throws `ReferenceError`
const javascript = 'javascript'

const js = 'javascript'
console.log(js) // javascript

let 변수

js; // throws `ReferenceError`
let js;
js = 'javascript';

let js;
js; // => undefined
js = 'javascript';
js; // => 'javascript'

class 구문

const javascript = new js('js') // throws `ReferenceError`
class js {
  constructor(name) {
    this.name = name;
  }
}

class js {
  constructor(name) {
    this.name = name;
  }
}
const javascript = new js('js')
console.log(javascript.name) // => js

constructor() 내부의 super()

class MuscleCar extends Car {
  constructor(color, power) {
    this.power = power;
    super(color); -> super()를 호출하기 전까지 this 바인딩은 TDZ
  }
}

// Does not work!
const myCar = new MuscleCar(‘blue’, ‘300HP’); // throws `ReferenceError`

기본 함수 매개변수(Default Function Parameter)

const a = 2;
function add(a = a) { -> 
  return a + a;
}

add(); // throws `ReferenceError`

// 기본 매개변수 a는 선언 전에 a = a 표현식의 오른쪽에서 사용 되어
a에서 참조 에러가 발생.

const init = 2;
function add(a = init) {
  return a + a;
}
add(); // => 4

TDZ의 영향을 받지 않는 구문

var, function, import

var, function 선언은 TDZ에 영향을 받지 않는다. 이것들은 현재 스코프에서 호이스팅 된다.

var 변수는 선언하기 전에 접근하면, undefined를 얻게 된다

js; // => undefined
var js;

js('World') // "Hello World"

function js (name) {
  return `Hello ${name}`
}
js('World') // "Hello World"

test();
import { test } from './app';

Reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Grammar_and_types