var, let, const 특징 및 호이스팅

2023년 4월 25일

var 키워드 특징으로 인한 문제점 3가지

  1. 전역 변수 : var 키워드는 전역변수로 선언 할 수 있다. 변수는 유효 범위에 따라 지역 변수과 전역 변수로 구분이 되는데, var 키워드를 사용해서 전역 변수와 변수명이 겹쳐 값을 덮어씌우는 상황이 발생해 잘못 된 값을 참조하여 문제점이 발생할 수 있습니다.
  • 지역 변수 (local variable) : 함수 내에서 선연된 변수를 가르키고, 변수가 선언된 함수 내에서만 유효하고, 함수가 종료되면 메모리가 사라집니다.
  • 전역 변수 (global variable) : 함수 외에서 선언된 변수를 가르키고, 전역 페이지 어느 곳에서 접근할 수 있고, 웹페이지가 닫혀야만 메모리가 사라집니다.
  1. 중복 선언 가능 : 중복 선언으로 인한 문제점이 발생합니다. letconst 의 경우 같은 스코프에서 동일한 변수명으로 선언을 하게 된 경우 오류가 발생하는데, var 키워드는 동일한 변수명으로 선언해도 오류가 발생하지 않아 값이 달라져 에러가 발생하고, 유지 보수 등에 문제가 발생합니다.

  2. 변수 호이스팅 : var 키워드의 경우 선언된 후에 undefined로 초기화 되기 떄문에 참조를 해도 에러가 발생하지 않아, 예기치 못한 에러가 발생할 수 있어 개발, 유지 보수 등 문제가 발생할 수 있습니다.

let 키워드 특징 및 var 키워드와 차이점 4가지

  1. 중복 선언 불가능 : let 키워드는 재할당은 가능 하지만 동일한 스코프 안에서 중복 선언을 하게 되면 문법 에러가 발생해 재할당이 불가능 합니다. 이는 var 키워드를 사용 했을 때 문제점을 막아주는 역할을 합니다.

  2. 블록 단위 스코프 : let 키워드로 선언된 변수는 블록 단위 스코프를 따릅니다. 함수 뿐만 아니라 모든 코드의 블록 내에서 선언된 변수는 해당 유효 범위를 벗어나면 읽거나 사용할 수 없습니다.

  3. TDZ :let 키워드는 호이스팅시 초기화가 되지 않기 때문에 초기화를 하지 않고 읽거나 사용할 경우 참조 에러가 발생하여 var와 같은 변수 호이스팅 문제가 발생하지 않습니다. 이러한 선언 부터 초기화가 되는 시점, 변수를 참조 할 수 없는 영역을 TDZ(Temporal Dead Zone, 일시적 사각지대)라고 합니다.

  4. 지역 변수 : let 키워드는 지역 변수로 선언하기 때문에 var 키워드의 문제점인 전역 변수로 중복 선언되는 문제점이 없습니다.

const 키워드 특징 3가지

  1. 선언과 초기화 : const 키워드는 let 키워드와 다르게 선언과 초기화를 동시에 하지 않으면 문법 에러가 발생하게 됩니다.
  2. 재할당 불가능 : var 키워드, let 키워드는 재할당이 가능 하지만 const 키워드는 재할당이 불가능 합니다.
  3. 상수 : const 키워드로 선언한 변수에 원시값을 할당한 경우 변수 값을 변경할 수 없습니다. 원시 값은 변경이 불가능한 값이므로 재할당이 없이 값을 변경할 수 없어서 const를 사용하면 상수값으로 사용할 수 있습니다.
  • 원시값은 재할당이 불가능 하지만 객체같은 참조 값은 얼마든지 변경이 가능합니다. 그래서 함수나, 배열 메소드 등을 사용하여 새로운 변수를 만들 때 객체 값들을 변경해서 새로운 값이나 배열 등을 만들어도 오류가 생기지 않습니다.

호이스팅이란?

실행 컨텍스트의 생성 단계에서 변수 및 함수 선언을 해당 범위 최상단에 올리는 동작입니다. 이러한 동작을 하게 되면 실제로 정의되기 전에 변수와 함수를 참조할 수 있지만 할당이 아닌 선언 자체만 호이스팅됩니다.