JavaScript 변수 / 상수

대다수의 자바스크립트 애플리케이션은 사용자나 서버로부터 입력받은 정보를 정보를 저장하는 용도로 사용된다.

ex)
온라인 쇼핑몰 – 판매 중인 상품이나 장바구니 등의 정보
채팅 애플리케이션 – 사용자 정보, 메시지 등의 정보

1. 변수

변수(variable)는 변하는 데이터(값) 또는 상수 를 저장할 수 있는 메모리 공간이다.

(1) 자바스크립트에선 let 키워드를 사용해 변수를 생성한다.

let message; //message’라는 이름을 가진 변수를 생성(선언)한다.
message = 'Hello!'; // 문자열을 저장한다.

alert(message); // 변수에 저장된 값을 보여준다.

let message = 'Hello!'; // 변수정의와 값을 할당하는것을 한줄로도 가능하다.

alert(message); // Hello!

(2) 변수 값 변경

let message; //변수를 선언하고 

message = 'Hello!'; // 변수에 값을 넣음
message = 'World!'; // 변수안에 값이 변경

alert(message);// 결과 : World!

값이 변경되면, 이전 데이터는 변수에서 제거된다.

(3) 변수의 데이터를 다른 변수에 복사

let Hello = 'Hello world!'; 
let message;	//변수 두개를 선언하고

// Hello의 'Hello world' 값을 message에 복사한다.
message = Hello;

// 두 변수는 같은 값을 가진다.
alert(Hello); // 결과 : Hello world!
alert(message); // 결과 : Hello world!

! 변수를 두 번 선언하면 에러가 발생한다.
같은 변수를 두 번 선언하면 에러가 발생하기 때문에 한 번만 선언해야 한다.

let message = "This";
let message = "That"; 
// 'let'을 반복하면 에러 발생
// 결과 : Uncaught SyntaxError: Identifier 'message' has already been declared

따라서 변수는 딱 한 번만 선언하고, 선언한 변수를 참조할 때는 let 없이 변수명만 사용해야한다.

let message = "This";
 message = "That";  
//결과 : That

2. 상수

변화하지 않는 변수( 상수[constant] )를 선언할 때는 let 대신 const를 사용한다.

const myBirthday = '18.04.1982';

상수는 값을 변경할 수 없으므로 상수를 변경하려고 하면 에러가 발생한다.

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; 
// Uncaught TypeError: Assignment to constant variable.

대문자 상수

기억하기 힘든 값을 변수에 할당해 별칭으로 사용하는 경우 대문자와 밑줄로 구성된 이름으로 명명한다.

장점 :
1. 기억하기 쉬움
2. 오타 확률 감소
3. 코드 가독성 증가

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

let color = COLOR_ORANGE;
alert(color); // #FF7F00

3. 변수 명명 규칙

변수 명명 시 제약 사항이있다.
1. 변수명에는 오직 문자와 숫자, 그리고 기호( '$', '_')만 들어갈 수 있다.
2. 첫 글자는 숫자가 될 수 없다.
3. 하이픈 '-'은 변수명에 올 수 없다.

여러 단어를 조합하여 변수명을 만들 땐 카멜 표기법(camelCase)이 흔히 사용된다.

• 카멜 표기법(Camel Case) : 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성하여 구분자로 한다.(ex : myVisitorCount)
• 스네이크 표기법(Snake Case) : 언더스코어(_)를 구분자로 한다. 주로 상수 표현 시에 사용된다.

예약어

예약어(reserved name) 목록에 있는 단어는 자바스크립트 내부에서 이미 사용 중이기 때문에 변수명으로 사용할 수 없다.

ex)
let, class, return, function

use strict 없이 할당

변수는 대개 정의되어 있어야 사용할 수 있지만, 예전에는 let 없이도 단순하게 값을 할당해 변수를 생성하는 것이 가능했다.

use strict를 쓰지 않으면 과거 스크립트와의 호환성을 유지할 수 있기 때문에 let을 사용하지 않고 가능하다.

4. 바람직한 변수명

변수가 담고있는 것이 무엇인지 잘 설명하기 위해서 변수명은 간결하고 명확해야 한다.

무엇을 하고 있는지 명확히 알고 있지 않을 경우 외에는 줄임말이나 a, b, c와 같은 짧은 이름은 피해야 하며
최대한 서술적이고 간결하게 명명한다.

재사용 or 새로 만들기

재사용된 변수는 과거에 붙여진 스티커를 떼지 않은 채 물건만 바뀐 상자와 같다. 변수를 재사용하면 변수 선언에 쏟는 노력을 좀 덜 순 있지만 디버깅에 열 배 더 많은 시간을 쏟아야 한다.