Post
var vs let vs const
기술 면접 단골 질문 var, let, const에 대해 알아보자.
var
, let
, const
모두 변수를 선언하기 위한 키워드이다.
var
로 선언된 변수는- 함수 스코프가 적용되며, 선언된 함수 내에서만 접근 가능하다.
- 함수 밖에 있으면, 그 변수는 전역 변수가 되어 프로그램 전체에서 접근 가능하다.
var
로 선언된 변수는 호이스팅되며, 선언되기 전에도 사용 가능하다.
let
으로 선언된 변수는- 블록 스코프가 적용되며, 선언된 블록 내에서만 접근 가능합니다.
- 호이스팅되지 않으므로, 선언되기 전에 사용 할 수 없다.
const
로 선언된 변수는- 블록 스코프가 적용되며,
let
과 마찬가지로 선언된 블록 내에서만 접근 가능하다. const
와let
의 차이점은const
로 선언된 변수는 다시 할당할 수 없으며, 할당을 시도하면 에러가 발생한다. 이러한 이유로const
는 고정된 값이나 변경되지 않아야 하는 값을 선언하는 데 유용하다.
- 블록 스코프가 적용되며,
일반적으로는 변수를 선언할 때 기본적으로 const
를 사용하는 것이 좋으며, 재할당이 필요할 때만 let
을 사용하고, var
는 사용하지 않는 것이 권장된다.
변수를 선언하면 객체에 대한 참조가 고정되지만, 객체 자체는 여전히 변경 가능하다. 그래서, 객체를 불변으로 만들기 위해서는 Object.freeze()
메소드를 사용해야 한다.
const obj = { a: 1 };
obj.a = 2; // 가능
obj = { a: 3 }; // 불가능
한편 let
과 const
도 엄밀히 말하면 호이스팅이 되긴 한다. 다만 var
와 달리 선언되기 전에 사용할 수 있지 않다는 점에서 사실상 호이스팅이 되지 않는다고 봐도 무방한 것이다. 선언되기 전에 사용하려고 하면 ReferenceError
가 발생한다.
실행 컨텍스트가 생성될 때 const/let
변수가 생성되지만 할당이 평가될 때까지 초기화되지 않는다. "Temporary Dead Zone"(TDZ)으로 알려진 상태로 존재한다. 이것은 변수가 코드의 실제 위치에서 초기화될 때까지 접근하거나 사용할 수 없다는 것을 의미한다.
즉, let/const
변수들은 범위의 맨 위에 올려져 있지만(호이스팅), 초기화와 사용은 TDZ에 의해 제한되어 있어 할당되기 전에는 접근할 수는 없다. 그러한 의미에서 변수 선언의 관점에서는 호이스팅 되지만 변수 초기화와 사용의 관점에서는 호이스팅되지 않는다고 할 수 있다.
그렇다면 왜 굳이 TDZ 개념을 두어 호이스팅을 하는 걸까?
자바스크립트에 TDZ가 있는 주된 이유는 선언되지 않은 변수의 사용과 관련된 오류를 방지하기 위함이다. var
를 사용하면 변수를 선언하기 전에 변수를 사용할 수 있으며, 이로 인해 예기치 않은 동작과 디버깅하기 어려운 오류가 발생할 수 있다. TDZ를 구현하여 이러한 변수가 선언 및 초기화된 후에만 액세스할 수 있도록 하여 코드를 보다 예측 가능하고 이해하기 쉽게 만든다.
또한 TDZ는 개발자들이 애플리케이션의 상태에 대해 추론할 수 있도록 도와준다. let/const
변수는 값이 할당될 때까지 초기화되지 않기 때문에 개발자들은 이 변수들이 사용될 때 정의된 값을 가질 것이라는 것을 알고 있어 코드에서 잠재적인 버그를 쉽게 식별할 수 있다.
요컨대 자바스크립트의 TDZ 개념은 선언되지 않은 변수의 사용과 관련된 오류를 방지하기 위해 구현되며, 개발자들이 프로그램의 상태에 대해 추론할 수 있도록 도와 코드를 더 예측 가능하고 이해하기 쉽게 만든다.
다른 글 읽기
테스트 코드에서의 <Router> 에러와 다양한 Router 컴포넌트들
useHref() may be used only in the context of a <Router> component(feat. MemoryRouter)
리액트 앱을 만드는 7가지 방법
아직도 CRA밖에 쓸 줄 모른다면 주목!