[Vue.js] ES6

ES5

• ECMAScript 5로 기존 ES3에서 업그레이드된 버전으로 ES4는 문제가 많이 폐기된 상태
• www.w3schools.com/js/js_es5.asp

특징

변수의 Scope

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

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

Hoisting

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

// Hoisting 예제 1
function willBeOveridden() {
  return 10;
}
willBeOveridden();	// 5
function willBeOveridden() {
  return 5;
}

// Hoisting 예제 1 해석
// 함수 선언식 hoisting
function willBeOveridden() {
  return 10;
}
function willBeOveridden() {
  return 5;
}
willBeOveridden();


// Hoisting 예제 2
var sum = 5;
sum = sum + i;

function sumAllNumbers() {
  ...
}
var i = 10;

// Hoisting 예제 2 해석
// #1 - 함수 선언식과 변수 선언을 hoisting
var sum;
function sumAllNumbers(){
  ...
}
var i;

// #2 - 변수 대입 및 할당
sum = 5;
sum = sum + i;
i = 10;

함수 선언식과 함수 표현식

// 함수 선언식(function statement)
function sum() {
  return 10 + 20;
}
// 함수 표현식(function expression)
var sum = function() {
  return 10 + 20;
}

ES6

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

특징

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

• 블록 단위 { }로 변수의 범위가 제한
• const : 한번 선언한 값에 대해서 변경할 수 없음(상수 개념). 단, 객체 또는 배열로 선언했을 때는 객체의 속성(property)과 배열의 요소(element)를 변경할 수 있다.
• 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
  }
}

Arrow Function - 화살표 함수

• 함수를 정의할 때 function이라는 키워드를 사용하지 않고 =>로 대체
• 흔히 사용하는 콜백 함수의 문법을 간결화

// ES5 함수 정의 방식
var sum = function(a, b) {
  return a + b;
}

// ES6 함수 정의 방식
var sum = (a, b) => {
  return a + b;
}

sum(10, 20);

Enhanced Object Literals - 향상된 객체 리터럴

• 객체의 속성을 메서드로 사용할 때 function예약어를 생략하고 생성 가능

var dictionary = {
  word: 100,
  // ES5
  lookup: function() {
    console.log("find words");
  },
  // ES6
  lookup() {
    console.log("find words");
  }
};

• 객체의 속성명과 값 명이 동일할 때 아래와 같이 축약 가능

var figures = 10;
var dictionary = {
  // figures: figures,
  figures
}

Modules - 자바스크립트 모듈화 방법

• 자바스크립트 모듈 로더 라이브러리(AMD, Commons JS)기능을 js 언어 자체에서 지원
• 호출되기 전까지는 코드 실행과 동작을 하지 않는 특징이 있음

// libs/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

// main.js
import {sum} from 'libs/math.js';
sum(1, 2);

• Vue.js 에서 마주칠 default export

// default export는 1개만 사용 가능

// util.js
export default function(x) {
  return console.log(x);
}

// main.js
import util from 'util.js';
console.log(util);  // function (x) { return console.log(x); }
util("hi");

// app.js
import log from 'util.js';
console.log(log);
log("hi");

※ export const 와 export default 차이

// #1. const 사용
// sample.js
export const sample = new Vue();

// App.vue
import { sample } from './sample.js';

// #2. default 사용
// sample.js
export default new Vue();

// App.vue
import Sample from './sample.js';

Babel

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

Transpile

하나의 프로그래밍 언어로 작성된 프로그램의 소스 코드를 비슷한 수준의 추상화(Abstraction)를 가진 다른 프로그래밍 언어로 변환하는 것