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

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

코딩을 하면서 var, let, const 변수를 어떻게 하면 상황에 맞게 쓰는지를 항상 고민했었는데 이 참에 공부한 내용을 정리해봤다.

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

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

1. 값 변경 가능 유무

var과 let은 값이 선언된 이후에 값을 변경할 수 있지만,

const는 생성할 때 선언된 초기값을 변경할 수 없다.

2. 함수스코프 vs 블록스코프

var은 함수 스코프를 가지지만,

let과 const 변수는 블록 스코프를 가진다.

3. 호이스팅 가능 유무

var은 호이스팅이 가능하지만,

let과 const은 호이스팅이 불가능하다.

1번과 관련해 좀더 자세히 들어가보면,

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

2번과 관련해 좀더 자세히 들어가보면,

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

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

이렇게 if문을 감싸고 있는 { 블락 } 이 변수를 사용할 수 있는 영역이 되어 변수가 구분되어 진다. 블록 안과 밖의 스코프가 달라져서 변수 이름이 같아도 값이 대체되지 않는다 ( 같은 스코프에는 같은 이름 사용 불가)

3번과 관련해 좀더 자세히 들어가보면,

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

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

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

from http://imagineu.tistory.com/5 by ccl(A) rewrite - 2021-10-19 02:28:16