logo

Post

var vs let vs const

게시글 대표 이미지

기술 면접 단골 질문 var, let, const에 대해 알아보자.

var, let, const 모두 변수를 선언하기 위한 키워드이다.

  1. var로 선언된 변수는
    • 함수 스코프가 적용되며, 선언된 함수 내에서만 접근 가능하다.
    • 함수 밖에 있으면, 그 변수는 전역 변수가 되어 프로그램 전체에서 접근 가능하다.
    • var로 선언된 변수는 호이스팅되며, 선언되기 전에도 사용 가능하다.
  2. let으로 선언된 변수는
    • 블록 스코프가 적용되며, 선언된 블록 내에서만 접근 가능합니다.
    • 호이스팅되지 않으므로, 선언되기 전에 사용 할 수 없다.
  3. const로 선언된 변수는
    • 블록 스코프가 적용되며, let과 마찬가지로 선언된 블록 내에서만 접근 가능하다.
    • constlet의 차이점은 const로 선언된 변수는 다시 할당할 수 없으며, 할당을 시도하면 에러가 발생한다. 이러한 이유로 const는 고정된 값이나 변경되지 않아야 하는 값을 선언하는 데 유용하다.

일반적으로는 변수를 선언할 때 기본적으로 const를 사용하는 것이 좋으며, 재할당이 필요할 때만 let을 사용하고, var는 사용하지 않는 것이 권장된다.

변수를 선언하면 객체에 대한 참조가 고정되지만, 객체 자체는 여전히 변경 가능하다. 그래서, 객체를 불변으로 만들기 위해서는 Object.freeze() 메소드를 사용해야 한다.

const obj = { a: 1 };
obj.a = 2; // 가능
obj = { a: 3 }; // 불가능

한편 letconst도 엄밀히 말하면 호이스팅이 되긴 한다. 다만 var와 달리 선언되기 전에 사용할 수 있지 않다는 점에서 사실상 호이스팅이 되지 않는다고 봐도 무방한 것이다. 선언되기 전에 사용하려고 하면 ReferenceError가 발생한다.

실행 컨텍스트가 생성될 때 const/let 변수가 생성되지만 할당이 평가될 때까지 초기화되지 않는다. "Temporary Dead Zone"(TDZ)으로 알려진 상태로 존재한다. 이것은 변수가 코드의 실제 위치에서 초기화될 때까지 접근하거나 사용할 수 없다는 것을 의미한다.

즉, let/const 변수들은 범위의 맨 위에 올려져 있지만(호이스팅), 초기화와 사용은 TDZ에 의해 제한되어 있어 할당되기 전에는 접근할 수는 없다. 그러한 의미에서 변수 선언의 관점에서는 호이스팅 되지만 변수 초기화와 사용의 관점에서는 호이스팅되지 않는다고 할 수 있다.

그렇다면 왜 굳이 TDZ 개념을 두어 호이스팅을 하는 걸까?

자바스크립트에 TDZ가 있는 주된 이유는 선언되지 않은 변수의 사용과 관련된 오류를 방지하기 위함이다. var를 사용하면 변수를 선언하기 전에 변수를 사용할 수 있으며, 이로 인해 예기치 않은 동작과 디버깅하기 어려운 오류가 발생할 수 있다. TDZ를 구현하여 이러한 변수가 선언 및 초기화된 후에만 액세스할 수 있도록 하여 코드를 보다 예측 가능하고 이해하기 쉽게 만든다.

또한 TDZ는 개발자들이 애플리케이션의 상태에 대해 추론할 수 있도록 도와준다. let/const 변수는 값이 할당될 때까지 초기화되지 않기 때문에 개발자들은 이 변수들이 사용될 때 정의된 값을 가질 것이라는 것을 알고 있어 코드에서 잠재적인 버그를 쉽게 식별할 수 있다.

요컨대 자바스크립트의 TDZ 개념은 선언되지 않은 변수의 사용과 관련된 오류를 방지하기 위해 구현되며, 개발자들이 프로그램의 상태에 대해 추론할 수 있도록 도와 코드를 더 예측 가능하고 이해하기 쉽게 만든다.

다른 글 읽기
이전 글
  • Cover Image for 테스트 코드에서의 <Router> 에러와 다양한 Router 컴포넌트들
      테스트 코드에서의 <Router> 에러와 다양한 Router 컴포넌트들

      useHref() may be used only in the context of a <Router> component(feat. MemoryRouter)

    • 다음 글
    • Cover Image for 리액트 앱을 만드는 7가지 방법
        리액트 앱을 만드는 7가지 방법

        아직도 CRA밖에 쓸 줄 모른다면 주목!