[JavaScript] var, let, const의 차이를 이해하고 변수, 상수 선언하기

자바스크립트의 변수, 상수 선언하기

---

다른 프로그래밍 언어는 변수(variable)을 선언할 때, 원하는 변수 이름과 함께 자료형과 값을 명시하는 방식으로 선언합니다. 그런데, 자바스크립트(JavaScript)의 변수 선언은 ES6버전 들어서 약간 독특해진 구석이 있는데요, 이번에는 자바스크립트에서 이용할 수 있는 변수 또는 상수(constant) 선언에 대해 알아보도록 하겠습니다. 예를 들어, var, let, const 와 같은 표현 말입니다.

 

 

변수

---

변수는 연산에 사용되는 숫자 또는 문자열 등의 값을 담는 컨테이너라고 정의되어 있습니다. 이를 간단하게 설명하자면, 어떤 값이 있을 때 변수를 주소처럼 활용한다고 생각하면 이해하기 편할거예요. 자바스크립트 또한 변수를 활용할 수 있는데요, 자바스크립트에서 변수를 비롯한 어떤 값을 선언하는 방법은 크게 세 가지가 있습니다. 예를 들어, 6이라는 값을 선언하고 싶을 때는 아래와 같이 선언을 해 주면 됩니다.

 

• var x = 6
• let y = 6
• const z = 6

 

이 때, 각각의 선언 방식에 따라 x, y, z 는 다른 용도로 이용될 수 있습니다. 다 똑같겠거니 하고 섞어서 쓸 경우에는 에러가 발생하거나, 이상한 동작을 할 수 있으므로 주의해 주세요.

 

 

var를 이용한 변수 선언

---

자바스크립트 구버전의 경우, 변수를 선언하기 위해서는 var 명령어를 이용하는 것이 유일한 방법입니다. 이 변수의 경우, 우리가 흔히 접했던 변수와 비슷하게 동작하지요. 값을 변경하는 것이 자유롭고, 프로그램 전체에서 사용할 수 있는 전역 변수(global variable) 혹은 함수 안에서 제한 없이 사용할 수 있는 지역 변수(local variable)로 활용할 수 있습니다. var를 이용한 변수 선언의 예시는 아래 코드를 참조해 보시기 바랍니다.

 

 

var x = 6;
x ++;
var x = 'hello';

function f1(){
    var x = 9;
    console.log('f1 안의 x 값은: ', x);
};

f1(), console.log('global variable x의 값은: ', x);

f1 안의 x 값은:  9
global variable x의 값은:  hello

 

 

let을 이용한 변수 선언

---

let은 새롭게 추가된 변수 선언 방법입니다. 이 경우, var와는 달리 이 변수가 선언된 블록 내에서만 이용할 수 있다는 차이점이 있습니다. 그리고, 똑같은 이름으로 변수를 재선언할 수 없다는 제한이 존재하지요. let을 이용한 변수 선언의 예시는 아래 코드를 참조해 보시기 바랍니다.

 

 

let y = 6;
y ++;

{
    let y = 12;
    console.log('중괄호 안의 y 값은: ', y);
};

function f2(){
    let y = 9;
    console.log('f2 안의 y 값은: ', y);
};

f2(), console.log('global variable y의 값은: ', y);

중괄호 안의 y 값은:  12
f2 안의 y 값은:  9
global variable y의 값은:  7

 

 

위 코드를 봤을 때, 중괄호 안에 정의된 y와 밖에 선언된 y의 값이 서로 독립적으로 정의된 것을 확인할 수 있습니다. 그리고, 아래 코드를 보시면 앞서 6이라는 값으로 정의된 y에 'hello'라는 새로운 값을 덮어쓸 수 없다는 사실을 확인할 수 있습니다.

 

 

let y = 'hello';

SyntaxError: Identifier 'y' has already been declared

 

 

const를 이용한 상수 선언

---

자바스크립트에는 변수와 달리 값을 변경할 수 없는 상수라는 개념이 있습니다. var 또는 let으로 선언하는 변수와 달리, 상수는 const라는 명령어를 이용해 선언하지요. 이 때, 해당 상수는 값을 변경하거나 새로운 값으로 덮어쓰는 등의 변형이 불가능합니다. const를 사용한 상수 선언의 예시는 아래 코드를 참조해 보시기 바랍니다.

 

 

const z = 6;

function f3(){
    const z = 99;
    console.log(z);
};

f3(), console.log('상수 z의 값은: ', z);

99
상수 z의 값은:  6

 

z ++;

TypeError: Assignment to constant variable.

 

z = 'hello';

TypeError: Assignment to constant variable.

 

 

var, let, const의 차이

---

자바스크립트에서 일반적으로 변수를 사용할 때는 let을 이용하여 선언하면 됩니다. let은 해당 블럭 안에서만 유효한 변수를 만들기 때문에, 예상치 못한 오류를 방지할 수 있지요. 만약 프로그램 전체에서 활용할 변수를 선언해야 하거나, 같은 변수를 재선언해야 할 필요가 있다면 var를 활용하는 것이 좋습니다. 그리고, 값을 바꾸지 않을 상수를 선언해야 한다면 const를 이용해 상수를 선언해 주세요.