Deep Dive - 04.변수

🔶 변수란?

:메모리 공간에 저장된 값을 재사용 할 수 있도록, 메모리 공간에 이름을 붙인것

🔆변수가 필요한 이유

1. 재사용
   :코드에서 10+30; 이라는 연산을 했다는 것은 이를 이용해 무언가를 하겠다는 의도가 있었을 것임.
   따라서 이 연산 결과를 저장해놓고, 다른 코드에서 “재사용” 할 수 있기 위해서
   
   
2. 가독성
   : 변수 값에 상징적인 이름을 붙여 변수에 저장된 값의 의미를 명확히 할 수 있음.
   → 따라서 변수 이름만 보고도 이 값이 어떤 의미인지 알 수 있게끔 구체적으로 변수명을 지어야 함.

🔶 식별자(변수) 이름짓기

1. 식별자 이름은 데이터를 쉽게 식별할 수 있기위해 서술적이어야 함.

2. camelCase방식
   : 각 단어의 앞글자는 대문자로 함 ex) topMenuBtn , numCount

• 절대 안되는 규칙 3개
  1) 예약어
  2) 공백 : ex) top menu(x)
  3) $,_ 제외한 특수문자 : ex) topMenu!(x) top-Menu(x) $topMenu(o)
  
  
• 첫글자에만 안되는 규칙 1개
  1) 숫자 : ex) 2topMenu(x) topMenu2(o)

🔶 변수 만들어지는 법

1. var - 런타임 이전에 변수 "선언 단계"와 "초기화 단계"가 한번에 진행됨.

var a;  // 1.변수 선언
a = undefined; // 2.값 할당(초기화) ←암묵적으로 이뤄짐
  ----------- 런타임 이후에 -------------
a = 10; // 3.할당
a = 20; // 4.재할당

• 단계1 - 변수 선언
  : 변수를 생성하는 것.
  : 변수 이름을 등록하고 값을 저장하기 위한 메모리 공간을 확보하는 것.
  
  

• 단계2 - 초기화
  : 변수가 선언된 이후 최초로 값을 할당하는 것.
  : var로 선언한 변수는 undefined로 암묵적인 초기화가 자동으로 수행됨.

  ---------------------------- 런타임 이후에 ----------------------------

• 단계3 - 할당
  : 변수 할당문에 도달하면 비로소 값이 할당됨.
  
  

• 단계4 - 재할당
  : 재할당을 하면 이전 메모리 공간을 지우고 새로운 메모리 공간을 확보하고 그 메모리 공간에 값을 새로 저장하게 됨.
  이전 메모리 공간은 가비지 콜렉터에 의해 메모리에서 자동으로 해제됨.
  (가비지 콜렉터: 메모리 공간을 주기적으로 검사하여 더 이상 사용하지 않는 메모리를 해제하는 기능)

2. let - 변수 "선언 단계"와 "초기화 단계"가 분리되어 진행된다.

: 런타임 이전에 변수 선언 단계만 먼저 진행되고, 초기화 단계는 변수 선언문에 도달해야 실행됨

let a;  // 1.변수 선언
  ----------- 런타임 이후에 ------------- 
a = 10; // 2.값 할당(초기화) 
a = 20; // 3.재할당

3. const - let과 동일.

• 변수 선언과 동시에 초기화를 같이 해야 함.

const x = 1;

🔶 4.변수 호이스팅

🔆var, let, const 키워드를 사용해 선언하는 변수는 모두 호이스팅이 된다.

• var는 호이스팅이 가능하지만, let,const는 호이스팅이 발생하지 않는 것처럼 동작한다.
  하지만 모두 변수 호이스팅이 되는 것임!
  (사실 변수 선언 뿐만 아니라 함수,클래스 등 "모든 선언문"은 런타임 이전에서 먼저 실행되어 호이스팅 됨)
• 이유
  변수 선언은 런타임 이전에 준비됨.
  런타임 이전에 변수가 들어갈 공간이 미리 준비가 되기 때문에 호이스팅 발생하는 것 처럼 보인다.
  그러나 let,const는 tdz 때문에 참조에러가 발생하는 것뿐!
  

🔆var의 호이스팅

: var키워드로 선언한 변수는 런타임 이전에 암묵적으로 "변수 선언"과 "초기화"가 한번에 진행된다.
때문에 런타임시 변수 선언문 이전에 변수를 참조할 수 있는 것임

console.log(score); // 2.런타임시 undefined 출력가능(호이스팅 가능)
var socore; // 1.런타임 이전에 "변수 선언"과 "초기화"가 이뤄짐(var는 선언과 동시에 undifined로 초기화됨.)
socore = 80;    // 3.런타임시 - "값 80이 할당"됨.
console.log(score);  // 4.80출력 

🔆let의 호이스팅

• let키워드로 선언한 변수는 "변수 선언"과 "초기화" 단계가 분리되어 진행된다.
  초기화 단계는 런타임 이후에 실행된다.
  때문에 초기화 이전에 변수를 참조하려고 하면 참조 에러가 발생한다.
  때문에 let으로 선언한 변수는 변수 호이스팅이 발생하지 않는 것 처럼 보이는 것이다.
  
• TDZ(Temporal Dead Zone)
  : 스코프 시작 지점부터 ~ 초기화 시작 지점까지는 변수를 참조할 수 없는 구간
  

console.log(foo); 
// 2.런타임시 이전에 변수가 들어갈 공간이 준비되어 있기 때문에 호이스팅 발생함. 
// 그러나 tdz 때문에 참조에러 발생하는 것임

let foo; // 1.런타임 이전에 변수 선언만 함
console.log(foo); // 3. undefined - 런타임시 변수 선언문에서 초기화가 실행됨.

foo = 1; // 4. 값 할당
console.log(foo); // 1 5.값이 참조됨.

🔆const의 호이스팅

• let과 비슷
• 변수 선언과 동시에 초기화를 같이 해야 함. (변수 선언은 런타임 이전에 되고, 초기화는 런타임때 되는 것임.)

console.log(foo); // ReferrenceError // 2.호이스팅 됨. 하지만 참조에러 발생

const foo = 1; // 1.런타임 이전에 변수 선언만 됨 // 3.초기화 됨

console.log(foo); // 4.값 참조 가능

< hoisting 요약정리 >
1. var, let, const는 모두 호이스팅이 가능하다.
2. 그러나 let, const는 호이스팅이 안되는 것 처럼 보인다.
(사실 호이스팅이 가능하다. 때문에 "참조"에러가 나는 것임)
3. 그 이유는
let, const의 변수 선언은 런타임 이전에 되지만, 초기화는 런타임시 되는데,
TDZ라는 "스코프 시작~초기화" 단계 동안은 변수를 참조할 수 없는 구간이 있기 때문이다.