ECMAScript6 길들이기 정리(1) - var vs let

var vs let

var 는 함수 스코프, let 은 블록 스코프

기존의 var는 함수 스코프 변수입니다. 우리가 기본적으로 알고 있는 블록 스코프가 아닙니다. 함수 내에 어디서든 선언하면 접근 가능합니다. (관련 내용 : http://chanlee.github.io/2013/12/10/javascript-variable-scope-and-hoisting/) 그래서 기본적으로 헤깔립니다. 코드가 길어지면 길어질 수록 변수가 선언된 곳을 찾는 것이 어려워집니다.

var a = 12;


function myFunction() {

    console.log(a);

    var b = 13;

    if(true) {
        var c = 14;
        console.log(b);
    }


    console.log(c);

}


myFunction();

[결과]
12
13
14

코드를 보시면 c에서 에러가 안나고 14가 콘솔에 보여집니다. 이 문제를 해결하게 위해서 let 이라는 변수 할당 키워드가 나왔습니다. let은 보통 다른 언어(저는 자바)에서 익숙한 블록 스코프입니다.

let a = 12;

function myFunction() {
    console.log(a);
    let b = 13;

    if(true) {
        let c = 14;
        console.log(b);
    }

    console.log(c);
}

myFunction();

[결과]
12
13
ReferenceError: c is not defined

우리가 익숙한 대로 c에 접근할 수 없기 때문에 에러가 납니다.

var과 let 의 재선언

var, let 모두 다른 스코프에서 재선언시에 다른 변수가 만들어 집니다.

var global = 12;
console.log(global);

function myFunction() {
    var global = 13;
    console.log(global);

    if(true) {
        var local = 14;
        console.log(local);
        var local = 15;
    }
    (function () {
        var global = 16;
        console.log(global);
    })();

    console.log(local);
    console.log(global);
}
myFunction();
console.log(global);

[결과]
12
13
14
16
15
13
12

잠깐 더러운 코드를 만들어 봤습니다. 맨 위에 있는 global은 전역변수 입니다. 전역 스코프를 가진 변수죠. 그리고 myFunction안에 선언된 global은 함수 내의 지역 변수 입니다. 그리고 즉시 실행 함수 내에 있는 global은 또 그 함수 내의 지역 변수 입니다. 그래서 결과를 보면 다른 변수라는 것을 알 수 있습니다.
if 절 안에 있는 local이라는 변수를 보시면 같은 스코프에 동일한 이름으로 선언했습니다. 그러나 값의 상태가 유지됩니다. 덮어 써서 같은 변수가 된 것이죠.
바로 이게 var의 헤깔리는 포인트입니다. 코드가 길어졌는데 변수를 막 선언해도 에러도 안나고 뭐가 뭘 덮어썼는지 알기도 어렵습니다. 그래서 let은 같은 스코프에 저장하면 에러가 납니다.

if(true) {
    let local = 14;
    console.log(local);
    let local = 15;
}

[결과]
let local = 15;
^^
SyntaxError: Identifier ‘local’ has already been declared

이제는 헤깔릴 일이 없어졌습니다. 다른 스코프에서 다른 변수인 것은 다른 언어에서도 익숙하죠~
이제 그냥 let을 쓰면 됩니다!

정리

-	let	var
scope	블록	함수
같은 scope에서 재선언	Error	덮어쓴다
다른 scope에서 재선언	다른 변수	다른 변수

참고 도서 

ECMAScript6 길들이기  - 나라얀 프루스티 저, 이일웅 역