자바스크립트 var, let, const 키워드

var 키워드

< var로 선언한 변수의 문제점 >

 1. 변수 중복 선언 허용

 2. 함수의 코드 블록만을 지역 스코프로 인정

     함수 내부가 아니면  for 문 if 문 등 에서도 전역 변수로 인정됨

 3. 변수 호이스팅에 의해 변수 선언문이 선두로 끌어올려진 것처럼 동작한다.

    즉 변수 선언 이전에 참조 할 수 있지만 할당문 이전에 참조하면 undefined 를 반환

  -> 변수 선언문 이전에 변수를 참조하는 것은 에러를 발생 시키지 않지만 가독성도 떨어지고 오류 발생 여지가 있다. 

 

< var 키워드의 생명주기 >

 

  1 - 선언단계 + 초기화 단계

      선언단계에서 식별자를 등록해 자바스크립트 엔진에 변수의 존재를 알림

      초기화 단계에서 undefined 로 변수 초기화

       초기화 단계부터는 참조 에러가 발생 하지 않고 undefined 출력

 

  2- 할당단계

       값이 할당 된다.

 

let 키워드

   var 키워드의 단점을 보안하기 위해 ES6 에서 새로운 변수 선언 키워드인 let 과 const 도입

 

  특징

    1. 변수 선언 중복 금지

        같은 이름으로 변수를 중복 선언하면 문법에러 ( syntexError) 발생

    2. 블록레벨 스코프를 따른다. 

        모든 코드블록 ( 함수, if, for, while, try/catch 등)을 지역 스코프로 하는 블록레벨스코프를 따름

    3. 변수호이스팅이 발생하지 않는 것처럼 동작한다.

        변수 선언이전에 참조하면 참조에러( ReferenceError )가 발생

 

 

let 키워드 변수 생명주기

 1 - 선언단계

  변수의 존재 확인 ( 이때 변수 접근 시 참조 에러 발생 )

 

  <일시적 사각지대 (TDZ : Temporal Dead Zone)>

     변수를 참조할 수 없는 구간   

 

  2- 초기화 단계

   let 변수 선언 이후 부터 초기화 되어서 undefined 출력

 

 

  3- 할당단계

    let 변수에 값이 할당 괸다.

 

 

 

let 키워드도 호이스팅이 발생하지 않는 것 처럼 보이지만 아래 예제를 보면 a 는 전역값인 1을 출력 해야 하지만

let 키워드로 선언한 변수도 여전히 호이스팅이 발생 한다. 

let a = 1;
{
  console.log(a); // ReferenceError : Cannot access 'a' before initailization
  let a = 2;
}

 

 

 

var 키워드로 선언한 전역 변수와 전역 함수는 전역 window 의 객체이지만

let 키워드로 선언한 전역 변수는 전역객체의 프로퍼티가 아니다. 

var x = 1
console.log( window.x ) // 1

let y = 3
cosole.log( window.y ) // undefined

 

 

const 키워드

 const 키워드는 선언과 동시에 초기화 해야 한다.

 아니면 문법 에러가 발생

const x = 1;

const y // SyntexError: Missing initializer in const declaration

 

1. 호이스팅이 발생 하지 않는 것처럼 동작

    const 키워드도 let 과 마찬가지로 블록레벨 스코프를 가지고 , 호이스팅이 발생하지 않는 것처럼 동작 한다.

 

2. 재할당이 금지된다. 

    재할당 시 Type Error 발생

    일반적으로 상수의 이름은 대문자로 선언해 상수임을 명확히 나타낸다.

 

3. 객체를 할당 할때 객체 내의 값은 변경이 가능 하다. 

   객체는 주소값을 참조 하기 때문에 내부의 값이 바뀌었다고 주소값이 바뀌는게 아니라서 재할당이 되었다고 

   판단하지 않는다. 

 

변수 선언에는 기본적으로 const 키워드를 사용하고 let은 재할당이 필요한 경우에 한정해서 사용

( 일단 변수를 선언할 때는 const 키워드를 사용하고 재할당이 필요하다면 그때 let 키워드로 변경해도 늦지 않다. )