변수

---

변수(variable)란?

• 변수란 자바스크립트에서 데이터를 편하게 다루기 위해 이름을 붙인 데이터를 의미한다.
• 변수 사용은 데이터를 편리하게 저장하고 꺼내 쓰는 것을 의미한다.
• 변수명에는 공백을 쓸 수 없으므로, 보통 단어의 첫 글자를 대문자로 사용한다.

1. 변수의 생성 단계

---

• 변수가 생성되는 과정은 선언 -> 초기화 -> 할당, 총 3단계를 거쳐서 진행된다.

1) 선언(Declaration)

• 자바스크립트에서의 변수 선언은 실행 컨텍스트의 변수 객체에 변수를 등록하는 단계를 의미한다.
• 이 변수 객체는 스코프가 참조하는 대상이다.
• 스코프에 변수를 등록하는 단계이며 이 단계에서 호이스팅이 일어난다.

let age;  // age라는 이름의 변수 선언

2) 초기화(Initialization)

• 초기화는 실행 컨텍스트에 존재하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계이다.
• 이 단계에서 할당된 메모리에 undefined로 초기화된다.

let age;  // undefined

3) 할당(Assignment)

• 할당은 undefined로 초기화된 메모리에 할당 연산자(=)를 사용하여 다른 값을 넣는 것이다.
• 할당은 변수의 선언과는 다르게 런타임(runtime)에 진행 된다.

age = 12;  // 변수 할당

4) 선언과 동시에 할당

• 선언된 변수는 나중에 할당할 수도 있고, 선언과 동시에 할당할 수도 있다.

let name = 'kim';  // 변수 선언과 동시에 할당(초기화)

• 쉼표(,) 연산자를 이용하여 동시에 선언하거나 할당할 수도 있다.

let month, date;             // 여러 변수를 한 번에 선언
month = 10, date = 5;        // 여러 변수를 한 번에 할당
let hours = 7, minutes = 15; // 여러 변수를 선언과 동시에 할당

2. let / var / const 키워드

---

• let, var, const를 '키워드'라고 부름
• 일종의 명령어로 JavaScript엔진이 어떤 작업을 수행할지 알려주는 기능한다.
• function, return 등도 다 키워드이다.

1) let (변수 재선언 불가능, 변수 재할당 가능)

• let 키워드 변수 생성 단계

1. 선언
2. 초기화
   • 실제 코드에 도달했을 때 초기화 된다.
   • 변수를 선언하기 전에 참조를 시도하면 ReferenceError가 발생한다.
3. 할당

• let은 변수의 재할당은 가능하지만 var처럼 재선언은 불가능 하다.
• let은 할당단계에서 초기화된다.
• 블록 스코프를 따른다.

let variable = '변수선언함';
console.log(variable); // 변수선언함

variable = '변수 재할당함';
console.log(variable); // 변수 재할당함

let variable = '또 변수선언함';
console.log(variable); // Uncaught SyntaxError: Identifier 'variable' has already been declared

2) var (변수 재선언 가능)

• var 키워드 변수 생성 단계

1. 선언+초기화
   • var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어지기 때문에 변수의 선언 이전에 변수에 접근해도 에러를 발생시키지 않는다.
2. 할당

• 변수 선언을 여러 번해도 에러없이 각기 다른 값이 출력될 수 있다.
• 블록 스코프를 무시하고, 함수 스코프만 따른다.
• ES6부터 let, const 추가

var variable = '변수선언함';
console.log(variable); //변수선언함

var variable = '또 변수선언함';
console.log(variable); //또 변수선언함

3) const (변수 재선언 불가능, 변수 재할당 불가능)

• const 키워드 변수 생성 단계

1. 선언+초기화+할당
   • const 키워드로 변수를 선언할 경우, 선언과 동시에 초기화를 해야 하며 그렇지 않을 경우 컴파일 에러가 발생한다.

• const의 경우 constant(상수)의 의미 그대로 한 번만 선언하고 또 값을 재할당을 통해 바꿀 수 없다. (값을 재할당할 경우 TypeError를 내므로, 의도하지 않은 값의 변경을 막을 수 있다)
• 재할당이 필요 없는 경우 const를 사용해 불필요한 변수의 재사용을 방지한다.
• let과 동일하게 블록 스코프를 따른다.

const variable = '변수선언함';
console.log(variable); //변수선언함

variable = '변수 재할당함';
console.log(variable); //변수 재할당함(에러)

const variable = '변수선언함';
console.log(variable); //또 변수선언함(에러)

4) let / var / const 키워드 비교

	let	var	const
유효 범위	블록 스코프 및 함수 스코프	함수 스코프	블록 스코프 및 함수 스코프
값 재할당	가능	가능	불가능
재선언	불가능	가능	불가능

3. 변수의 타입과 초깃값

---

• 자바스크립트의 변수는 타입이 정해져 있지 않으며, 같은 변수에 다른 타입의 값을 다시 대입할 수도 있다.
• 한 변수에 다른 타입의 값을 여러 번 대입할 수는 있지만, 한 번 선언된 변수를 재선언 할 수는 없다.

let num = 10;        // 변수의 선언과 함께 초기화
num = [10, 20, 30];  // 배열 대입
let num;             // 이 재선언문은 무시됨.

// 동일한 변수를 대입한 케이스
// 한번 선언했던 변수를 다시 사용할 때는 let을 쓰지 않음)
let sum = 1;
sum = sum + 2;
sum = sum + 3;
sum = sum + 4;
> 10