[ES6+] var, let, const 쉽게 이해하기! 3줄요약 + 설명

let 변수와 const는 ES6 이후 스펙에서 새롭게 등장한 변수이다. 그래서 브라우저 배포용 코드같은 경우는 아직도 var 변수만 사용되는 경우도 있다고 한다. 

var, let, const 를 구분하는 가장 중요한 점을 요약하자면, 1. 값 변경 가능 유무 2. 스코프 범위 3.호이스팅 가능 유무 이다. 

그리고 우선순위는 const -> let -> var 이라고 하니 최대한 우선순위에 맞춰서 써야하겠다!

---

1. 값 변경 가능 유무 
var과 let은 값이 선언된 이후에 값을 변경할 수 있지만,
const는 생성할 때 선언된 초기값을 변경할 수 없다. 

2. 함수스코프 vs 블록스코프
var은 함수 스코프를 가지지만, 
let과 const 변수는 블록 스코프{ }를 가진다. 

3. 호이스팅 가능 유무 
var은 호이스팅이 가능하지만, 
let과 const은  호이스팅이 불가능하다.

---

[1번 부가설명] 값 변경 가능 유무 

const는 선언시에 반드시 값을 작성해주어야하고, 값을 변경하지 않을 때 사용하는 변수이다.

하지만 변수값 자체를 바꿀 수는 없지만 Object의 property값이나, 배열의 요소의 값은 바꿀 수 있다. 즉 참조하고 있는 주소를 바꿀 수 없는 것이지 그 주소가 가르키고 있는 데이터를 바꿀 수는 있다. 

또한 자바스크립트에서 상수는 대문자 사용이 관례라고 하는데, const가 가지는 시멘틱 의미 자체가 값을 변경할 수 없는 변수 (=상수)이기 때문에 각자 코딩 스타일대로 하면 될것 같다)

 

[2번 부가 설명] 함수스코프 vs 블록스코프 

블록스코프란 변수가 선언된 { 블록 } 이 해당 변수를 사용할 수 있는 영역(스코프)이라는 뜻이다.

let name = "yoy"
if(name){
    let name = "rooney";
    console.log("블록 안에서",name); // 블록 안에서 rooney
};
console.log("블록 밖에서",name); // 블록 밖에서 yoy

이렇게 if문을 감싸고 있는 { 블락 } 이 변수를 사용할 수 있는 영역이 되어 변수가 구분되어 진다.

위와 같이 let을 쓰면 if안과 밖으로 스코프가 달라지지만 (블록 안과 밖의 스코프가 달라져서 변수 이름이 같아도 값이 대체되지 않아 같은 스코프에는 같은 이름 사용 불가하다.), name을 var 변수로 선언 했을 경우에는 if 안과 밖이 같은 스코프가 되어서 "Uncaught SyntaxError: Identifier 'name' has already been declared" 오류가 뜬다. 

 

[3번 부가설명] 호이스팅 가능 유무

자바스크립트 엔진은 "함수선언문 -> 변수초기화 -> 코드실행" 의 순서로 이루어지는데, 

코드 실행 전 변수초기화 단계에서 정적환경의 선언적 환경 레코드에 변수 이름을 바인딩하게 된다.(정적환경 안에 선언적 환경 레코드라는 property가 있음. 함수 안에 작성된 모든 변수가 그 안에 설정되기 때문에 변수를 찾을 때에는 선언적 환경 레코드에서 찾게된다.)

그 때, var은 변수 초기화 단계에서 선언적 환경레코드에 undefined로 초기값을 설정하고, let과 const는 초기값을 아예 설정하지 않아 tdz(temporal dead zone)에 들어가게 된다. 그렇기 때문에 var은 어쨌든 'undefined'라는 값이 있기 때문에 호이스팅이 가능하지만, let과 const는 'undefined'라는 값조차 없기 때문에 변수 선언코드 위에서 해당 변수를 사용하게 되면 에러가 발생하게 된다.

호이스팅 -> 2021.10.21 - [Javascript/javascript 개념] - 자바스크립트 호이스팅(hoisting) 이유와 원리 3줄 요약 + 설명