[JAVASCRIPT] VAR , CONST , LET 의 차이점 ?

[JAVASCRIPT] VAR , CONST , LET 의 차이점 ?

 

 

1. var ( Function - Level Scope ) 

함수레벨 스코프는 함수내에서 선언된 변수는 Function 내부에서만 유효하며, 외부에서는 참조가 불가능하다. 함수 외부에서 선언한 변수의 경우에는 전역변수로 선언된다.

function funcA(){
	var a = 10;
	console.log("1 : " + a);
}
funcA();
console.log("2 : " + a);

// console 
1 : 10
ReferenceError: a is not defined

함수 레벨 스코프 예시

 

 var 선언은 ES5 까지 변수를 선언할 수 있는 유일한 방법이였습니다. 다른 프로그래밍 언어에서 INT, STRING, CHAR 등의 다양한 변수 타입 선언이 있는 반면, 자바스크립트에서는 var 라는 선언하나로 모든 것을 해결할 수 있었지만, var 선언 남발로 인한 여러 문제를 만날 수 있게 됩니다.

아래는 함수 레벨 스코프의 특징입니다.

1 ) 변수 중복 선언 허용

var a = 10;
console.log("1 : " + a);
function funcA(){
	var a = 11;
	console.log("2 : " + a);
}
funcA();
var a= 12;
console.log("3 : " + a);

// console
1 : 10
2 : 11
3 : 12

> 변수 중복 선언이 가능함에 따라서, 상황에 따라 편리함에 생길 수 있지만, 변수 중복 선언은 개발자에게 혼란을 야기시킬 수 있습니다.

 

2) var 선언 키워드 생략 허용

a = 10;
console.log("1 : " + a);
function funcA(){
	console.log("2 : " + a);
}
funcA();
console.log("3 : " + a);

// console
1 : 10
2 : 10
3 : 10

> var 선언을 하지 않을 경우, 암묵적으로 해당 변수는 전역변수로 선언이 됩니다. 

 

3) 변수 Hoisting

var a = 10;
console.log("1 : " + a);
function funcA(){
	console.log("2 : " + a);
	var a = 20;
	console.log("3 : " + a);
	function funcB(){
		console.log("4 : " + a);
		var a =30;
		console.log("5 : " + a);
	}
	funcB();
}
funcA();

// console
1 : 10
2 : undefined
3 : 20
4 : undefined
5 : 30

 

> Hoisting 은 쉽게 말해서, 변수 가져오기라고 보시면 될 것 같습니다.  호이스팅의 경우에는, 스코프의 특징으로써, 이후에 나올 블록 레벨 스코프에서도 적용이되는 특징입니다. 스코프에 대한 포스팅이 이후에 하도록하겠습니다.

전역변수로 a를 10으로 선언했지만, funcA 에서 a = 20; 이라고 선언하게 됩니다. 따라서, 함수 내부에서 변수 a 의 값은 초기화 된상태이며,  선언 전의 a 의 값은 'undefined' 이 되고, 선언 이후의 a 의 값은 20으로 바뀌게 됩니다. funcB에서도 동일한 상황입니다.

 

 

2. let , const ( Block-Lever scope ) 

자바스크립트를 제외한 대부분의 프로그래밍언어에서 사용하는 블록 레벨 스코프 방식입니다. 위와 같은 문제들을 해소하기 위하여 자바스크립트는 블록 레벨 스코프를 제공할 수 있도록 하기위해 let, const 가 ES6 부터 등장하게 됩니다.

블록레벨 스코프는 모든 코드 블록 ( Function, while , for , if 등)에서 선언된 변수는 해당 코드 블록 내에서만 유효, 참조 가능하며, 외부에서는 참조할 수 없는 지역변수 입니다. 위의 함수 레벨 스코프와 다른 블록 스코프의 특징을 한번 살펴봅시다.

1 ) 동일 블록 코드 내에서의 변수 중복 선언 불허

// 1 ) let

let a = 10;
console.log("1 : " + a);
let a = 31;
console.log("2 : " + a);

// console
SyntaxError: Identifier 'a' has already been declared



// 2 ) const 
const b = 11;
console.log("1 : " + b);

const b = 31;
console.log("2 : " + b);

// console
SyntaxError: Identifier 'b' has already been declared



// 3 ) Function 
let a = 10;
console.log("1 : " + a);
const b = 11;
console.log("1 : " + b);
function funcA(){
	let a = 31;
	console.log("2 : " + a);
	const b = 31;
	console.log("2 : " + b);
}
funcA();

// console
1 : 10
1 : 11
2 : 31
2 : 31

 

예시 1) , 2) 의 경우, 같은 블록 코드안에서의 중복 선언이 불가능 함을 알 수 있습니다. var 의 경우 중복을 허용하였지만, let, const 의 경우에는 중복 선언시 문법 에러를 발생시킵니다. 예시 3) 의 경우에는 다른 블록 코드의 경우에는 선언이 가능함을 알 수 있습니다. 

 

 

2) 변수 Hoisting

let a = 10;
console.log("1 : " + a);
const b = 11;
console.log("1 : " + b);
function funcA(){
	console.log("2 : " + a);
	console.log("2 : " + b);
	let a = 31;
	console.log("2 : " + a);
	const b = 31;
	console.log("2 : " + b);
}
funcA();

// console
ReferenceError: a is not defined

동일하게 블록 코드 역시도 호이스팅에 의해서 함수 내 선언을 따르게 됩니다. 함수 레벨 스코프와 다르게 a 의 값이undefined 가 되는 것이아니라, a 변수 자체를 찾지 못해서, 참조 에러를 발생시키게 됩니다.

 

 

3) let 과 const 의 차이점

let a = 10;
console.log("1 : " + a);
const b = 11;
console.log("1 : " + b);
a = 31;
console.log("2 : " + a);
b = 31;
console.log("2 : " + b);

//console
1 : 10
1 : 11
2 : 31
TypeError: Assignment to constant variable.

let 과 const 의 차이점은 바로 변수 값의 변경 가능 유무입니다. let 의 경우 선언된 변수의 값을 재할당할 수 있지만, const 의 경우 같은 블록 코드내의 변수 값을 재할당 할 수 없습니다. 

 

또한, const 의 경우 변수 선언과 동시에 값을 할당해주어야 합니다. let 의 경우에는 재할당이 가능하기 때문에 문법 에러가 발생하지 않습니다.

// 1) let
let a;
a= 10;
console.log(a);

// console
10

// 2) const
const a;
a= 10;
console.log(a);

//console
SyntaxError: Missing initializer in const declaration