[JS] variables - var, let, const (scope, hoisting)

const ⭐️ (ES6)

중복선언 ✕  재할당 ✕
constant '상수'
never gonna updated
∴ default (always)

 

[JS] const인 array, object 요소 수정 가능한 이유

 

let (ES6)

중복선언 ✕  재할당 ⃝
will be updated
∴ 필요시 (sometimes) - 변수의 scope를 최대한 좁게 하여 

 

var (legacy)

중복선언 ⃝  재할당 

const, let 구분 없이 사용

자율성은 생기지만
→ 고정인 값 보호 불가
→ 고정인지 변경 예정인지 알 수 없음

∴ never 

 

---

Scope 란?  유효한 참조 범위

function-level scope (var)

함수 내에서 선언된 변수는 블록 내외부에 관계없이 함수 내에서만 유효하다

함수 외부에서 참조 불가

function func() {
	if (true) {
    	var a = 'a'
        console.log(a) // 'a'
    }
    console.log(a) // 'a'
}

func()
console.log(a) // ReferenceError: a is not defined

 

block-level scope (let, const)

함수, 조건문, 반복문 등의 모든 코드 블록 내부에서 선언된 변수는 그 안에서만 유효하다

코드 블록 외부에서 참조 불가

function func() {
	if (true) {
    	const a = 'a'
        console.log(a) // 'a'
    }
    console.log(a) // ReferenceError: a is not defined
}

func()
console.log(a) // ReferenceError: a is not defined

 

---

Hoisting

hoist: 들어/끌어올리다

호이스팅이란? 코드가 실행되기 전에 변수/함수 선언(이름)이 로컬(유효) 범위의 최상단으로 올려지는 경우

 

var

JS 인터프리터는 변수 생성의 선언 단계와 할당 단계를 분할한다

선언 부분은 코드가 실행되기 전에 현재 범위의 맨 위로 호이스팅 되고, 초기에 undefined 값이 할당된다

즉, 초기화 되기 전에 greeting 변수를 사용할 수 있다

console.log(greeting) // undefined

var greeting // 선언 단계
greeting = "hello" // 할당 단계

 

함수

func() // hoisting test

function func() {
	console.log("hoisting test")
}

 

let, const

선언 단계만 호이스팅 되기 때문에 변수 초기에 어떤 값도 할당되지 않는다  → Reference Error

TDZ(Temporal Dead Zone): 변수를 사용할 수 없는 일시적인 비활성 상태

console.log(greeting) // Uncaught ReferenceError: Cannot access 'greeting' before initialization
/*
 *
 * TDZ (Temporal Dead Zone)
 *
 */
const greeting = "hello"