es6-let과 closure, const

let과 closure

var list = document.querySelectorAll("li");
for(var i=0;i<list.length;i++){
  list[i].addEventListener("click",function(){
    console.log(i+"번째 리스트 입니다.")
  })
}

i 값은 콜백 밖에 있는 변수값을 참조.클로저 변수

4번째 리스트입니다. 라는 결과 값만 나오게 됨.

var list = document.querySelectorAll("li");
for(let i=0;i<list.length;i++){
  list[i].addEventListener("click",function(){
    console.log(i+"번째 리스트 입니다.")
  })
}

위와 같이 let이라 쓰면

1~4번째 리스트 입니다. 라는 결과 값이 출력 됨.
장점이 있는 것은 확실하지만, 아직은 너무 헷갈린다..ㅠ일단 let은 블록단위에서 유효성이 있도록 한 변수임을 기억하자
const

function home(){
  const homename ='my house';
  homname = "your house"; -> 오류
  console.log(homename);
}
​
home();

선언된 변수를 지키는 방법은 const

function home(){
  const homename =[1,2,3,4];
  homname = ["1","2"]; -> 오류
  console.log(homename);
}
​
home();

배열 역시도 동일하다.

const를 기본으로 사용하는것이 전략,

그런데 변경이 될 수 있는 변수는 let을 사용한다.

var는 사용하지 않는다.
immutable array

function home(){
  const list =["apple","orange","watermelon"];
  list.push("banana");
  console.log(list);
}
​
home();

위와 같이 const를 써도 수정이 가능하다.

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

const는 불변을 의미하는것은 아니다. 값을 재할당하는 코드만 불가능한것이다.

immutable array 를 어떻게 만들지?

뒤로가기,앞으로가기 등을 할때 만든다.

const list = ["apple,","orange","watermelon"];
list2=[].concat(list,"banana");
console.log(list,list2);

위 예제는 immutable array의 한예이다.
리액트에서 리듀서로 새로운 상태값을 만들때 immutable array를 자주 사용했었는데, 그 개념이 나와서매우 반가웠다.
참고로 spread operator를 사용하면 immutable array를 만드는데 매우 용이하다.