[Javascript] var, let, const의 차이점은?

 

이전글에서 호이스팅에 관점에서 var, let, const의 차이점을 다뤘다면, 이번에는 var, let, const의 또 다른 차이점에 대해서 다뤄볼려고 한다. 

const

우선, const는 업데이트가 불가능하다. 이 말은 선언이후에 새로운 값으로 기존의 값을 직접적으로 대체할 수 없다는 것이다. 그렇기에 const를 업데이트 할려면 새로운 변수를 만들어야한다. 

const는 또한 선언과 동시에 유의미한 값을 넣어주어야한다.

예를 들어, const num = 1; 이런식으로 const는 이후에 밝힐 let, var와 달리 값 지정과 선언을 따로 할 수가 없다.

이는 const가 이름처럼 상수의 역할을 톡톡히 하는 것으로 보인다. 

하지만, const는 진정한 의미의 상수가 아니다.

예를 들어, 

const num = 42;

const person = { name: "Won" }; 

person.name = "John";

 

 

예시처럼 객체타입의 데이터의 const가 사용되었을 경우 객체안에 존재하는 name값을 수정할 수 있다.

따라서, 이는 const가 진정한 의미에서는 상수가 아니라는 것을 의미한다..! 

let

let은 const와 마찬가지로 ES6버전에 추가된 기능이지만 const와는 달리 선언과 값 지정을 따로 할수가 있다. 

예를 들어,

let num;

num = 1;

이런게 가능하다는 것입니다.

또한 let은 업데이트또한 가능하며 이미 값이 할당된 변수에 새로운 값을 넣어 대체해주는 것이 가능하다. 

Var

var 는 재선언과 업데이트가 가능하며 선언과 값 지정또한 따로 할수가 있다. 업데이트또한 가능하다. 그리고 var는 let, const와 달리 같은 스코프내에서 재선언도 가능하며 함수 레벨 스코프 혹은 전역 스코프를 가질 수 있다.

예를 들어, 

var num = 1;

var num = 2;

console.log(num); // 2

이런 재선언도 가능하다.

 

스코프 관점에서 let, const, var의 차이점

스코프란 해당 값이 유효한 범위라고 할 수 있다. 

let, const와 var의 차이점은 이 유효 범위의 차이인데,

우선 let과 const는 블록 레벨 스코프 혹은 전역 스코프를 가질 수 있다.

반면, var은 함수 레벨 스코프 혹은 전역 스코프를 가질 수 있다.

 

함수 스코프(Function Scope)

함수 스코프란 말 그대로 변수가 함수 내에서 유효하다는 뜻이다.

중요하다고 생각하는 점은 함수 내에서 var로 선언된 변수는 해당 함수 내 어디에서든 접근이 가능하다는 점이다. 즉, 함수 내부에서 선언된 var 변수는 해당 함수의 시작부터 끝까지 유효하다는 것이다. 

 

블록 스코프(Block Scope)

블록이란 {} 를 의미하며, {}로 묶인 코드 블록 내에서만 변수가 유효하다는 뜻이다. 

그리고 중요하다고 생각하는 점은 블록 스코프를 가진 변수는 해당 블록을 벗어나면 더 이상 접근이 불가하다는 것이다.

이러한 특성은 let과 const가 var에 비해 스코프가 작은 범위에서만 접근 가능하도록 보장한다는 것을 보여준다.

 

저장되는 위치의 차이

마지막으로, 이들이 물리적으로 저장되는 위치또한 다르다.

var은 변수 환경 레코드에 저장되고, let과 const는 렉시컬 환경 레코드에 저장된다. 

또한, 전역으로 let, const, var를 선언했을 경우에도 좀 다른데, 전역으로 var 변수를 선언했을 경우, 이 변수는 전역 객체(window or globalThis)에 속성으로 추가되며, 반대로 let, const는 전역으로 선언했을 경우 var과 같이 전역 스코프에 위치하기는 하지만 전역 객체의 속성으로 추가되지는 않는다. 

예를 들어, 개발자 도구를 켜서 var a = 1; const b = 2; window.a; window.b 를 테스트 해보면 a는 정상적으로 참조하나 b는 정상적으로 참조하지 못한다. 

 

정리

1. 스코프 - 예기치 못한 변수의 재할당이나 값의 변경 등으로 인해 예기치 못한 동작이 발생할 수 있는 위험을 증가
2. 호이스팅 - 코드의 가독성을 저해하고 예상치 못한 버그를 발생 가능성
3. 중복 선언 허용 - 의도치 않은 변수 값의 변경이 발생 가능성
4. 전역 변수 문제 - 전역 객체의 프로퍼티로 취급되어 예상치 못한 전역 변수 오염 위험

이러한 이유때문에 개발자들은 좀 더 엄격한 환경에서 에러를 최소화하고, 최대한 정확히 개발자가 원하는대로 코드가 작동하도록 하기 위해 이러한 기능 업데이트가 있었다고 필자는 생각한다.