let, var, const의 차이점과 호이스팅(hoisting)

EBinY·2022년 5월 25일
  • JavaScript에서 호이스팅(hoisting)은 인터프리터(코드를 한 줄씩 읽어 내려가며 실행하는 프로그램, 컴파일러와 대조)가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다
    • 호이스팅: JavaScript의 특징으로, 소스코드에 선언된 모든 식별자(변수, 함수, 클래스)들이 유효 범위 내 최상단에 끌어올려진 것처럼 동작된다
      모든 식별자들을 실행 컨텍스트에 저장하고, 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록한다
    • 인터프리터: 실행기, 한줄씩 번역을 하며 실행한다, 번역 시간은 빠르지만, 매번 실행할 때마다 매번 번역을 다시 진행하여 비효율적이고 컴파일러 언어들에 비해 실행 속도가 느린 편
      모든 플랫폼에 종속되지 않아 여러 환경에서 바로 실행이 가능
    • 컴파일러: 번역기, 한번에 전체 번역을 실행한다, 번역 자체는 인터프리터에 비해 느리지만, 한번 번역하면 실행 파일이 생성되어 재번역을 하지 않아 실행 시간이 빠르다
      플랫폼에 종속적이다, 다른 플랫폼에서 실행하려면 다시 컴파일해야 함
  • 변수 생성 과정은 선언(Declaration) → 초기화(Initialization, 메모리 공간 확보) → 할당(Assignment) 의 3단계를 거쳐 생성된다
  • var로 선언한 변수의 경우 호이스팅 시에 undefined로 변수를 초기화 한다
    반면에 let과 const로 선언한 변수의 경우, 호이스팅 시 변수를 초기화하지 않는다
  • var는 es6 이전의 변수 선언 할당 키워드이다
    변수의 재선언과 재할당이 모두 가능하다
    유연한 변수 선언 면에서는 장점일 수 있겠으나, 코드가 많아질수록 유지 및 관리가 힘들고 에러 발생의 원인이 되기도 한다
    또한 var로 선언한 변수는 변수가 선언되기 전에 호출이 되어도 undefined, 즉 할당값이 초기화 단계를 거친 상태로 출력된다
  • es6에 등장한 let, const는 선언과 초기화가 분리되어 있다, 스코프 시작 지점부터 선언이 되어진 코드 이전까지는 참조가 불가하고 에러가 발생한다(이 구간을 Temporal Dead Zone이라고 함)
    선언되어진 코드의 시점에서 초기화와 할당이 진행된다
  • let은 변수의 재할당만 가능하다, 할당없이 변수만 선언이 가능하다 (let a;)
  • const는 변수의 재선언, 재할당 모두 불가능하다
    변수에 값을 할당하면 변경이 불가하여 변수 선언 시 할당이 반드시 이루어져야한다, 즉 let처럼 변수만 선언하는 것이 불가능하다

0개의 댓글