ES6 정리

1. ES6

What is ES6?

ES6는 ECMAScript6의 약자로서 자바스크립트의 버전의 이름입니다. ES6는 JavaScript에 풍부한 새로운 기능을 도입하는 동시에 이전 JavaScript와 완전히 역호환됩니다. 크롬과 같은 가장 인기 있는 웹 브라우저들 조차도 모든 ES6 기능을 이용하기 전에 해야 할 일이 엄청나지만, 많은 개발자들이 ES6를 많이 사용하고 있고 향후 몇 년안에 ES6를 더욱 많이 볼 수 있을거라 기대가 됩니다.

ES6는 아직 보편적으로 웹브라우저에서 사용을 하고 있지 않습니다. 그렇기 때문에 호환성에 문제가 여럿있기 때문에 ES6가 어디에서 호환 되는지 잘 알아야 할 필요가 있습니다.

ES5 syntax 구현을 ES6에서는 어떤식으로 하는지 포스팅을 해보겠습니다.

2. Destructuring(구조 분해 할당)

먼저 구조 분해 할당이란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트의 표현식입니다.

이 표현식을 ES5와 ES6에서 어떤식으로 표현되는지 보겠습니다.

1) 객체 구조 분해 할당

ES5

var user = {
  first:'Benji',
  last:'Marinacci',
  age:32
};

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

first; // -> 'Benji'

ES6

var user = {
  first: 'Benji',
  last:'Marinacci'
  age:32
};

var {first,last} = user;

first; // -> 'Benji'

ES5

var user = {
  first:'Benji',
  last:'Marinacci',
  age:32
};

var greet = function (person) {
  var first = person.first;
  var last = person.last;
  
  console.log('Hi,' + first + '' + last);
};

greet(user); // 'Hi, Benji Marinacci'

ES6

var user = {
  first: 'Benji',
  last:'Marinacci'
  age:32
};

var greet = fucntion({first,last}) {
  
  console.log('Hi,' + first + '' + last);
};

greet(user); // -> 'Hi, Benji Marinacci'

2) 배열 구조 분해 할당

ES5

var numbers = [1,2,3,4];

var uno = numbers[0];
var dos = numbers[1];
var tres = numbers[2];

uno; // -> 1

ES6

var numbers = [1,2,3,4];

var [uno,dos,tres] = numbers;

uno // -> 1

변수의 이름이 키와 매칭이 된다.

ES5

var number = [1,2,3,4];

var countToTwo = function (numbers) {
  var uno = numbers[0];
  var dos = numbers[1];
  
  console.log(uno + ',' + dos);
};

countToTwo(numbers); // -> 1,2

ES6

var number = [1,2,3,4];

var countToTwo = function ([uno,dos]) {
  
  console.log(uno + ',' + dos);
};

countToTwo(numbers); // -> 1,2

3.Spread Operator

ES5

function someFunction(a,b,c,d){
  // do something with a,b,c and d
};

var args = [1,2,4,16];

someFunction.apply(null,args);

ES6

function someFunction(a,b,c,d){
  // do something with a,b,c and d
};

var args = [1,2,4,16];

someFunction(...args);

4. Rest Parameters

ES5

var multiplyByNum = funciton (x) {
  var nums = Array.prototype.slice.call(arguments,1);
  nums.forEach(function(num) {
    console.log(x * num);
  });
};

ES6

var multiplyByNum = funciton (x,...nums) {
 nums.forEach(function(num) {
   console.log(x * num);
  });
};

5.Default parameters

ES5

var generateAddress = function (city,state,country) {
country = country === undefined ? 'USA' : country;
return city + ',' + state.to.UpperCase() + ',' + country;
};

generateAddress ('Oakland','CA'); // -> 'Oakland, CA, USA'
generateAddress ('Calgary','AB', 'Canada'); // -> 'Calgary, AB, Canada'

ES6

var generateAddress = function (city,state,country = 'USA') {
return city + ',' + state.to.UpperCase() + ',' + country;
};

generateAddress ('Oakland','CA'); // -> 'Oakland, CA, USA'
generateAddress ('Calgary','AB', 'Canada'); // -> 'Calgary, AB, Canada'

6.Template Literals

ES5

var generateAddress = function (city, state, country) {
  country = country === undefined ? 'USA' : country;
  return city + ',' + state.toUpperCase() + ',' + country;
};

ES6

var generateAddress = function (city, state, country ='USA') {
  return city + ',' + state.toUpperCase() + ',' + country;
};

ES6

var generateAddress = function (city, state, country ='USA') {
  return `${city},${state.toUpperCase()},${country}`;
};

ES6에서 backticks를 사용하여 표현이 가능합니다.

7. Template Literals (Multiple Lines)

ES5

var html = [
  '<div>',
  '	<span>',
  message,
  '	</span>',
  '</div>'
  ].join('\n');

ES6

var html = 
    `<div>
		<span>
			${message}
		</span>
	</div>`;

8. Allow function(화살표 함수)

Allow Function Expressions

ES5

var multiplier = fucntion(x,y) {
  return x * y;
}

ES6

var multiplier(x,y) => {
  return x * y;
} 

// also works;
var multiplier = (x,y)=> x * y;

ES5

var doubler = function(num) {
  return 2 * num;
}

ES6

var doubler = num => 2 *num;

ES5

var doubleValues = function(values) {
  return values.map(functiion (values){
    return values *2 });
};

ES6

var doubler = function(values) {
  return values.map(value => value * 2);
};

// also works;
var doubleValues = values => values.map(value => value * 2);

9. Allow function & keyword this

ES5

var Delay = function(delay, reaction){
  this.delay = delay;
  this.reaction = reaction;
};

Delay.Prototype.haveReaction = function() {
  
  setTimeout(function(){
    console.log(this.reaction)}.bind(this); ,this.delay);
  };

ES6

var Delay = function(delay,reaction){
  this.delay = delay;
  this.reaction = reaction;
};

Delay.Prototype.haveReaction = function (){
  setTimeout(() => {console.log(this.reaciton)};, this.delay);
};

10. for ... of Loop

ES5

var nums = [1,4,6,7]

for(var i = 0 ; i < nums.length; i++) {
  console.log(nums[i]);
}

var string = 'hello world';

for(var j =0 ; j < string.length; j++) {
  console.log(string[i]);
}

ES6

var nums = [1,4,6,7]

for(var val of nums) {
  console.log(val);
}

for(var letter of 'hello world') {
  console.log(letter);
}

ES6버전에서는 array,set,Maps등에서 for...of 구문을 통한 value 사용이 가능합니다.