var, let, const는 모두 변수 선언 키워드다. 자바스크립트는 변수의 값 자체가 아니라 메모리 주소를 기억하고 식별자를 통해 메모리 주소에 저장된 값을 반환한다.
이 때, 변수명을 자바스크립트 엔진에 알리는 것을 선언이라고 한다. 변수 선언 시 메모리 주소를 참조해 값을 가져오기 때문에 다른 곳에서 사용하던 값이 그대로 남아있을 수 있어 초기화 단계가 필요하다.
ES6 이전에는 var로만 변수 선언이 가능했고 자바스크립트가 암묵적으로 선언 단계 시 초기화 단계도 동시에 진행되어 undefined로 초기화 된다. 그래서 호이스팅 시 undefined를 반환해 참조 오류가 발생하지 않는다.
💫 호이스팅(Hoisting)
자바스크립트에서 함수의 코드를 실행하기 전 변수와 함수의 메모리 공간을 선언 전 미리 할당하는 것을 의미한다. 그래서 함수를 호출하는 코드를 선언보다 앞서 배치할 수 있다.
var와 let, const는 어떤 차이가 있을까?
🍫 var
일단 var가 가진 단점은
1. 재선언, 재할당 가능
중복 선언이 발생하면 기존에 선언된 변수는 다른 값을 참조하게 되고 기존의 변수를 사용하던 로직에 영향을 끼치게 된다.
2. 함수 레벨 스코프
코드 블록 내에서 선언한 변수를 전역에서도 사용 가능! 또한 var는 키워드 생략이 가능하기 때문에 전역변수를 남발하게 되고, 오류 발생의 여지를 남긴다.
3. 변수 호이스팅
위에서 언급한 선언과 초기화의 동시 진행으로 인해 변수 선언 전 참조가 가능하다. 이는 가독성을 떨어뜨리고 오류 발생의 여지를 남기게 된다.
이런 단점으로 ES6에서 보완으로 let과 const가 도입되었다.
🌳 let
var보다 보완된 점을 중심으로 정리해보면
1. 변수 중복 선언 금지
같은 스코프 내 중복 선언하면 '이미 정의된 식별자'라는 참조 오류(SyntaxError)가 발생한다.
2. 블록 레벨 스코프
코드 블록 내 선언된 지역 변수는 전역에서 참조할 수 없다.
3. 변수 호이스팅
선언 단계와 초기화 단계가 분리되어 진행된다. 호이스팅은 발생하지만 변수 선언문에 도달했을 때 초기화가 이뤄지게 된고, 초기화 이전에 값을 참조하면 에러가 발생하는데 이를 '시간상 사각지대(TDZ)'라고 말한다.
🔨 const
주로 상수를 선언할 때 사용되는 키워드지만 반드시!는 아니다.
상수처럼 사용되지만 변경 불가능한 값은 아니기 때문.
다른 키워드들과 비교해보면,
1. 재선언, 재할당 금지
이런 특징으로 상수를 선언할 때 주로 쓰인다.
여기서 기억해야 할 것은 const는 상수를 표현하는 데 사용될 뿐, 변경 불가능 한 값은 아니다! 객체가 할당됐을 때는 재할당이 아니라 값 자체가 변경 가능하기 때문이다.
2. 블록 레벨 스코프
let과 마찬가지로 블록 레벨 스코프로 선언된 코드 블록 내에서만 참조 가능하다.
3. 변수 호이스팅
선언과 초기화가 동시에 이루어져야 한다. 그렇지 않으면 참조 오류 발생! 자바스크립트는 초기화를 제외하고 선언만 호이스팅하기 때문에 선언 코드까지 실행해야 변수가 초기화 된 상태가 된다. 그래서 초기화 전 참조하면 참조 오류가 발생해 호이스팅이 발생하지 않는 것처럼 작동한다.
코드 작성 시 어떤 키워드로 변수를 선언하느냐에 따라 코드로 신호를 줄 수 있다. const면 재할당이 필요없는 값, let은 재할당이 필요한 값으로! var는 신호를 주기에 힘든 특징을 가지고 있기 때문에 코드의 의도가 모호하게 표현된다.
현재 const는 상태 유지, 가독성, 유지보수의 편의성을 위해 기본적으로 항상 사용해야 하고, let은 재할당이 필요한 경우에 사용, var 사용은 지양해야 한다.
