[JavaScript] ECMAScript5 이상 키워드 var, let, const 사용법과 차이점

안녕하세요. 소다맛사탕 입니다.

오늘은 자바스크립트가 처음 만들어질 때 정해진 특별한 의미가 있는 단어인 '키워드'중

자바스크립트에서 변수를 선언할 때 자주 쓰는 키워드인 var, let, const에 대해서 알아보겠습니다.

 

※ ECMAScript
Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어.
자바스크립트를 표준화하기 위해 만들어졌다.

 

Javascript에는 변수를 선언하는 방식에 'var'만 존재했지만, 변수 재선언, 재할당을 하기 위해 ECMAScript6(ES6)부터 'let'과 'const'가 추가 되었습니다.

 

1. var

; function-scope 변수를 선언하고, 선택적으로 초기화할 수 있다.

var test1 = 0;
if(test1 == 0){
	var test1 = 10;
	console.log(test1);
}

console.log(test1);

---- 결과 ----
10
10

 

2. let

; block-scope의 범위를 가지는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수 있다.

let test1 = 0;

if(test1 == 0){
	let test1 = 10;
	console.log(test1);
}

console.log(test1);

---- 결과 ----
10
0

 

3. const

; block-scope의 범위의 상수를 선언하며, 상수의 값은 재할당할 수 없으며 다시 선언할 수 없다.

const test1 = 0;

if(test1 == 0){
	const test1 = 10;
	console.log(test1);
}

// 재선언 불가(에러뜸)
try{
	test1 = 100;
} catch(except){
	console.log(except);
}

console.log(test1);


---- 결과 ----
10
Object{ }
0

---

var, let, const 차이점

ECMAScript6 버전 이하의 자바스크립트에서

var 선언시 global-scope와 function-scope만 선언할 수 있었다 하면 

let, const 는 block-scope 영역도 제공하게 되었다.

 

다시말해서,

var 변수 재선언 가능

let, const 변수 재선언 불가능

 

let 변수 재할당 가능

const 변수 재선언, 재할당 모두 불가능

// 1. var
var test1 = 0;
var test1 = "test";
console.log(test1);
---- 결과 ----
// 변수 재선언 가능(마지막 선언 변수 출력)
test
/////////////////////////////////////////


//2. let
let test2 = 0;
let test2 = "test";
console.log(test2);
---- 결과 ----
// 변수 재선언 불가능(에러뜸)

test2 = 10;
console.log(test2)
---- 결과 ----
// 변수 재할당 가능
10
/////////////////////////////////////////

// 3.const
const test3 = 0;
const test3 = "test";
console.log(test3);
---- 결과 ----
// 변수 재선언 불가능(에러뜸)

test3 = 10;
console.log(test2)
---- 결과 ----
// 변수 재할당 불가능(에러뜸)

 

※ 결과적으로

화면에서 전역변수에 static final과 같이 재할당 재선언을 하지 않을 변수는 const를 쓰는게 가장 낫고,

재할당하는 변수는 let을 쓰는것을 더 추천할 수 있습니다.

 

참조 : https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/var