JavaScript 변수 선언 방식(var, let, const)

JavaScript에서의 변수 선언

java에서는 변수를 선언함에 있어, 해당 변수에 대하여 형태를 지정해줘야했다. 예를 들자면 다음과 같이 말이다.

• 문자열 / String test = "test";
• 정수형 / int test = 0;
• 실수형 / double test = 0.2;
• boolean형 / boolean test = true;

 

그러나 기존의 JavaScript에서는 [ var ] -라는 형식으로, 혹은 생략함으로써 변수를 선언할 수 있었다. 다음과 같이 말이다.

• var test = "test";
• var test = 0;
• var test = 0.2;
• var test = true;

 

---

 

JavaScript의 ES 버전이란?

JavaScript에서의 변수 선언 방식을 확인하기 전, JavaScript의 ES 버전에 대하여 먼저 알아보도록 하자. 버전에 따라 사용할 수 있는 변수의 type이 다르기 때문이다.

 

Java의 1.7 / 1.8와 같은 버전이 있듯이, JavaScript에도 ES5 / ES6와 같은 버전이 존재한다. ES가 무엇인가, 하는 의문을 가질 수 있으니 간단하게 설명하도록 하겠다. 웹페이지에 동적 요소 구현을 목적으로 만들어진 언어 JavaScript는 초창기부터 크로스 브라우징 이슈가 존재하였다. 이를 방지하고자 표준 규격을 정하였고, 비영리 표준화 기구인 인터내셔널(ECMA International)에서 JavaScript 표준화를 진행하였다. 이 때 부터 표준화된 JavaScript에 대해 ECMA JavaScript라는 명칭이 사용되기 시작하였다. ECMA JavaScript라고 하면 서두가 길어지기에, 가볍게 ES라고 줄인 후 버전만 붙여 사용하고 있다.

 

즉, ES5라고 함은 2009년도에 정의된 표준 ECMA-262 ECMAScript 언어 규격이라는 뜻이고, ES6이라고 함은 2015년도에 정의된 표준 ECMA-262 ECMAScript 언어 규격이라는 뜻이다.

 

---

 

JavaScript의 ES 버전 별 변수 선언

ES5까지는 [ var ] 선언문을 사용하여 변수를 선언하였다. 그러나 ES6부터 [ let ] [ const ] 선언문을 사용할 수 있게 되었는데... 세가지 방식의 선언문에 대한 차이점은, 아래의 표를 참고하도록 하자

선언문의 종류	변수 재선언 가능여부	변수 재할당 가능여부
var	가능	가능
let	불가능	가능
const	불가능	불가능

표를 봐서 이해가 어렵다면, 가볍게 소스코드를 통하여 예시를 들어보도록 하겠다.

 

---

 

각 선언문들에 대한 예시

 

var test = "test";	// test 변수를 선언
var test = "banana";	// test 변수를 재선언 (가능)
test = "apple";		// test 변수의 재할당 (가능)

[ var ] 선언문의 경우, 변수를 선언 → 재선언 → 재할당 후 console.log() 함수를 이용하여 test 변수의 값을 확인한다면, 가장 마지막에 재할당 시킨 'apple' 이라는 값을 확인할 수 있다.

 

let test = "test";	// test 변수 선언
test = "apple";		// test 변수의 재할당

[ let ] 선언문의 경우, 변수를 선언 → 재할당 후 console.log() 함수를 이용하여 test 변수의 값을 확인한다면, 가장 마지막에 재할당 시킨 'apple' 이라는 값을 확인할 수 있다. 재선언은 불가능 하기에 예시에 추가하지 않았다. 궁금한 독자들은 시도해보기를 바란다. 웹페이지 콘솔 화면에서 '이미 정의되어 있으니까 너가 선언한 변수 못 쓴다' -라는 에러를 확인 할 수 있다.

 

const test = "test";	// test 변수 선언

[ const ] 선언문의 경우, 변수를 선언 후 console.log() 함수를 이용하여 test 변수의 값을 확인한다면, 처음 할당 시킨 'test' 이라는 값을 확인할 수 있다. 재선언 및 재할당은 불가능 하기에 예시에 추가하지 않았다. 재선언 및 재할당 시도 시, let 선언문과 비슷한 에러를 웹페이지 콘솔 화면에서 확인할 수 있을 것이다.

 

 

 

---

 

 

 

[ 출처 ]

ECMA JavaScript 정의 : https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8