Javascript ES6 문법 - 변수 선언 var, let, const 차이

ES6 이전의 Javascript에서는 var키워드가 변수 선언방법의 유일한 방법이였습니다. 하지만 ES6에서는 var, let, const라는 키워드를 통해 변수를 선언 할 수 있습니다.

 

ES6에서 var로 변수 선언하기

ES6에서 var로 변수를 선언하면 재 할당과 재 선언이 가능해집니다. var 변수의 유효 범위는 전역범위에서는 전역적으로 유효하며, 함수 안에서는 해당 함수에서만 유효합니다. 하지만 이러한 특성은 혼동을 주며 버그의 원인이 되기도 합니다. var변수의 선언은 코드가 실행되기 전에 처리되므로 어느 곳에서 선언을 하던 맨위에서 선언 하는 것과 같은 효과를 나타냅니다. 이러한 동작을 'Hoisting'이라 부릅니다.

var x = 1;

function faaa(){
	var x = 5;
    console.log(x);
}
faaa(); //print 5
console.log(x); //print 1

 

ES6에서  let으로 변수 선언하기

ES6에 추가된 let이라는 키워드로 변수를 선언 할 수 있습니다. 이전에 var 키워드와 let의 차이점은 블록범위로 변수를 선언 할 수 있다는 것입니다.  아래 코드는 그 예제입니다.

let x = 5;

if(x === 5){

	let x = 2;
    console.log(x); // print 2
	
}

console.log(x); // print 5

위 코드와 같이 맨 위에 let x = 5가 선언 되었으며 if블록 안에 다시 x가 선언되었습니다. 하지만 let키워드로 선언 되었기 때문에  if문 블록 안에 있는 x는 if문 블록 밖에서 유효하지 않습니다. 때문에 다시 마지막 console.log(x)에는 5가 출력됩니다.

또 한 let은 동일한 블록안에서 재 선언이 불가능합니다.

let x = 5;
let x = 6; // error!!

위 코드를 실행하면 아래와 같이 이미 선언되었다고 에러가 발생 하게 됩니다.

 

ES6에서 const 로 선언하기

ES6에서 추가된 const라는 키워드를 이용하여 상수값을 선언 할 수 있습니다. const 키워드는 C언어에도 존재하는 키워드인데요. const로 선언을 하게되면 블록 범위 내에서 재할당을 할 수 없으며 재 선언이 불가능합니다.  만약 재 할당을 하게 되면 error를 발생시킵니다. 그 예제는 아래와 같습니다.

var x = 10;

console.log(x); // 10

{

	const x = 2;
	console.log(x); //2 
    x = 5; //TypeError: Assignment to constant variable.
}

console.log(x); // 10

 

ES6 var, let, const 비교

	Scope	호이스팅	재 할당	재 선언
var	Function scope	Yes	Yes	Yes
let	Block scope	No	Yes	No
const	Block scope	No	No	No

 

이상 Javascript ES6에서 변수 선언 방법들을 알아 보았습니다.