[JS][ES6] const, let

Babel을 사용하여 ES6 문법으로 코드를 작성 후 ES5로 변환해주어 호환성을 보장하는 방식이 주로 쓰인다.

---

let

: let은 블록단위에서 사용 가능한 변수 선언이다.

var name = "global var";

function home(){
  var homevar = "homevar";
  for(let i=0; i<100; i++){}
  console.log(i);
}

home();

// for 문 속에서 i를 선언했기 때문에 오류 발생

Closure 변수 문제를 let으로 해결

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

// var로 변수를 선언할 경우 closure 변수 i가 4로 된 결과를 모두 공유하기 때문에 원하는 결과를 얻을 수 없다. 
// 이때 let을 사용하면 i를 지역변수화해서 문제 해결 가능

---

const

: constant, 원래 바뀌지 않는 값을 대문자 표기법으로 변수를 선언해 표시해줬는데 이제 const라는 변수 선언 방법이 생겼다.

const는 재할당하는 경우에 오류가 발생한다.

전략

• const를 기본으로 사용한다.
• 변경이 될 수 있는 변수는 let을 사용한다.
• var는 사용하지 않는다.

const 특성과 immutable array

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

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

home();

>> ["apple", "orange", "watermelon", "banana"]

immutable array는 어떻게 만들까?

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

>> ["apple", "orange", "watermelon"]
>> ["apple", "orange", "watermelon", "banana"]
>> false

concat을 사용하여 새로운 array를 만들어 사용한다.