[Javascript] 변수(Variables) vs 상수(Constants)

지난 포스팅에서는 Javascript가 무엇인지에 대해서 간략하게 알아보았습니다.

2021.04.03 - [쿤즈 Dev/HTML & CSS & Javascript] - [Javascript] Javascript 소개 및 여러가지 실행 방법

 

이제 실제 Javascript 프로그래밍을 하기위해 가장 먼저 알아보는 변수(Variables)와 상수(Constants)입니다.

 

이번 포스팅에서는 Javascript에서 사용하는 변수와 상수의 개념에 대해서 알아보고 직접 구현해 보도록 하겠습니다.

---

Javascript 변수(Variables)

변수라 함은 변하는 값을 의미합니다. 어떤 구역(블록)에서 변수에 담기는 값이 변하고 달라질 수 있는 값을 의미합니다. 다음을 보도록 하겠습니다.

let number = 3;

여기서 number는 변수를 의미합니다. 그리고 이것이 변수라고 정의하는 키워드가 let입니다.

---

Javascript 변수를 정의하는 키워드

앞선 예제에서 let이라는 키워드를 변수 앞에 설정하여 그 값이 변수임을 알려줬습니다. 이렇게 변수라고 정의할 수 있는 키워드는 2개가 있습니다. var과 let입니다.

let num1;
var num2;

이 둘은 똑같습니다. 다만 ES6(ES2015) 버전부터는 let을 사용하는 것을 권장합니다.

 

* ES는 ECMAScript라는 뜻으로 Ecma International에서 ECMA-262 기술 규격에 따라 정의한 Javascript 표준을 의미합니다. 언어는 계속적으로 발전하고 있으며 이를 해석하는 엔진도 변경됩니다. 이렇게 두 개가 남아있는 이유는 과거 사용하던 프로그래밍을 변화 없이 사용할 수 있도록 유지하기 위함입니다.

 

권장한다고 해서 let만을 사용한다면 최신 브라우저라면 괜찮지만 구형 브라우저에는 let이 인식이 안될 수가 있습니다. 아래는 let을 사용할 수 있는 브라우저 버전을 보여주는 사이트입니다.

Can I use... Support tables for HTML5, CSS3, etc

---

Javascript 변수 초기화(Initialize) 및 수정(Change)

변수를 초기화 하는 방법은 선언하고 값을 넣어주면 됩니다.

let num1;
num1 = 10;

let num2 = 20;

let num3 = 30, num4 = 40, num5 = 50;

모두 사용할 수 있는 방법입니다. 변수만을 선언하고 이후에 값을 넣는 방법, 변수를 선언하면서 동시에 값을 선언하는 방법 모두 사용이 가능합니다.

 

변수는 변할 수 있는 값이라고 말씀드렸죠? 위에서 선언하여 초기화한 변수값을 변경할 수 있습니다.

let num1 = 10;
console.log(num1); // 10

num1 = 20;
console.log(num1); // 20

첫 num1을 출력하면 10이 출력되지만 값을 변경하고 출력하면 20이 출력됩니다.

---

Javascript 변수 이름의 규칙

모든 프로그램이 그렇듯 변수 이름을 만들때는 규칙이 있습니다. Javascript는 다음의 규칙을 따릅니다.

1. 문자, 특수문자(_, $)를 사용할 수 있습니다.

let name = 'Ironman';
let _name = 'Ironman';
let $name = 'Ironman';

2. 변수명이 숫자로 시작할 수 없습니다.

let 1name; // 오류

3. Javascript는 대문자, 소문자를 구분합니다.

let name = 'Ironman';
let nAme = 'Hulk';

console.log(name); // Ironman
console.log(nAme); // Hulk

4. 특정 키워드는 변수로 사용할 수 없습니다.

let new = 10; // SyntaxError: Unexpected token 'new'
let var = 10; // SyntaxError: Unexpected token 'var'
let const = 5; // SyntaxError: Unexpected token 'const'

---

Javascript 상수(Constants)

기존에는 상수를 나타내는 키워드는 없었습니다. ES6(ES2015) 버전부터 상수의 키워드인 const가 등장했습니다. 상수를 선언하는 방법은 아래와 같습니다.

const num = 10;

이렇게 초기화된 상수는 더 이상 변경이 불가능한 값입니다.

const num = 10;
num = 20; // 에러
console.log(num); // 10

x를 10으로 초기화하고 20으로 변경할 때 오류가 발생합니다. 상수로 한번 초기화된 값은 변경할 수 없습니다.

 

또 아래와 같이 상수를 선언만 할 경우도 오류가 발생합니다.

const num;

---

지금까지 Javascript의 변수와 상수에 대해서 알아보았습니다. 간단히 var, let, const 세 개의 키워드만 알아본 것이지만 이 안에 지켜야 할 것들이 더 많네요. 그리고 ES6 버전부터 새롭게 등장한 키워드들과 기존의 키워드가 함께 쓰이고 있기 때문에 모두 알아두어야 할 부분도 있습니다. 도움이 되셨으면 합니다. 이상입니다.