let, const 키워드
let 키워드, const 키워드를 알아보기 전에 var 키워드를 알아보자.
[var 키워드]
var 키워드는 변수를 선언할 때 사용하며 변수는 스코프(scope)로 구분한다.
크게 로컬 변수(Local variable), 글로벌 변수(Global variable)로 나뉜다.
로컬 변수(Local variable) - 함수, 오브젝트
글로벌 변수(Global variable) - 프로그램 전체
ES5에서 vat 키워드를 사용하여 변수를 선언하도록 하기 위해 'use strict'를 도입했다.
'use strict'를 사용하면 var 없이 선언 시에 에러가 발생한다.
하지만 근본적으로 var의 문제를 해결하지 못한다.
그래서 var 키워드의 문제점을 해결하기 위해 나온 것이 let 키워드와 const 키워드이다.
[let 키워드]
1.함수 내에 작성하면 함수가 스코프다.
function () {
let id = 'okayoon';
}
2.함수 내에 if문에 작성하면 if의 블록이 스코프다.
function (id) {
if(id === 'okayoon'){
let userId = id;
}
}
3.블록 밖에 같은 이름의 변수가 있어도 스코프가 다르므로 각각 설정된 값이 유지된다.
let id = 'okayoon';
function (id) {
let id = 'ok';
console.log(id);
// id의 값은 ok
}
console.log(id);
// id의 값은 okayoon
4.블록 안에 블록을 계층적으로 작성하면 각각의 블록이 스코프다.
function (id) {
let id = 'ok';
function (){
let id = 'okayoon';
console.log(id);
// id의 값은 okayoon
}
console.log(id);
// id의 값은 ok
}
5.같은 스코프에서 같은 이름으로 let 변수를 선언할 수 없다.
function (){
let id = 'okayoon';
............
............
let id = 'ok';
}
6.호이스팅(Hoisting)
호이스팅(Hoisting)이란?
자바스크립트는 소스 코드 위에서 아래로 순차적으로 실행한다.
따라서 호출될 함수를 작성한 후 아래에서 함수를 호출해야 함수 호출이 정상적으로 된다.
하지만 함수 선언문은 호출하는 코드를 위에서 작성 후 호출 함수를 아래에서 작성해도 호출이 된다.
이를 호이스팅(Hoisting)이라고 한다.
let과 const 키워드는 호이스팅(Hoisting)되지 않는다고 알려져 있지만 실제로는 그렇지 않다고 한다.
예제의 경우 호이스팅(Hoisting)문제가 아니라 TDZ(Temporal Dead Zone)에 의해 ReferenceError를 발생한다.
let id = 'okayoon';
// 익명즉시실행함수
(function () {
console.log(id);
// undefined가 아니라 throws a ReferenceError 라고 한다.
}());
var 키워드 일 경우 function 함수가 먼저 선언된 것으로 인식되므로 console.log의 값은 undefined가 된다.
하지만 let과 const의 키워드는 호이스팅은 되나 TDZ에 의해 ReferenceError이 발생한다.
이해하려고 검색해서 찾아보았으나 정확히 모르겠다.
간단히 말해서 내부 로직 실행은 되는데, 그 안에서 문제가 생겨 바인딩 되지 못한다?
그래서 실행은 되니 호이스팅은 되는 것이고 과정에서 실패하여 언뜻 보았을때 호이스팅 자체가 안되는 것으로 보인다... 로 대충 이해하는 정도ㅠㅠ
자세한 것은 잘 정리해두신 블로거 글이 있어서
참고링크 로 걸어둔다.
7.this
var id = 'okayoon';
console.log(this.id);
// okayoon
var 키워드는 this로 글로벌 오브젝트의 id값을 출력한다.
let id = 'okayoon';
console.log(this.id);
// undefined
let은 글로벌 오브젝트(window)에 설정되지 않는다.
[const 키워드]
1.변수에 할당된 값을 변경할 수 없다.
(할당된 값은 상수가 된다.)
const id = 'okayoon';
try{
id = 'ok';
} catch(e){
console.log('const 재할당 불가');
}
// 재할당 에러가 발생하고 try catch문에 의해 console.log의 문구가 실행된다.
2.값을 변경할 수 없다는 점을 제외하면 let 키워드와 기능 및 스코프가 같다.