es6 let, const scope

2018-03-21

let의 스코프

// es5 var
function home() {
    for(var i = 0 ; i<100 ; i++){
    }
    console.log(i); // 100
}
home();
// es5는 함수 스코프를 사용하기 때문에 100 출력


// es6 let
functioin home(){
    for(let i=0; i<100; i++){
    }
    console.log(i)// Error
}
home();
// es6 let은 블록 스코프를 사용하기 때문에 에러를 출력

let의 클로저

// es5
var list = document.querySelector("li");
for(var i = 0;i<list.length;i++){
    list[i].addEventListener("click", function(){
        console.log(i+" 번째 리스트"); // '4 번째 리스트' 출력
    })// 콜백 함수안에 i의 값은 콜백 함수 밖의 i값을 참조하기 때문
}
// 함수 스코프를 이용하여 해결 할 수 있다
// 하지만 let을 이용하면 조금 더 쉽게 해결 할 수 있다.

이벤트리스너 콜백함수안에 i는 콜백함수 박의 i값을 참조하기 때문에 4 출력된다.

이를 해결하기 위해서는 함수스코프를 이용하면 되지만 더 간단하게는 es6의 let을 사용하여

더 쉽게 해결할 수 있다.

Const

변하지않는 변수를 선언할때 사용. (재할당X)

변수를 선언할때 const를 기본으로 사용한다.

하지만 변경이 될 수 있는 변수는 let을 사용

var는 사용하지 않는다.

function home() {
    const list = ["a", "b", "c"];
    list.push("d")
    console.log(list); // ["a", "b", "c" , "d"]
}

주의

const를 사용하더라도 배열과 오브젝트의 값을 변경하는것은 가능!

재할당 하는 경우에만 Type Error를 출력한다.

immutable array를 만드는 방법

const list = ["a", "b", "c"];
list2 = [].concat(list, "d"); // ["a", "b", "c", "d"]
console.log(list === list2) // false

// 리액트에서 state의 값이 바뀌는 경우 리듀서에서 상태값을 바꿔 리턴하게 되는데
// 그러한 경우에서 많이 사용된다.