[ JavaScript ] var vs let vs const (feat. 호이스팅, TDZ)

var

• 변수 선언 키워드
• 함수 레벨 스코프를 가지고 있다.
• 중복 선언이 가능하다.

var name = 'hello'
var name = 'hi'
console.log(name) // hi

• 호이스팅 당한다.
• 생략이 가능하다 => 함수가 선언한 환경의 this에 영향을 받는다.
  일반적인 웹 환경에서는 window일 것이다.

let

• 변수 선언 키워드
• 블록 레벨 스코프를 가지고 있다. 
• 중복 선언이 불가능하다.
• 호이스팅 당한다.

function sayHello() {
  return name
}
let name = 'hi'
console.log(sayHello()) // hi

• 생략이 불가능하다. (생략하면 var 처럼 작동)

const

• 상수 선언 키워드
  => const자체가 값을 불변으로 만드는 것이 아니다.
  => 객체의 속성은 바뀔 수 있다 => 객체 자체를 동결시키기 위해서는 Object.freeze를 사용한다.

const hello = 'hello' hello = 'hi' //TypeError: Assignment to constant variable

const hello = ['hi'] hello.push('hello')

• 초기화와 동시에 할당까지 이루어진다.

const hi //SyntaxError: Missing initializer in const declaration
hi = 'hi'

• 블록 레벨 스코프를 가지고 있다. 
• 중복 선언이 불가능하다.
• 호이스팅 당한다.
• 생략이 불가능하다.

 

var	let	const
변수 선언		상수 선언
중복 선언 가능	중복 선언 불가능
선언과 동시에  초기화,할당(undefined)가 이루어진다	선언과 동시에 TDZ에 들어가서 초기화가 필요한 별도의 상태로 관리된다	초기화와 동시에 할당까지 이루어진다
함수 레벨 스코프	블록 레벨 스코프
호이스팅 당한다
생략 가능 (함수가 선언한 환경의 this에 영향받는다)	생략 불가능

---

 

참조

https://yceffort.kr/2020/05/var-let-const-hoisting