[ES6] var, let, const 차이점

포스팅 목적

JavaScript의 변수 선언 방식인 var, let, const 를 차이점을 중심으로 알아봅니다.

 

var 와  let, const 이란?

var, let, const 는 JavaScript 에서 변수를 선언하는 키워드 입니다. var 은 ES1 부터, let 과 const 는 ES6 부터 도입됐습니다.

 

var 과 let, const 의 차이점

 

1. 변수 재선언과 재할당 여부

변수 재선언과 재할당은 코드의 유지보수성에 영향을 미칩니다.

• var : 변수 재선언 O / 변수 재할당 O
• let : 변수 재선언 X / 변수 재할당 O
• const : 변수 재선언 X / 변수 재할당 X

 

2. 스코프

• var : 함수 레벨 스코프로 함수 내에서 선언된 변수는 함수 내에서만 유효합니다.
• let, const : 블록 레벨 스코프로 코드 블록 (함수, if, for, while, try/catch 등) 내에서 선언된 변수는 코드 블록 내에서만 유효합니다.

 

3. 전역 객체의 프로퍼티 여부

• var : 전역 변수로 선언을 할 경우 전역객체 ( 브라우저에서는 window ) 의 프로퍼티가 되어 window.varName 으로 접근할 수 있습니다.
• let, const : 전역 변수로 선언을 할 경우에도 window.varName 으로 접근할 수 없습니다.

 

4. 호이스팅에서의 에러 발생 여부

호이스팅은 코드가 실행하기 전 변수선언이나 함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상입니다. 자바스크립트의 모든 선언은 호이스팅이 일어납니다. 

• var : 선언 단계와 초기화 단계가 한번에 이루어져서 에러가 발생하지 않습니다.
• let, const : 선언 단계만 거치고 초기화 되지 않아 에러가 발생합니다.

 

호이스팅에 관한 부분을 이해하기 위해 추가적으로 알아야할 내용

• 변수는 선언 - 초기화 - 할당 3가지 단계를 거쳐 생성됩니다.
• 선언과 초기화 사이의 구간을 일시적 사각지대라고 합니다.
• 초기화 되지 않으면 변수를 참조할 수 없어 참조 에러가 발생합니다.

 

let 과 const 가 도입된 이유

var 과 let, const 의 차이점을 보면 알 수 있습니다. 기존의 var 로는 아래와 같은 단점이 있어 개발자가 의도하지 않게 오류가 발생할 수 있기 때문에 단점을 극복하기 위해 도입되었습니다.

• 함수의 코드 블록만을 스코프로 인정해서 나머지는 전역 변수로 생성됩니다.
• var 키워드를 생략해도 동작하여 전역 변수가 생성될 가능성이 있습니다.
• var 키워드를 중복으로 사용해도 동작하기 때문에 기존에 변수와 혼동할 수 있을 수 있습니다.

 

참고 자료

• var, let, const 차이점
• let, const와 블록 레벨 스코프
• [JavaScript] 호이스팅(Hoisting)이란?