Vue.js ES6

https://babeljs.io/

• ES6의 여러가지 문법 중 Vue.js 코딩을 간편하게 해주는 문법 학습
• const&let, Arrow Function, Enhanced Object Literals, Modules 학습

ES6 란?

• ECMAScript 2015와 동일한 용어
• 2015년은 ES5(2009년)이래로 진행한 첫 메이저 업데이트가 승인된 해
• 최신 Front-End Framework인 React, Angular, Vue에서 권고하는 언어 형식
• ES5에 비해 문법이 간결해져서 익숙해지면 코딩을 훨씬 편하게 할 수 있음

Babel

• 구 버전 브라우저 중에는 ES6의 기능을 지원하지 않는 브라우저가 있으므로 transpiling이 필요
• ES6의 문법을 각 브라우저의 호환 가능한 ES5로 변환하는 컴파일러

const & let - 새로운 변수 선언 방식

• 블록 단위 { }로 변수의 범위가 제한되었음
• const : 한번 선언한 값에 대해서 변경할 수 없음 (상수 개념)
• let : 한번 선언한 값에 대해서 다시 선언할 수 없음

위 특징들에 대해서 자세히 알아보기 전에 ES5 특징 2가지를 리뷰

ES5 특징 - 변수의 Scope

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

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

ES5 특징 - Hoisting

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

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

ES6 - {} 단위로 변수의 범위가 제한됨

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

ES6 - const 로 지정한 값 변경 불가능

const a = 10;
a = 20; //Uncaught TypeError: Assignment to constant variable

하지만 객체나 배열의 내부는 변경할 수 있다.

const a = {};
a.num = 10;
console.log(a); // {num: 10}

const a = [];
a.push(20);
console.log(a); // [20]

ES6 - const, let

function f() {
	{
    	let x;
        {
        	//새로운 블럭안에 새로운 x의 스코프가 생김
        	const x = "sneaky";
            x = "foo"; // 위에 이미 const로 x를 선언했으므로 다시 값을 대입하면 에러 발생
        }
        // 이번 블록 범위로 돌아왔기 때문에 'let x'에 해당하는 메모리에 값을 대입
        x = "bar";
        let x = "inner"; //Uncaught SyntaxError: Identifier 'x' has already been declared
    }
}