[Javascript] var, let, const 차이점과 특징 - 스코프 , 호이스팅

자바스크립트을 사용하다보면 var, let , const 을 엄청 많이 사용하게 된다. 그래서 이 3개의 특징이 무엇이고, 차이점이 어떻게 되는지 알아보기 위해 내용 정리 한 것이다.

---

• 재선언 가능 여부, 재할당 가능여부 등의 내용을 담은 비교표

특성	var	let	const
스코프(Scope)	함수 또는 전역 스코프	블록 스코프	블록 스코프
호이스팅(Hoisting)	예 (undefined로 초기화)	예 (초기화는 안 됨)	예 (초기화는 안 됨)
재선언 가능 여부	가능	불가능	불가능
재할당 가능 여부	가능	가능	불가능
초기화 필요 여부	아니요	아니요	예 (초기화 필수)

스코프

변수 범위 (Scope)

var는 함수 내에서 선언될 떄는 함수 범위, 함수 밖에서 선언될 떄는 전역 범위로 동작. 그러므로 함수 안의 if문과 같이 한 단계 더 안에서 var 변수를 선언한다고 생각해 봅시다. var 변수는 if문 밖이더라도 동일한 함수 안이라면 변수에 접근이 가능합니다

function a() {
  {
    var b = 1;
  }
  console.log(b); *// 가능. 1 출력*}

반면, let, const는 블록 범위입니다. 같은 함수 안이더라도 내부 블록에서 선언했다면 해당 블록 밖에서는 접근이 불가합니다

function a() {
  {
    let b = 1;
  }
  *// console.log(b); // ReferenceError: Can't find variable: b*}

---

호이스팅

var는 함수나 전역 범위의 제일 위로 호이스팅 됩니다. 다만, 변수의 선언부만 호이스팅 되고 초기값은 자동으로 undefined가 들어가게 됩니다. 그러므로 이렇게 사용할 때는 동작에 주의가 필요합니다. 예상치 못한 값이 들어가 있을 수 있기 때문입니다.

function a() {
  // var b = undefined; // 실제 코드 아님. 내부적으로는 호이스팅 되어 동작. undefined로 초기화.
  console.log(b); // 호이스팅 되었으므로 가능. undefined 출력.
  var b = 1;
  console.log(b); // 1
}

let, const도 호이스팅이 되기는 하지만, var와는 달리 호이스팅 때는 자동으로 초기화되지 않습니다. 그러므로 이 때 변수 사용을 시도하면 ReferenceError가 발생합니다.

function a() {
  // let b; // 실제 코드 아님. 내부적으로는 호이스팅 되어 이렇게 선언된 것처럼 동작. 초기화는 안 됨.
  console.log(b); // ReferenceError: Cannot access uninitialized variable.
  // 호이스팅 되었으므로 a라는 변수가 있는건 알지만 초기화 안되어 에러 발생.
  let b = 1;
}

---

재선언 및 재할당

var는 재선언, 재할당이 가능합니다. 특히 재선언이 가능한 점이 특이한데, 호이스팅 되어 함수 범위의 최상단에 선언이 이미 된 것처럼 동작하기 때문에 가능합니다.

function a() {
  // var b = undefined; // 실제 코드 아님. 함수 범위 최상단으로 호이스팅 되어 동작. undefined로 초기화.
  {
    var b = 1; // b를 1로 초기화. b = 1; 과 동일한 동작.
    var b = 2; // b에 2를 재선언. b = 2; 와 동일.
  }
  var b = b + 1; // b를 최초 선언한 부분은 내부 블록 안이라 자바 같은 언어에서는 오류가 나겠지만,
  // JS에서는 호이스팅되어 함수 최상단에 선언된 것처럼 동작하므로 문제 없음.
  console.log(b); // 3
}

let은 재할당은 가능하지만, 동일 범위 내에서 재선언은 불가합니다.

function a() {
  {
    // let b; // 실제 코드 아님. 블록 범위 최상단으로 호이스팅 되어 동작. 초기화 없음.

    let b = 1; // b를 1로 초기화. b = 1; 과 동일한 동작.
    // let b = 2;     // SyntaxError: Cannot declare a let variable twice: 'b'.
    // 동일 범위에서 재선언 불가.
    b = 2; // 재할당은 가능.
    console.log(b); // 2
  }
  let c = b + 1; // ReferenceError: Can't find variable: b
  // b를 초기화한 부분은 내부 블록이므로 여기서는 알 수 없는 변수.
}

const는 재선언, 재할당이 모두 불가능합니다.

function a() {
  {
    // const b; // 실제 코드 아님. 블록 범위 최상단으로 호이스팅 되어 동작. 초기화 없음.

    const b = 1; // b를 1로 초기화. b = 1; 과 동일한 동작.
    // const b = 2;     // SyntaxError: Cannot declare a let variable twice: 'b'.
    // 동일 범위에서 재선언 불가.
    // b = 2;             // TypeError: Attempted to assign to readonly property.
    // 재할당도 불가.
  }
  const c = b + 1; // ReferenceError: Can't find variable: b
  // b를 초기화한 부분은 내부 블록이므로 여기서는 알 수 없는 변수.
}

초기화

초기값

var, let은 선언 시 초기화를 안 한다면 기본적으로 undefined로 초기화됩니다.

> var a;
< undefined
> let b;
< undefined

const를 사용할 때는 무조건 선언 시 초기값을 할당해줘야 합니다.

> const a;
< SyntaxError: Unexpected token ';'. const declared variable 'a' must have an initial

Reference

1. Sarah Chima Atuonwo. "Var, Let, Const의 차이점은?" freecodecamp.org. https://www.freecodecamp.org/korean/news/var-let-constyi-caijeomeun/ (accessed Sep. 07, 2023). ↩
2. 인파. "📚 var / let / const 차이점 정리 (변수 호이스팅)." Inpa Dev 👨‍💻💻. https://inpa.tistory.com/entry/JS-📚-var-let-const-차이점-변수-호이스팅 (accessed Sep. 0