[JS deep dive] let, const 키워드와 블록 레벨 스코프

var 키워드로 선언한 변수의 문제점

1. 변수 중복 선언 허용 : 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용 생김

 

var x= 1;
var y= 1;

var x=100;
var y;

console.log(x); //100
console.log(y) ; //1

2. 함수 레벨 스코프

함수 외부에서 var 키워드 선언하면 모두 전역변수가 됨 ( 의도치 않은 부작용 생김, 전역 변수 남발의 문제가 생김)

 

3. 변수 호이스팅

var 키워드로 변수 선언시 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌려올려진 것 처럼 작동함

>> 변수 선언문 이전에 변수를 참조하는 것은 가동성을 떨어뜨리고 오류(undefined로 초기화 된 값을 사용)를 발생시킬 여지를 남긴다.

 

let 키워드

변수 중복 선언 금지 (let으로 중복 선언시 SyntaxError 발생)

블록 레벨 스코프 (코드 불록을 지역 스코프로 인정함)

변수 호이스팅이 발생하지 않는 것처럼 동작함 ( 선언문 이전에 참조시 참조 에러(ReferenceError가 발생) 

(호이스팅은 하지만 초기화가 안되서 참조 에러가 뜸)

선언과 초기화 단계가 분리되어 진행됨(이 때문에 참조에러가 뜸)

let 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아님(보이지 않는 개념적인 블록이 존재함[실행 컨텍스트에서 배움])

 

일시적 사각지대 : 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작지점까지 변수를 참조할 수 없는데, 이 구간을 말함

 

const 키워드

const 키워드로 선언한 변수는 선언과 동시에 초기화 해야함 : const foo; // SyntaxError: 발생

재할당 금지 : const 키워드로 선언한 변수는 재할당이 금지됨 //TypeError 발생

상수 : 재할당이 금지된 변수이며 변수의 상대 개념

상수는 상태 유지와 가독성, 유지 보수의 편의를 위해 적극적으로 사용해야 함

 

const키워드로 선언된 변수에 원시 값을 할당한 경우 원시 값은 변경할 수 없는 값이고, const 키워드에 의해 재할당이 금지되므로 할당된 값을 변경할 수 있는 방법이 없음.  

const키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있음. (const 키워드는 재할당을 금지할 뿐 불변을 의미하지는 않음) >>> 프로퍼티 동적 생성, 삭제, 프로퍼티 값의 변경을 통해 객체를 변경하는 것은 가능함

 

var vs let vs const

 

ES6를 사용한다면 var 키워드 사용하지 않음

재할당이 필요한 경우에 한정해 let키워드 사용 (변수의 스코프는 좁게)

변경이 발생하지 않고 읽기 전용으로 사용하는 원시 값과 객체에는 const 키워드를 사용

 

우선 const 사용하고 추후 재할당이 필요한 경우 let으로 바꿔도 늦지 않음