변수

🧐변수란?

변수는 값을 담기 위해 이름을 붙인 상자
선언자 + 변수명 = 값

🤗선언자의 종류

• var
  1.재선언 가능
  2.재할당 가능
  3.hoisting된다
  4.함수 레벨 스코프 (function scope)

  console.log(name);   //undefined
  name='HSH';  

  위와 같이 코드를 작성하면

     var name;
     console.log(name);
     name = 'HSH';

  이런식으로 동작을 하게 되는데 var는 선언부는 hositing이 되지만 할당은 hoisting이 되지않는다.

• let
  1.재선언 불가능,
  2.재할당 가능,
  3.hoisting된다(TDZ에 의해 제약을 받는다)

    console.log(name);	//referenceError
    let name = 'HSH';

 4.블록 레벨 스코프(block scope)
 5.let선언 키워드를 사용하지 않으면 var를 사용한 것으로 취급하기 때문에 무조건 써줄것
 6.let키워드의 경우 명시적으로 선언만 했더라도 인터프리터가 해당 코드 라인을 해석하고 묵시적으로는 undefined가 할당되며 초기화된다.
  ```javascript
    let hi;
    console.log(h1);  //undefined

• const
  1.재선언 불가능,
  2.재할당 가능,
  3.hoisting된다(TDZ에 의해 제약을 받는다)
  4.블록 레벨 스코프(block scope)
  5.const선언 키워드를 사용하지 않으면 var를 사용한 것으로 취급하기 때문에 무조건 써줄것
  6.반드시 선언과 동시에 초기화 해줄것.

  const hi; //Uncaught SyntaxError: Missing initializer in const declaration

  const문으로 선언한 상수 값은 수정할 수 없지만 예외도 있다. 만약 const키워드로 선언한 값을 재할당하려고 시도하면 에러메시지가 뜬다.
  여기서 중요한 점은 바로 Call by reference호출 방식을 사용하는 타입을
  const키워드로 선언했을 때이다.

   const obj = {name : 'HSH'}
    obj = {name: 'john'}  // Uncaught TypeError: Assignment to constant variable.

이 경우 obj변수가 바라보는 값 자체의 참조를 변경하려고 했기때문에 에러가 발생. 그러나 객체 내부의 프로퍼티들은 const키워드의 영향을 받지않는다.

 const obj = {name : 'HSH'}
 obj.name = 'john';
 console.log(obj); // {name : 'john'}

이건 call by reference 호출 방식을 사용하는 Array도 마찬가지다. const키워드를 사용하여 선언했더라도 push,splice등으로 배열 내부의 원소를 변경하는 행위는 아무런 제약이 없다.

let, const의 등장

var 키워드의 경우 전역 변수를 남발하기가 쉽고 또 로컬 변수라고 해도 변수의 스코프가 너무 넓기 때문에 변수의 선언부와 호출부가 너무 멀리 떨어져 있거나 값이 의도하지 않게 바뀌는 경우를 추적하기 힘들다. 그래서 2015년에 발표된 JavaScript ES6에는 새로운 변수 선언 키워드로 let과 const가 추가되었다.

😙호이스팅(hoisting)이란 무엇인가?

스코프 안에 있는 선언들을 모두 스코프의 최상단으로 끌어올리는 것.
호이스팅은 JavaScript 인터프리터가 코드를 해석할 때 변수 및 함수의 선언 처리, 실제 코드 실행의 두단계로 나눠서 처리하기 때문에 발생하는 현상

🥰TDZ(Temporal Dead Zone)란 무엇인가?

• let/const선언은 실행중인 실행 컨텍스트의 어휘적 환경(Lexical Environment)으로 범위가 지정된 변수를 정의한다.
• 변수는 그들의 어휘적 환경에 포함될 때 생성되지만, 어휘적 바인딩이 실행되기 전까지는 액세스할 수 없다.
  • 새로운 범위에 진입할 때마다 지정된 범위에 속한 모든 let/const바인딩이 지정된 범위 내부의 코드가 실행되기 전에 실행된다. (즉, let/const선언이 호이스팅된다.)
  • 어휘적 바인딩이 실행되기 전까지 액세스할 수 없는 현상을 TDZ라고 한다.