ES6

1. Babel

• Es6를 지원하지 않는 브라우저가 있으므로 tanspiling이 필요
  

2. const & let

• 새로운 변수 선언 방식
• 블록 단위{ }로 변수의 범위가 제한되었음
• const : 한번 선언한값에 대해서 변경할 수 없음
• let :한번 선언한 값에 대해서 다시 선언할 수 없음

2-1. const

const a = 10;
a = 20     => ❌

2-2. let

let a = 10;
let a = 20;   => ❌
a = 30;    -> ⭕

3. 변수 선언과 호이스팅

3-1. 변수의 Scope🟡

• 기존 자바스크립트(ES5)는 { }에 상관없이 스코프가 설정됨

var sum = 0;
for(var i=1; i<=5; i++) {
 	sum = sum + 1; 
}
console.log(sum);   //15
console.log(i);     //6

❗ JAVA는 저 i로 접근이 안됨!

3-2. 호이스팅

• Hoisting이란 선언한 함수와 변수를 해석기가 가장 상단에 있는 것처럼 인식한다.
  (밑에 선언되어도 위로 끌어올린다)
• js 해석기는 코드의 랑니 순서와 관계 없이 함수선언식과 변수를 위한 메모리 공간을 먼저 확보한다.
• 따라서, function a()와 var는 코드의 최상단으로 끌어올려진 것(hoisted)처럼 보인다.

function willBeOveridden() {
  	return 10;
	}
willBeOveridden();    // 5
function willBeOveridden() {
  	return 5;
	}

3-2-1. 호이스팅 Quiz

3-3. ES6의 const & 호이스팅

3-3-1. ES6 : { } 단위로 변수의 범위가 제한됨

let sum = 0;
for(let i = 1; i <= 5; i++) {
 	sum = sum + 1; 
}
console.log(sum);			//10
console.log(i);				//Uncaught ReferenceError: i is not defined

3-3-2. const로 지정한 값 변경 불가능 ❗ 하지만 객체나 배열의내부는 변경할 수 있다!

const a = 10;
a = 20; ❌

❗객체나 배열 재정의는 가능❗

const a = {  };
a.num = 10;
console.log(a);			//{ num: 10  }
------------------
const a = [];
a.push(20);
console.log(a);			//[20]

3-3-3. Quiz.

function f() {
  {
    	let x;
    {
      // 새로운 블록 안에 새로운 x의 스코프가 생김
      const x = "sneaky";
      x = "foo";   ❌     //이미 위에 const로 x를 선언했기 때문에 안됨.
    }
    //이전 블록 범위로 돌아왔기때문에 'let x'에 해당하는 메모리에 값을 대입
    x = "bar";          ⭕
    let x= "inner";     ❌
	}
}

❗❗❗❗{ } 블록 마다 새로운 scope이 생긴다❗❗❗❗

3. [리팩토링]

3-1. const 사용 예

• 메서드 안에서 obj 정의 한 경우, 이 메서드 안에서 재정의 될 일없으므로 const로 변환⭕

  methods : {
    addOneItem : function(value) {
       const obj = {completed : false, item : value };          //이 아이템이 check됐는지아닌지.
       //객체를 String으로 변환하는 API
       localStorage.setItem(value, JSON.stringify(obj));
       this.todoItems.push(obj); 
    },
  }

3-2. 반복문은 무조건 let

  created: function() {             //뷰의 라이프 사이클과 관련된 속성. 인스턴스가 생성되자마자 호출되는 라이프사이클 훅.
      if(localStorage.length > 0) {
        for(let i= 0; i<localStorage.length; i++) {
          if(localStorage.key(i) !== 'loglevel:webpack-dev-server') {
            this.todoItems.push(JSON.parse(localStorage.getItem(localStorage.key(i))));
          }
        }
      }
  },