• 참고 사이트
  • Babel

• const & let
• Arrow Function
• Enhanced Object Literals
• Modules

const & let

• 다른 언어와 통일성 부여
• 블록 단위로 변수 범위 제한
• const : 한번 선업한 값에 대해서 변경할 수 없음(상수)
• let : 한번 선언한 값에 대해서 다시 선언할 수 없음(똑같은 변수 명이 선언이 안됨.)

ES5

ES5특징 - 변수의 scope

• ES5는 블록 상관없이 스코프가 설정됨

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

ES5특징 - Hoisting

• 합수와 변수가 가장 위에 있는 것 처럼 인식
• 코드 순서 관계없이 '한수 선언식'과 '변수'를 위한 메모리 공간을 먼저 확보

/// function 선언문 (얘만 해당)
function sum() { return 10 + 20; }
// function 표현식
var sum = function{ return 10 + 20; }

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

ES6

ES6특징 - 변수의 scope

• {} 단위로 변수의 범위가 제한됨.

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

ES6특징 - 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]

화살표 함수(Arrow Function)

• 함수 정의시, function말고 => 사용
• 콜백함수 문법 간결화

var sum = function(a, b){ return a+b; }
var sum = (a, b) => { return a+b; }

향상된 객체 리터럴(Enhanced Object Literals)

• 객체의 속성을 메서드로 사용시, function 예약어 생략

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

• 객체의 속성명과 값 명이 동일시 축약 가능

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

Modules - 자스 모듈화

• java에서는 class파일로 다 나뉘어질수 있는 구조.
• ES5 까지는 자스 모듈 로더 라이브러리(AMD, Commons JS)기능이 언어자체에는 없었음(라이브러리를 불러와야 했음.)
• 자스 모듈 로더 라이브러리(AMD, Commons JS)기능을 js언어 자체에서 지원
• 호출되기 전(import)까지는 코드 실행과 동작을 하지 않음

//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는 1개의 파일에서 1개만 export 가능.

// 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); 
//  function (x){ 
//  return console.log(x); 
// }
log("hi323");