자바스크립트 변수와 상수: var, let, const 차이점과 사용법

자바스크립트에서 데이터(값)를 저장하기 위한 공간으로 변수와 상수를 사용하며, 변수는 var, let, const 세 가지 키워드를 사용하여 선언할 수 있습니다. 변수는 다른 프로그래밍 언어에서와 마찬가지로 자바스크립트에서도 가장 기본적이고 핵심적인 역할을 합니다.

그럼 자바스크립트의 변수(var, let)와 상수(const)에 대해서 알아보겠습니다.

▼ 목차

1. 변수 선언의 규칙
2. 변수 선언, 할당, 초기화 방법
3. 변수: var와 let 차이점
4. 상수: const

1. 변수 선언의 규칙

1. 변수 이름은 문자, 밑줄(_), 달러 기호($)로 시작해야 합니다. 숫자로 시작할 수 없습니다.

// 유효한 변수 이름
let name;
let _age;
let $salary;

// 잘못된 변수 이름
let 2years;
let #height;

2. 변수 이름에는 문자, 숫자, 밑줄, 달러 기호만 사용할 수 있습니다. 공백 및 특수 문자는 허용되지 않습니다.

// 유효한 변수 이름
let firstName;
let totalAmount;
let _quantity;

// 잘못된 변수 이름
let first name;
let $total-amount;

3. 대소문자를 구분합니다. name 및 Name는 다른 변수 이름입니다.

let name = "BlueShare";
    
console.log(Name);   // 에러 발생

4. 예약 키워드는 변수 이름으로 사용할 수 없습니다.

// 잘못된 변수 이름
let if;
let function;

5. 가독성을 높이기 위해서 여러 단어를 사용할 때에는 중간에 대문자를 섞어 사용합니다.

// 변수 선언 예시
let currentYear;
let CurrentYear;
let Current_Year;

2. 변수 선언, 할당, 초기화 방법

변수를 선언하면 초기화하지 않아도 되지만, 변수를 사용하기 전에 값을 할당해야 합니다. 그리고 const 상수는 초기화할 때 값을 할당해야 합니다. 초기화하지 않으면 SyntaxError가 발생합니다.

1. 변수 선언하기

// 변수 선언하기
let num1;
let num2;
let totNum;

// 변수를 한꺼번에 선언하기
let num1, num2, totNum;

2. 변수 선언과 값 할당하기

// 변수 선언과 값 할당을 따로 하기
let num1;
num1 = 100;

// 변수 선언과 동시에 값 할당하기
let num1 = 100;

3. const 상수는 초기화할 때 값을 할당해야 합니다.

// const 상수는 초기화할 때 값을 할당해야 합니다.
const pi;          // 에러 발생
const pi = 3.14;   // 올바른 방식

3. 변수: var와 let 차이점

“var”는 ES5에서 도입된 변수 선언 키워드이고 “let”은 ES6에서 도입된 변수 선언 키워드입니다. 결론적으로 “var” 키워드를 사용하지 말고 “let” 키워드만 사용하시면 됩니다.

1. “var” 키워드는 변수를 중복하여 사용할 수 있습니다.

// var 키워드느 변수를 중복이 가능합니다.
var num1 = 100;
var num1 = 200;
console.log(num1);   // 200이 출력

// let 키워드느 변수를 중복이 불가능합니다.
let num2 = 100;
let num2 = 200;
console.log(num2);   // SyntaxError 발생

2. “var” 키워드는 변수를 선언하고 할당하게 되면 변수를 스코프(scope) 맨 위로 올려 실행이 가능하게 됩니다. 참고로 이를 호이스팅(Hoisting)이라고 합니다. “let”과 “const”는 호이스팅이 되지 않으므로, 변수를 선언하기 이전에 변수를 참조하면 에러(ReferenceError)가 발생합니다.

// 에러가 발생하지 않습니다.
console.log(name);
var name = "BlueShare";

// 호이스팅에 의해 아래와 같은 형태로 코드가 변경됩니다.
var name;
console.log(name); // undefined
name = "BlueShare";

3. “var”와 “let은 스코프 범위가 다릅니다. “var”로 선언한 변수는 함수 스코프(Function Scope)를 가지 “let”으로 선언한 변수는 블록 스코프(Block Scope)를 가집니다.

var num1 = 10;
{
    var num1 = 20;
    console.log(num1);   // 20 출력
}
console.log(num1);       // 20 출력


let num2 = 10;
{
    let num2 = 20;
    console.log(num2);   // 20 출력
}
console.log(num2);       // 10 출력

4. 상수: const

const는 값이 변하지 않도록 보장하는 상수(Constant)를 선언하기 위한 키워드입니다. const로 선언한 변수는 선언 시 값을 할당하고 이후에는 값을 변경할 수 없습니다.

let num1 = 10;
num1 = 20;
console.log(num1);   // 20 출력

const num1 = 10;
num1 = 20;   // Uncaught TypeError 에러 발생
console.log(num1);

const num1;   // Uncaught SyntaxError 에러 발생
num1 = 20;

이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!

관련 이전 게시글

자바스크립트 HTML 추가 및 작성 위치 (async, defer)