[자바스크립트] ES6(ECMA Script 6) - let, const

let

---

 ES6(ECMA Script 6)에 새롭게 추가된 블록 레벨 스코프 변수 선언 방법입니다.

1. 문법

let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];

var1, var2, ..., varN

변수 이름

value1, value2, ..., valueN

변수의 초기 값

2. var과 let의 스코프 비교

var은 함수 레벨 스코프를, let은 블록 레벨 스코프를 가집니다. ([자바스크립트] 유효범위(Scope)와 호이스팅(Hoisting) 참고)

var

function varTest() {
    if (true) {
        var x = 2;
        console.log(x);  //2
    }
    console.log(x);  //2
}
varTest();

var은 함수 레벨 스코프

if문 안에 있는 var x는 함수 레벨 스코프를 가지기 때문에 if문이 종료된 후에도 값을 가지고 있어 console.log로 출력되는 것을 확인 할 수 있습니다.

let

function letTest() {
    if (true) {
        let x = 2;
        console.log(x);  //2
    }
    console.log(x);  //not defined
}
letTest();

let은 블록 레벨 스코프

if문 안에 선언된 let x는 블록 레벨 스코프를 가지기 때문에 if문이 종료 된 후의 console.log의 출력 값은 not defined로 에러가 나는 것을 확인 할 수 있습니다.

let의 장점

let은 블록 레벨 스코프를 가지고 있기 때문에, 전역 변수의 오염을 막을 수 있습니다.

for (var i = 0; i <= 5; i++) {
}
console.log(i);

var의 전역변수 오염

전역에서 var을 사용하여 for문을 실행 할 경우, for문이 종료 된 후에서 var i의 값이 남아 있는 것을 확인 할 수 있습니다.

for (let i = 0; i <= 5; i++) {
}
console.log(i);

let으로 전역변수 오염 막기

let을 사용하여 for문을 실행 할 경우, let은 블록 레벨 스코프를 가지기 때문에 전역 변수가 오염되지 않는 것을 확인 할 수 있습니다.

3. 일시적 사각지대(Temporal dead zone)

let 변수를 같은 블록에서 중복해서 선언한다면, SyntaxError가 발생합니다.

if (true) {
    let foo = "foo one";
    let foo = "foo two";
}

let은 중복 선언을 허용하지 않습니다.

위의 이야기가 당연한것 처럼 보이지만 var 변수를 같은 블록에서 중복 선언하면, SyntaxError가 발생하지 않습니다.

if (true) {
    var foo = "foo one";
    var foo = "foo two";
}

var는 중복 선언을 허용

var 변수는 호이스팅이 됩니다. ([자바스크립트] 유효범위(Scope)와 호이스팅(Hoisting) 참고)

if (true) {
    console.log(foo);
    var foo = "foo"
}

var의 호이스팅

var foo가 호이스팅 되어, not defined 에러가 아닌, undefined가 출력 되는 것을 확인 할 수 있습니다.

if (true) {
    console.log(foo);
    let foo = "foo"
}

let의 호이스팅

not defined 에러가 출력되어 호이스팅이 되지 않는 것 같지만, let 또한 블록 내의 최상단으로 호이스팅이 됩니다. 

MDS의 let 참고

최상단으로 호이스팅이 되지만, let 변수가 선언 되기 전에 호출을 할 경우 ReferenceError가 발생하는데, 이 것을 일시적 사각지대(Temporal dead zone) 이라고 합니다.

4. let 예시

MDS에 올라온 let 사용 예시 입니다.

var a = 1;
var b = 2;

if (a === 1) {
    var a = 11; // the scope is global
    let b = 22; // the scope is inside the if-block

    console.log(a);  // 11
    console.log(b);  // 22
} 

console.log(a); // 11
console.log(b); // 2

const

---

let과 동일하게 블록 레벨 스코프를 가지는 상수를 저장하는 키워드 입니다. const 변수는 선언이 된 후, 그 값을 다시 선언하는 것은 불가능 합니다.

1. 문법

const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];

nameN

상수의 이름

valueN

상수의 값

2. const 사용시 유의사항

선언

const는 정의 하자마자 초기화를 해야 합니다.

const MY_FOO;

const는 바로 초기화해야 합니다.

변경

const 변수는 다시 선언할 수 없습니다.

const MY_FOO = "FOO";
MY_FOO = "FOO 2";

const는 다시 선언 할 수 없습니다.

같은 이름의 다른 타입 변수 사용

같은 이름으로 다른 타입의 변수를 생성할 수 없습니다.

const MY_FOO = "FOO";
var MY_FOO = "FOO 2";

const MY_FOO = "FOO";
let MY_FOO = "FOO 2";

같은 이름으로 다른 타입의 변수를 생성할 수 없습니다.

블록 레벨 스코프

const는 let과 동일하게 블록 레벨 스코프를 갖습니다.

const MY_FOO = "FOO 1";
if (true) {
    const MY_FOO = "FOO 2";
    console.log(MY_FOO);
}
console.log(MY_FOO);

const는 블록 레벨 스코프

object로 초기화

const 변수의 값은 object가 될 수 있습니다.

const MY_OBJECT = {"key": "value"};

const 변수의 값은 object가 될 수 있습니다.

역시 마찬가지로 선언된 object를 다시 선언 할 수 없습니다.

const MY_OBJECT = {"key": "value"};
MY_OBJECT = { "key2": "value2" };

const는 다시 선언 할 수 없습니다.

하지만 object의 key를 통해 value는 변경이 가능합니다.

const MY_OBJECT = {"key": "value"};
MY_OBJECT.key = "value2";
console.log(MY_OBJECT);

const의 value는 변경 가능합니다.

array로 초기화

const 변수의 값은 array도 될 수 있습니다.

const MY_ARRAY = ["A"];

const 변수의 값은 array도 될 수 있습니다.

마찬가지로, 선언된 array를 다시 선언 할 수 없습니다.

const MY_ARRAY = ["A"];
MY_ARRAY = ["B"];

const는 다시 선언 할 수 없습니다.

하지만 push를 이용하여 array에 삽입할 수 있습니다.

const MY_ARRAY = ["A"];
MY_ARRAY.push("B");
console.log(MY_ARRAY);

push로 추가