JavaScript - variables, hoisting

Variables(var, let, const )

var

중복선언 O , 재할당 O

var a = 1;
var a = 10
a = 2
console.log(a) // 2

전역 변수로 선언한 경우 window 객체의 속성이 됨

var a = 'hi';
console.log(window.a) // 'hi';

호이스팅될 때 초기화됨

console.log(x) // undefined
var x = 1
console.log(x) // 1

함수 스코프를 가짐
(함수 내부에서 어디든 var로 선언한 변수에 접근할 수 있음)

function example() {
  if (true) {
    var a = 1;
  }

  for (var i = 0; i < 5; i++) {
    console.log(i, "i") // 0 1 2 3 4
  }

  console.log(a); // 1
  console.log(i); // 5
}

example();

let

중복선언 X, 재할당 O

let b = 1
b = 2
console.log(b) // 2


let p = 111
let p = 222 // error

선언문 이전 접근 불가(참조할 값이 없기 때문에 참조 에러 발생) -> 변수의 중복 선언을 막을 수 있음

console.log(x) // 참조 에러
let x = 1

블록 스코프를 가짐 (선언된 블록({}) 안에서만 접근이 가능함 )

function example() {
  if (true) {
    let a = 1;
  }

  for (let i = 0; i < 5; i++) {
    console.log(i, "i") // 0 1 2 3 4
  }

  console.log(a); // 참조 에러
  console.log(i); // 참조 에러
}

example();

const

중복선언X, 재할당 X
let과 마찬가지로 선언문 이전 접근 불가
객체가 할당되는 경우 객체 안의 값을 바꿀 수 있음(새로운 값을 재할당하는 것이 아니므로)
블록 스코프를 가짐 (선언된 블록({}) 안에서만 접근이 가능함 )

Hoisting

호이스팅이란 간단하게 말하자면 선언부가 제일 최상단으로 끌어올려진 것 같은 현상을 말함

자바스크립트 엔진은 코드를 위에서 아래로 읽어나감. 그 과정에서 선언해둘 것이 있다면 먼저 선언해두는데, 선언하는 과정에서 실행한 실행 컨텍스트(아래 예시의 경우 전역 컨텍스트) 안에 새로운 식별자(아래 예시에서는 cat)를 environment record에 저장함. 아래 예시의 경우 cat은 var 키워드로 되어있기 때문에 초기화를 함

console.log(cat) // undefined

var cat = 'rey';

console.log(cat) // 'rey'

let이나 const로 선언한 경우 자바스크립트 엔진이 environment record에 저장을 하긴 하지만 값을 초기화하지 않음.
따라서 식별자 cat의 값을 참조할 수 없으므로 참조 에러가 발생함(자바스크립트 엔진이 cat의 값을 읽을 수 없기 때문)

즉, let이나 const로 선언했을 때 선언 이전에 식별자를 참조할 수 없는 구역인 TDZ(temporal Dead Zone)가 발생함

console.log(cat) // reference error

let cat = 'rey';

console.log(cat) // rey

정리

변수

var

중복선언 O , 재할당 O
전역 변수로 선언한 경우 window 객체의 속성이 됨
호이스팅될 때 초기화됨
함수 스코프를 가짐

let

중복선언 X, 재할당 O
선언문 이전 접근 불가(참조할 값이 없기 때문에 참조 에러 발생) -> 변수의 중복 선언을 막을 수 있음

const

중복선언X, 재할당 X
let과 마찬가지로 선언문 이전 접근 불가
객체가 할당되는 경우 객체 안의 값을 바꿀 수 있음(새로운 값을 재할당하는 것이 아니므로)
블록 스코프를 가짐 (선언된 블록({}) 안에서만 접근이 가능함 )

호이스팅

1) 변수 호이스팅

var 로 변수를 선언한 경우 선언과 초기화가 동시에 일어남
let, const의 경우 초기화하지 않음 -> 따라서 값이 할당되기 전까지는 변수에 아무런 값이 담겨있지 않기 때문에 값을 읽을 수 없음 -> 선언 라인 이전에는 변수를 참조할 수 없음(TDZ 발생)

선언
메모리 공간을 확보하고 메모리 주소에 식별자와 연결

초기화
식별자에 암묵적으로 undefined 값 바인딩

2) 함수 호이스팅

함수 선언문의 경우 함수선언문 전체가 호이스팅됨
함수 표현식의 경우 선언부만 호이스팅됨