[JavaScript] var/let/const 변수 선언 방식

JavaScript의 헷갈리는 변수 선언방식 var, let, const의 차이점을 정리해 보겠습니다.

호이스팅(Hoisiting)이란?

호이스팅(Hoisiting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 위로 선두로 옮긴 것처럼 동작하는 특성이다.

- 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수 값들을 모아 유효범위 최상단에 선언한다.

- 실제로 코드가 끌어올려지는 것은 아니며, 자바스크립트이 Parser이 내부적으로 끌어오려 처리하는 것으로 메모리에는 변화가 없다.

- 유효범위 (함수블록) 안에서 유효함.

- 자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, function*, class)을 호이스팅한다. 이는 let 로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문이다.

noDefine();

function noDefine() {
  // 변수 선언 및 할당 이전에 호출 테스트
  console.log("not defined : " + name);
  var name = "ojava";
  // 변수 초기화 이후 값 확인
  console.log("defined : " + name);
}

// not defined : undefined
// defined : ojava

** 단, 변수 선언 명령어를 제외하고 선언 시 전역변수로 인식된다.(var 로 선언된 변수와는 달리 let으로 선언된 변수를 선언문 이전에 참조하면 Refference Error가 발생한다.)

noDefine();

function noDefine() {
  console.log("not defined : " + name);
  // var name = "ojava";
  name = "ojava"; // 변수 선언 명령어 없이 name 변수에 할당함
  console.log("defined : " + name);
}

// not defined : ojava
// defined : ojava

var, let, const 비교

var을 사용할 때 주의할 점!!: '변수의 재선언이 가능하다.'

var name = 'Jake'
console.log(name) // Jake

var name = 'javascript'
console.log(name) // javascript

즉, 다시 말해 변수를 한번 더 선언해도 에러가 나오지 않으므로 나중에 무한루프에 빠지거나 하는 원인이 될 수 있으니 주의해야한다.

 

ES6 이후, 이를 보완하기 위해 추가된 변수선언 방식이 let과 const 이다.

let name = 'Jake'
console.log(name) // Jake

let name = 'javascript'
console.log(name) 
    // Uncaught SyntaxError: Identifier 'name' has already been declared

 

let은 변수의 재할당이 가능하지만, const는 변수의 재선언, 재할당이 모두 불가능하다.

let name = 'Jake'
console.log(name) // Jake

let name = 'javascript'
console.log(name) 
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'react'
console.log(name) //react

그렇다면, 어떤 선언방식을 사용해야 할까?

그건 상황에 따라 다르니, 그 특징을 이해하고 알맞게 사용해야 한다.

기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정해 let을 사용하는 것이 좋다. 이때 변수의 스코프는 최대한 작게 만든다. 반대로 말하면 const를 사용하면 의도치 않은 재할당을 방지해주기 때문에 안전하다.

	var	let	const
scope	함수 레벨	블록 레벨	블록 레벨
재선언	O	X	X
재할당	O	O	X
특징	변수를 재선언해도 에러가 나오지 않으므로 주의해야한다.	재할당이 필요한 경우 사용하며, 변수의 스코프는 최대한 좁게 만든다.	재할당이 필요없는 상수와 객체에는 const를 쓰는게 안전하다