[JavaScript] 변수 (Variables)

# 0. 참고

① https://ko.javascript.info/variables

변수와 상수

② 모던자바스크립트(Deep Dive) : 4장 변수

---

# 1. 변수 (Variables)

- 데이터를 저장할 때 쓰이는 이름이 붙은 저장소

- 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙여진 이름

// 예 ) 변수생성과 값의 할당
var result = 10 + 20;

/*
  1. 10 + 20은 연산을 통해 새로운 값 30을 생성한다.
  2. 연산을 통해 생성된 값 30은 메모리 공간에 저장된다.
  3. 메모리 공간에 저장된 값 30을 재사용할 수 있도록 저장된 메모리 공간에 이름을 붙이는 것이 변수
*/

- 변수 이름 : result
- 변수 값 : 10 + 20(30)
- 할당(assignment) : 변수에 값을 저장하는 것
- 참조(reference) : 변수에 저장된 값을 읽어 들이는 것

출처 : Deep Dive

1) 변수 선언 (Variable Declaration) 과 값의 할당 (Assignment)

* 변수 선언 : 변수를 생성 하는 것

  - 변수를 사용하려면 반드시 선언이 필요 → var, let, const 키워드를 사용한다.

* 값의 할당 : 할당 연산자 = 를 사용하여 우변의 값을 좌변의 변수에 할당한다.

① message이름의 변수 선언(생성)

let message;

② 할당 연산자 = 를 사용하여 변수 안에 값(데이터) 할당

let message;
message = 'Hello!';

console.log(message); // 'Hello!'

③ 변수 선언과 값 할당을 한 줄로 쓸 수 있다.

let message = 'Hello!';

console.log(message); // 'Hello!'

④ 한 줄에 여러 변수 선언 가능

let userName = 'kim', age = 30, messgae = 'Hello!';

// 위 아래 같은 내용

let userName = 'kim';
let age = 30;
let message = 'Hello!';

2) 값의 재할당

* 이미 값이 할당되어 있는 변수에 새로운 값을 다시 할당하는 것

  - var 키워드로 선언한 변수는 값을 재할당 할 수 있다.

  - 값을 재할당 할 수 없어서 변수에 저장된 값을 변경할 수 없다면 상수(constant)라 한다.

var score = 80; // 변수 선언과 값의 할당
score = 90; // 값의 재할당

참고 ) const
→ ES6 에서 도입된 const 키워드를 사용해 선언한 변수는 재할당이 안된다.
→ const 키워드는 단 한번만 할당할 수 있는 변수를 선언한다.
→ 즉, const 키워드는 상수를 표현한다.

---

# 2. 상수 (Constant)

- 변하지 않는 변수 → 선언시 var, let 대신 const 를 사용한다.

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

const BIRTHDAY = '1994.01.28';

---

#3. 식별자 네이밍 규칙

식별자 ?
→ 어떤 값을 구별해서 식별해낼 수 있는 고유한 이름
→ 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
→ 단, 식별자는 특수문자를 제외한 문자, 언더스토어(_), 달러 기호($)로 시작해야 한다.
→ 숫자로 시작하는 것은 허용하지 않는다.
→ 예약어는 식별자로 사용할 수 없다.
  - 예약어는 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어를 말한다.
ex) if, function, this, import, new, for 등...

// 카멜 케이스(camel Case)
var firstName;

// 스네이크 케이스(snake_case)
var first_name;

// 파스칼 케이스(PascalCase)
var FirstName;

// 헝가리안 케이스(typeBungarianCase)
var strFirstName; // type + identifier
var $elem = document.getElementById('myId'); // DOM노드
var observabel$ = fromEvent(document, 'click'); //RxJS 옵저버블

- 변수나 함수이름 : 카멜케이스 사용

- 생성자함수, 클래스이름 : 파스칼케이스 사용

- ECMAScript사양에 정의되어 있는 객체와 함수 : 카멜 케이스와 파스칼 케이스를 사용

∴ 코드 전체의 가독성을 높이려면 카멜케이스와 파스칼 케이스를 따르는 것이 유리

---