var

var는 JavaScript의 변수를 의미한다.

Global은 전역변수 mansubvar은 함수내에서 사용되는 지역변수를 의미한다. 전역변수는 어디서나 사용가능하고 지역변수는 해당 block안에서 사용 가능하다.

var Global = "glovar";
function mansub(){
  var mansubvar = "mansub";
}

const란?

const는 수정불가능한 변수를 의미한다. var로 변수를 선언할 경우 수정하는 것이 가능한데 const로 변수를 선언하면 수정하는 것이 불가능하다.

 const mansub_height = 180;
 mansub_height = 179;

이렇게 제 키를 179로 낮추는 코드를 작성하게 되면 아래와 같이 에러가 발생합니다.

 Uncaught TypeError: Assignment to constant variable.
    at <anonymous>:1:15

그렇다면 const는 절대 불변인가?
절대 불변은 아니고 array 혹은 object의 형태에서 수정하는 것은 가능하다.

　
***

let

var로 for문을 작성했을 경우 for문 바깥에서도 i를 호출할 수 있고 i를 console에 찍어보면 4라는 값을 얻을 수 있다.

for(var i = 0; i < 4; i++){
}
console.log(i);
결과값 : 4

그렇다면 let 은 어떤 것일까? 아래 코드를 보며 이해해보자. let은 for문 block에서만 적용되는 변수이다.

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

VM509:3 Uncaught ReferenceError: i is not defined
    at <anonymous>:3:13

let 이슈

JavaScript코드를 작성할 때 for문을 돌면서 tag에 for문의 인덱스를 갖는 event를 만들으려고 했던 적이 있었다. 그때 발생했던 이슈가 모든 event에 for문의 인덱스의 마지막 값이 들어있던 것이었다.

대충 아래와 같은 코드였는데, 모든 리스트를 클릭해도 4번째 리스트라고 console에 나왔었다.

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

Why?

왜 이런 이슈가 발생하냐면 for문을 돌면서 eventlistener를 적용시키는 것이 아니라 그것은 for문이 다 돌고 난 후에 적용되기 때문에 모두 4가 들어있는 것이다.

그렇다면 인덱스를 기준으로 이벤트를 적용시키는 것이 불가능한가? 아니다

이럴 때 let을 사용하면 된다. 아래와 같이 작성하면 각기 다른 list에 다른 인덱스를 기준으로 이벤트를 적용시킬 수 있다.

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

정리

정확하게는 모르겠지만 let은 동적으로 사용하고 버릴때 사용하는 변수로 사용될 것이라는 생각이 든다.
다음에는 let을 이용해 closure을 알아보려고 한다.