ES6 문법

ES6 란?

ECMAScript 표준의 가장 최신버전으로 ECMAScript 2015로도 알려져 있다.(2015년 6월 '6번째' 표준안 확정으로 ES6로 불림)

• 이전 JS와 역호환 가능
• 새로운 기능 추가 - class, extends와 같은 새로운 키워드를 통해 서브클래스 작업을 한층 더 업그레이드 시켜줬다.

단, 호환성 문제가 있어서 사용 시, 유의해야할 점들이 있다. → the ES6 compatibility table

ES6 문법

1. Destructuring

1) with objects

// ES5
var user = {
  first : 'Steve',
  last : 'Lone',
  age : 30
};

var first = user.first;
var last = user.last;

first; // 'Steve'

// ES6
var user = {
  first : 'Steve',
  last : 'Lone',
  age : 30
};

var {first,last} = user;

first; // 'Steve'

---

// ES5
var user = {
  first : 'Steve',
  last : 'Lone',
  age : 30
};

var fullName = function(name){
  var first = name.first;
  var last = name.last;  
  
  return `Fullname is ${first} ${last}`;
}

fullName(user); // "Fullname is Steve Lone"

// ES6
var user = {
  first : 'Steve',
  last : 'Lone',
  age : 30
};

var fullName = ({first,last}) => `Fullname is ${first} ${last}`;

fullName(user); // 'Steve'

2) with Arrays

//ES5
var arr = [1,2,3,4];

var a = arr[0];
var b = arr[1];
var c = arr[2];

a; // 1

//ES6
var arr = [1,2,3,4];

var [a, b, c] = arr;

a; // 1

---

//ES5 
var arr = [1,2,3,4];

var sumToTwo = function (arr){
  var a = arr[0];
  var b = arr[1];
  
  return a+b;
}

sumToTwo(arr); // 3

//ES6 함수 매개변수 할당
var arr = [1,2,3,4];

var sumToTwo = ([a,b]) => a+b;

sumToTwo(arr); // 3

2. Spread Operator

//ES5
function someFunction(a,b,c,d){
  return a+b+c+d;
}
var args = [1, 2, 3, 4]

someFunction.apply(null, args); // 10

//ES6
function someFunction(a,b,c,d){
  return a+b+c+d;
}
var args = [1, 2, 3, 4]

someFunction(...args); // 10

3. Reset Parameters

//ES5
function multiplyByNum (x){
  let nums = Array.prototype.slice.call(x,0);
  return nums;
};
//ES6
function multiplyByNum (x, ...nums){
  return nums;
};

5. Default Parameters & Template Literals

//ES5
var defalutAddress = function (city, state, country) {
  country = country === undefined ? 'USA' : country; 
  return city + ',' + state.toUpperCase() + ',' + country;
};
defalutAddress('Okaland', 'CA');
//"Okaland,CA,USA"
defalutAddress('Calgary', 'AB', 'Cananda');
//"Calgary,AB,Cananda"
//ES6
var defalutAddress = function (city, state, country='USA') { //defalut Parameter
  return `${city}, ${state.toUpperCase()}, ${country}`; // Template Literals
};
defalutAddress('Okaland', 'CA');
//"Okaland,CA,USA"
defalutAddress('Calgary', 'AB', 'Cananda');
//"Calgary,AB,Cananda"

---

//Template Literals : Multiple Lines - ES5
var html = [
  '<div>',
  '  <span>',
      message,
  '  </span>',
  '</div>'
  ].join("/n");
//Template Literals : Multiple Lines - ES6
var html = 
  `<div>
	<span>
      ${message}
    </span>
 </div>`;

6. Arrow Functions

//ES5
var sumValues = function(values) {
  return values.map(function(value) {
    return value * 2 });
}
sumValues([2,3,4]) // [4, 6, 8]
// ES6
var sumValues = function(values) {
  return values.map( value => value * 2 );
}le
//also
var sumValues = values => values.map( value => value * 2 );

7. for..of loop

//ES5
var string = 'hello world';
for(var j=0; j < string.length; j++){
  console.log(string[j]);
}
//ES6
for(var letter of 'hello world'){
	console.log(letter);
}

---

//ES5
let arr = ['banana','apple'];
for(let i=0; i < arr.length; i++){
  console.log(arr[i]);
}
//ES6
for(var ele of arr){
	console.log(ele);
}

---

etc

• class/subclassing
• Set, Map
• bulit-in Promises
• bulit-in modules system

---

• Babel REPL 을 통해서 문법 교정이나 이전 버전을 볼 수 있다.(ES6 → ES5)
  MDN 사용서