[JS] 변수와 상수(var, let, const) 총 정리(+그림&코드)

변수와 상수

변수나 상수는 "값을 저장하는 박스"입니다.
숫자 뿐만이 아니라 어떠한 값이던 저장이 가능합니다.

참고: 변수와 상수의 더 자세한 설명은 아래의 글을 참고해 주세요.

 

---

 

변수 선언

JavaScript에서는 변수를 선언하면 JavaScript 메모리에 값을 저장할 수 있습니다.
그리고 변수의 이름을 통해서 해당 메모리에 접근할 수 있습니다.

// age라는 변수를 선언한다.
let age;

 

---

 

변수 할당

변수를 선언하고, 선언한 변수에 값을 저장하는 것을 "변수를 할당한다"고 합니다.

“변수를 할당한다”라는 의미는 크게 두가지로 나눌수 있습니다.

1. 변수를 초기화한다.
   가장 처음 변수를 할당하는 것을 뜻합니다.
2. 변수를 재할당한다.
   이미 할당한 변수를 다시 할당하는것을 뜻합니다.

let age;

// age라는 변수에 값을 할당한다.
age = 30;

// phoneNumber라는 변수에 값을 선언과 동시에 할당한다.
// 1. phoneNumber라는 변수를 초기화한다.
let phoneNumber = '01012341234';

// 2. phoneNumber라는 변수를 재할당한다.
phoneNumber = '01099991234';

 

---

 

변수

어떠한 값이던 저장이 가능하며, 저장 후 값이 변할수 있는 것을 뜻합니다.
 
즉, 값을 저장 후 새로운 값으로 재할당이 가능합니다.
 

---

 

상수

변하지 않고, 항상 일정한 값을 갖는 수를 말합니다.
처음에는 어떠한 값이던 저장이 가능하지만, 저장 후 값이 변할수 없습니다.
 
즉, 변수의 초기화만 가능합니다.
 

---

 

JavaScript var, let, const 개발 순서

초기의 JavaScript는 var 예약어만 존재하였습니다.
하지만 var 예약어로 할당된 변수는 예기치 못한 문제가 발생하였습니다.
 
그렇기 때문에 2015년에 새로운 변수 할당 예약어인 let과 const를 도입하였습니다.

참고: 예약어란 JavaScript에서 특수한 의미로 사용하기로 약속한 단어들을 말합니다.
예를들어 var, const, let, if 등과 같은 단어들이 있습니다.

 

---

 

var

초기의 JavaScript에서 변수를 선언하는 예약어입니다.
 
하지만 var 예약어로 할당된 변수는 예기치 못한 문제를 발생시킵니다.
 
따라서 var 예약어로 변수를 할당하는것을 지양하며,
let과 const로 변수를 할당하시는것을 권장드립니다.

// var 예약어로 변수를 할당하는것을 지양합니다.

// age 라는 변수를 선언하고 20이라는 값을 할당합니다.
var age = 20;

참고: 레거시 코드의 경우 var 예약어로 할당된 변수가 존재할 수 있습니다.
따라서 var 예약어로 할당된 변수가 발생시키는 예기치 못한 문제에 대해서는 추후 포스팅 예정입니다.

 

---

 

let

JavaScript ES6 이후 변수를 선언하는 예약어입니다.
 
let으로 선언된 변수는 재할당이 가능합니다.

// 1. age 라는 변수를 선언하고 20이라는 값을 할당합니다.
let age = 20;

// 2. age 라는 변수에 30이라는 값을 재할당합니다.
age = 30;

// 3. let 예약어로 선언된 변수인 age는 변할수 있습니다.

 

---

 

const

JavaScript ES6 이후 변수를 선언하는 예약어입니다.
const로 선언된 변수는 초기화만 가능합니다.
 
즉, 재할당이 불가능합니다.

// birth 라는 변수를 선언하고 '1990.01.01'이라는 값을 할당합니다.
// 이는 "birth 변수를 초기화한다"라고 표현할수 있습니다.
const birth = '1990.01.01';

// birth = '2000.01.01'; // const로 선언된 birth 변수를 재할당하므로 에러 발생

 

---

 

변수 명명 규칙(네이밍 규칙)

변수를 선언할때는 아래에 규칙을 지켜야합니다.

1. $, _ 제외한 기호는 사용할 수 없다.
2. 숫자로 시작할 수 없다.
3. 예약어를 사용할 수 없다.

// 변수 명명규칙(네이밍 규칙)
// 1. $, _ 제외한 기호는 사용할 수 없다.
let $_name;

// 2. 숫자로 시작할 수 없다.
let name1;
let $2name;

// 3. 예약어를 사용할 수 없다.
// let const;

 

---

 

변수 명명 가이드

1. 의미 없는 변수명을 선언하지 않습니다.
   변수명은 해당 변수가 어떠한 역할을 하는지 명확하게 작성해야합니다.
   
2. JavaScript에서 변수는 CamelCase로 작성합니다.
   변수명의 띄어쓰기를 하지 않고 대소문자로 띄어쓰기를 대신해서 구분합니다.

// 1. 의미없는 변수명을 선언하지 않는다.
// let a = 1;

// 2. 변수명을 띄어쓰기로 작성하지 않는다.
// let sales count = 1;

// CamelCase 변수명 예시
let salesCount = 1;
let refundCount = 1;
let totalSalesCount = salesCount - refundCount;