var, let, const

var는 변수를 선언합니다. 함수 유효 범위scope를 가집니다. 이는 함수 내에서 var 문으로 선언된 변수를 참조할 수 없다는 것을 뜻합니다. '함수 유효 범위'라 할 때의 함수는 익명 함수도 해당됩니다. 일견 익명 함수는 if나 for, while 문처럼 보여 단지 블록 유효 범위를 설정하는 것처럼 보이기도 하기 때문에 주의가 필요합니다. 특히 이벤트 핸들러의 경우 자주 그러는데, 저만 그럴 수도 있겠지요.

let은 변수를 선언합니다. 함수 유효 범위와 블록 유효 범위를 모두 가집니다. for 문 내 let으로 선언된 변수는 for 문의 바깥에서 참조 할 수 없습니다.

var i = '가진 자'; for (let i = 0; i < 10; i++) { console.log(i); }; console.log(i); 는 1부터 9 와 가진 자 를 출력하며,

var i = '가진 자'; for (var i = 0; i < 10; i++) { console.log(i); }; console.log(i); 는 1부터 10을 출력합니다.

유효 범위 내에서 이미 선언한 적이 있는 변수에 대해 let 문은 구문 오류를 일으킵니다. 물론 범위 바깥에서 선언된 변수에 대해서는 상관이 없기 때문에 이 또한 혼동을 유의해야 합니다.

1. 유효 범위 바깥의 변수와는 다른 변수를 선언 
2. 유효 범위 내 선언된 적이 있는 변수에 대해 는 재선언 불가

let의 적절한 사용은 코드를 깨끗하게 할 수 있습니다. 예를 들어 어떤 이벤트 리스너를 조건으로 하여 내부에 새로운 이벤트 리스너를 생성해야 할 때, 내부 이벤트 핸들러 함수 내 변수들이 상위 이벤트 핸들러 함수와 동일한 구조라면, let으로 선언한 동일한 이름의 다른 변수의 활용이 구조를 파악하는 데에 도움을 줄 수 있겠지요. (까지 적어 두고 이 경우는 함수 유효 범위가 생성되기 때문에 var를 사용해도 완전히 상관이 없다는 걸 깨달았습니다. 깨달았다기에도 너무 얕고 단순한 사실인데,) let의 적절한 사용이라 함은, 여전히 var를 통한 선언이 쓸모 있다는 것을 의미합니다. 당연히 제어문을 거치고 변수를 재활용하는 경우가 매우 많겠지요. 조건에 의한 동적인 li 태그 생성 등,

const는 상수를 선언합니다. 상수의 이름 규칙은 변수와 같지만 전체를 대문자로 하는 것이 컨벤션입니다. 그렇기 때문에 의미를 구분하여야 하는 경우 우린 camelCase가 아닌 under_score를 쓰게 됩니다. 선언된 상수는 이후 참조가 가능하지만, 다른 값의 할당 혹은 같은 이름의 변수 및 상수 재선언이 불가합니다. 재할당의 경우 구문 오류를 일으키거나 오류 없이 선언이 수행되지 않습니다. 이를 테면 const YOUR_CITY = '서울'; console.log('YOUR_CITY'); YOUR_CITY = '도쿄'; console.log('YOUR_CITY'); 의 출력 값은 '서울' 두 번이며, 링크한 Mozilla Developer Network 문서에 의하면 Firefox나 Chrome에서는 오류를 발생시키나 Safari는 발생시키지 않는다 합니다. 저는 윈도우 사용자이기 때문에 뒤의 것을 확인하기 어렵네요. Node.js도 오류를 출력하지는 않습니다만, 해당 상수의 값은 변환되지 않습니다. 

* 참조한 두 개의 문서는 영문 버전을 링크하였으나, 해당 페이지 한정으로 번역이 잘 되어 있습니다.

재선언이 불가능하다는 특징 때문에 이제는 변수를 선언할 때에 const 키워드를 쓰는 경우가 대부분입니다. 어플리케이션 런타임 오류를 피하고, 스크립트 작성 단계에서 이를 추적할 수 있기 때문입니다. 대상의 상태state가 변화하고 이에 대한 관찰이 필요한 경우에는 임의의 객체를 const로 선언, 관찰 대상을 해당 객체의 속성으로 지정하여 사용합니다.; 2020년 1월 16일