[JavaScript] var, let, const 의 차이(호이스팅)

 

JavaScript에서는 변수를 선언할 때 var, let, const를 사용할 수 있습니다. 그러나 var는 여러 문제점을 가지고 있어 사용을 지양하고, 대신 let과 const를 사용하는 것이 권장됩니다. 그 이유를 아래와 같이 정리했습니다.

 

1. var와 let의 차이점

var와 let의 주요 차이점은 스코프(Scope), 중복 선언 가능 여부(Variable Redeclaration), 그리고 호이스팅(Hoisting)입니다.

 

(1) 스코프(Scope)

스코프란 코드가 변수에 접근할 수 있는 범위를 뜻합니다. JavaScript에서 스코프는 크게 세 가지로 나뉩니다:

• 함수 스코프: var는 함수 스코프를 가집니다.
• 블록 스코프: let과 const는 블록 스코프를 가집니다.
• 전역 스코프: 전역 범위에서 선언된 변수는 모든 코드에서 접근할 수 있습니다.

function test(){
  if(true){
    var x = 'check'
  }
  console.log(x) // 'check'
}

test()

var는 함수 스코프를 가지기 때문에 if 블록 밖에서도 변수 x에 접근할 수 있습니다.

 

function test(){
  if(true){
    let x = 'check'
  }
  console.log(x) // ERROR
}

test() 

let은 블록 스코프를 가지므로, 선언된 블록 내부에서만 접근이 가능합니다.

 

function test(){
  let x = 'check'
  if(true){
    let x = 'hi'
    console.log(x) // 'hi'
  }
  console.log(x) // 'check'
}

 

 

function test(){
  var x = 'check'
  if(true){
    var x = 'hi'
  }
  console.log(x) // 'hi'
}

var을 사용했을때 이때의 값은 'hi' 가 출력되는 것을 확인할 수 있습니다.

var는 같은 스코프 안에서 중복 선언을 허용하기 때문에 위에서 선언된 변수를 아래 사용한 변수가 덮어 씌워지게 됩니다. 그렇기 때문에 'hi'가 출력 되게 됩니다.

 

(2) 중복 선언

var는 같은 스코프 내에서 중복 선언을 허용하지만, let은 이를 허용하지 않습니다.

var x = '안녕'

// .......


var x = 'hi'

console.log(x)

중복 선언이 가능해 실수로 기존 변수를 덮어쓸 위험이 있습니다.

 

 

 

(3) 호이스팅

console.log(num) // undefined

var num = 10;

console.log(num)  // '10'

var로 선언된 변수는 호이스팅 시 초기화가 undefined로 설정됩니다.

변수 선언이 코드 맨 위로 끌어올려지지만, 초기값으로 undefined가 할당됩니다.

 

console.log(num) // referenceError

let num = 10;

console.log(num)

이전코드에  let을 사용하니 참조 오류가 발생합니다. let 도 var처럼 변수를 호이스팅하지만 변수를 초기화 시키지 않습니다.

근데 왜 선언문 이전에 접근하면은 에러가 나지? -> TDZ(일시적 사각지대)

 

let으로 선언되었을때 맨위로 끌어지기는 하지만 코드상에 있는 선언문에 닿기 까지는 일시적 사각지대에 들어가게 됩니다. 따라서 선언문 이전에 접근한 num은 일시적 사각지대에 있음. JavaScript는 일시적 사각지대에 있는 변수 접근을 허용하지 않기 때문에 오류를 막아줍니다.

 

 

 

2. const 의 특징

const a = {
  x : 1,
  y : 2
}

a = { a : 3 } // ERROR

a.x = 3; // 가능

const는 상수를 선언할 때 사용하며, 선언 이후 재할당이 불가능합니다.

새로운 객체를 할당하는 것이 아니라, 객체 내부 속성을 변경하는 것은 허용됩니다.
이를 방지하려면 Object.freeze()를 사용해 객체를 동결할 수 있습니다:

 

결론

var는 함수 스코프, 중복 선언 허용, 초기화된 호이스팅 등의 문제로 버그 발생 가능성이 높아 사용하지 않는 것이 좋습니다.

let은 블록 스코프와 TDZ로 인해 오류를 미리 감지할 수 있어 안전합니다.

const는 상수를 선언할 때 사용하며, 객체나 배열의 속성 변경 시 주의가 필요합니다(Object.freeze를 통해 객체 속성 불변유지 가능).