var, let, const 차이점

자바스크립트에서 변수를 선언 할 때 var, let 그리고 const 키워드를 사용하여 선언 할 수 있다. 각 변수에 대한 차이점을 알아보자.

var

var는 자바스크립트의 첫 번째 버전부터 사용됐다. 자바스크립트 var 키워드는 변수를 선언하는 데 사용되며, 해당 변수의 값을 초기화하는데도 사용된다.

var num = 10;

var 의 범위

자바스크립트에서 두 종류의 범위가 있다.

• 함수 범위(function-scope)
• 블록 범위(block-scope)

var는 가시성이 함수로 제한되기 때문에 함수 범위이다. 만약 함수 외부에서 사용하려고 한다면 오류가 발생 할 것이다.

function test() {
	var a = 10
	console.log(a)    // 10

	if(true) {
		var a = 20
		console.log(a)    // 20
	}

	console.log(a)    // 20
}

test()

위 코드에서 알 수 있듯, var 변수를 쟈선언하고 업데이트 할 수 있다. 즉, 동일한 범위 내에서 작업을 수행 할 수 있으며 오류가 발생하지 않는다.

var 호이스팅

호이스팅(호이스팅 이란?)은 코드 실행 전에 변수와 함수 선언이 해당 범위의 맨 위로 이동되는 자바스크립트 엔진의 메커니즘이다.

var로 선언 된 변수는 블록 맨 위에 호이스팅되기 때문에, 호출되기 전에도 해당 범위에서 접근 할 수 있음을 의미한다.

예제를 살펴보자.

console.log(a);
    var a = 10;

위 예제에서는 console.log (a) 뒤에 var를 선언한다.
하지만 인터프리터가 읽고 해석할 때에는 개념적으로 아래와 같이 된다.

var a;
console.log(a); //a is undefined
a = 10;

따라서 var 변수는 해당 범위의 맨 위에 올려지고 undefined로 초기화된다.

let

ES6에서 const와 함께 추가되었다. let은 var와 매우 유사하지만 몇 가지 차이점이 있다.

let 범위

let은 블록 범위이며, let이 있는 블록에서 선언 된 변수는 해당 블록 내에서만 사용할 수 있다. 예를 살펴보자.

if(true) {
let name = 'dean'
console.log(name)    // dean
}

console.log(name)    // name is not defined.

범위 밖의 변수 name 호출 시 에러가 발생하는 것을 확인할 수 있다.
(Uncaught ReferenceError: myName is not defined.)

let은 var와 마찬가지로 업데이트 될 수 있지만, 범위 내에서 재선언을 할 수 없다.

// 정상 동작
function test() {
  let num = 10
  num = 555

  console.log(num)
}

test()


// 비정상 동작
function test() {
  let num = 10
  let num = 555

  console.log(num)
  // (Uncaught SyntaxError: Identifier ‘num’ has already been declared)
}

test()


// 정상 동작
let num = 10
function test() {
  let num = 555

  console.log(num)	// 555
}

console.log(num)	// 10
test()

let 호이스팅

var와 마찬가지로 let 선언은 호이스팅되어 맨 위로 올라간다. undefined로 초기화되는 var와 달리 let 키워드는 초기화되지 않는다. 초기화 전 액세스 시, ReferenceError가 발생한다.

const

const는 let 및 var와 달리 한번 정의 된 변수는 변경할 수 없다.

const 범위

let과 마찬가지로 const도 블록 범위이며, 선언 된 변수는 해당 블록 내에서만 사용할 수 있다. 또한 업데이트하거나 재선언 할 수 없다. 만약 기존 const 변수를 재할당하려고하면 에러가 발생한다.
(Error Message : Uncaught TypeError: Assignment to constant variable.)

// 비정상 동작
function test() {
  const num = 10
  const num = 555

  console.log(num)
  // (Uncaught SyntaxError: Identifier ‘num’ has already been declared)
}

test()

const 호이스팅

let과 같이 const 선언은 상단으로 호이스팅 되지만, 초기화 되지 않는다.

결론