[JavaScript] 변수의 선언 및 특징

[ 변수의 선언 ]

• 자바스크립트에서 변수를 사용하기 위해서는 반드시 사전에 개발자가 사용할 변수를 선언하여야 한다.
  자바스크립트에서는 변수를 선언하기 위해 3가지 키워드를 제공한다
  1. var
  2. let
  3. const
• var : 여러 블로그들을 살펴보면 "제발 var 쓰지 말고 let 쓰세요" 라는 글들을 심심치 않게 볼 수 있다.
  그 이유는 여러가지가 있는데 대표적으로 var 라는 키워드는 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원한다는 점이다.
  블록 레벨 스코프 : 블록 레벨 스코프란 선언된 변수가 특정 블록 내부에서 유효함을 의미한다.

  function example() {
  if (true) {
    let count = 20;
  }
  console.log(count); //에러
  // count 라는 변수는 if 라는 블록 내부에 선어되어 있기 때문에 블록 외부에서 count로 접근할 수 없다.
  }

  함수 레벨 스코프 : 함수 레벨 스코프란 선언된 변수가 함수 내부에서 유효함을 의미한다.

  function example() {
  if (true) {
    var count = 20;
  }
  console.log(count); //에러안남
  // 반면에 var 로 선언된 변수의 경우 example() 이라는 함수 내에서 유효하기 때문에 if 블록 내부에 선언되어 있어도 블록 외부에서 접근이 가능하다.
  }

  만약 다른 프로그래밍 언어를 사용해본 개발자라면 함수 레벨 스코프는 뭔가 이상하다.. 일반적인 상식으로 블록 내에 선언된 변수는 외부에서 접근할 수 없는게 당연한데 var 키워드는 이를 허용해버린다.
  이로인해 의도치 않게 변수에 접근하거나 또는 수정되어 버릴 수 있기 때문에 디버깅의 어려움과 변수가 오염될 수 있다는 단점이 있다.
  이러한 var 키워드의 단점을 보완하고자 ES6에서는 let 과 const 키워드를 도입하였다.

• let : 앞선 예시에서 let 키워드의 특징을 알 수 있었는데, let 으로 선언된 변수의 경우 블록 레벨 스코프 를 지원한다.
  따라서 if 블록 내에 let 으로 변수가 선언되었다면, if 블록 외부에서는 해당 변수에 접근할 수 없게 된다.

  function example() {
  if (true) {
    let count = 20;
  }
  console.log(count); //에러
  // let 으로 선언되었기 때문에 if 블록 내에 선언된 count변수에는 접근할 수 없다
  }

• const : var, let 과는 달리 const 키워드로 선언된 변수는 재할당이 금지된다.

  function example() {
    const test = 20;
    test = 30; //에러
  }

  정확히는 원시 값 을 재할당 할 수 없는 것이지 만약 const로 선언된 변수에 객체를 할당할 경우 값을 변경할 수 있다.
  즉 const 는 재할당을 금지할뿐 불변하는 것은 아니다.

[ 변수의 특징 ]

• 호이스팅 : 호이스팅이란 변수와 함수의 메모리 할당을 선언 전에 수행하는 것을 의미한다. 즉, 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작하게 되는 것이다.

  console.log(count); //출력값 : undefined
  count = 123; //변수할당
  console.log(count); //출력값 : 123
  //var 키워드로 선언된 변수의 경우 선언과 동시에 undefined로 초기화 된다. 
  var count;

  위 예제에서 알 수 있듯이 var count 라는 변수 선언문이 코드의 맨 아래에 위치함에도 console.log(count); 명령이 정상 실행된다.
  "let, const 의 경우 호이스팅 이 일어나지 않는다." 라는 것은 잘못된 설명이다.
  다음은 이전 예제에서 var 키워드를 let으로만 변경한 코드이다. 과연 어떻게 동작할까?

  console.log(count); //에러
  count = 123; 
  console.log(count); 
  let count;

  var 과 달리 let으로 선언된 변수의 경우 선언문 이전에 참조가 불가능하다.
  이는 TDZ에 의한 것인데...

• TDZ : TDZ란 let 이나 const로 선언된 변수가 선언되기 전까지 사용할 수 없는 구간을 의미한다.
  let과 const의 경우 선언만 호이스팅되고 초기화는 실제 선언문 위치에서 발생하기 때문에 선언문 이전의 범위(TDZ) 영역에서 변수를 참조할 경우 초기화 되지 않은 변수를 참조하려 시도하여 에러가 발생한다.
  (여기서 주의할 점은 let은 선언과 할당을 분리할 수 있지만 const는 재할당이 불가능한 상수 이므로 선언과 할당이 동시에 이루어져야 한다.)

  var count;
  count = 20;
  let test;
  test = 30;
  const name; //에러
  name = 'june';