ES 2015(ES 6) Syntax

es2015.js

// Differences of ES5 and ES2015(formerly known as ES6)
//====================================================
// ES5
var braveNewWorld = function( world ) {
  console.log( "Welcome to" + world )
};

// ES2015: Using Arrow Functions, let, template strings
let braveNewWorld = ( world ) => {
  console.log(`Welcome to ${world}`);
}

[1,2].map(x => x + 2) // [3, 4]
[1,2].map((x) => (x + 2)) // [3, 4]
[1,2].map((x) => { return x + 2 })  // [3, 4]
[1,2].map((x) => { (return x + 2) })  // SyntaxError: Unexpected token return
[1,2].map((x) => (x + 2)) // [3, 4]
[1,2].map((x) => return (x + 2)) // SyntaxError: Unexpected token return

//====================================================
// ES2015: Using Expression bodies, 
// single arguments no need the parenthesis
const braveNewWorld = world => console.log(`Welcome to ${world}`);

// ES2015: Using Expression bodies
const addNumbers = (n1, n2) => n1 + n2;

// ES2015: Using Statement bodies
const addNumbers = (n1, n2) => {
  return n1 + n2;
}

//====================================================
// In ES5
var arr = [1, 2, 3];
var squares = arr.map(function (x) { return x * x });

// In ES2015
const arr = [1, 2, 3];
const squares = arr.map(x => x * x);
//====================================================


// ES5 from IIFEs to block
(function () {
    var tmp = ···;
    ···
}());
console.log(tmp); // ReferenceError

// in ES2015
{
  let tmp = ···;
  ···
}
console.log(tmp); // ReferenceError
//====================================================
// From for to forEach() to for-of
var arr = ['a', 'b', 'c'];
for (var i=0; i<arr.length; i++) {
  var elem = arr[i];
  console.log(elem);
}
// In ES5
arr.forEach(function (elem) {
  console.log(elem);
});

// In ES2015
const arr = ['a', 'b', 'c'];
for (const elem of arr) {
  console.log(elem);
}
//====================================================
// Handling parameter default values
// In ES5
function foo(x, y) {
  x = x || 0;
  y = y || 0;
  ···
}
// In ES6
function foo(x=0, y=0) {
 ···
}

//====================================================
// Destructuring
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

// Combine arrays
var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];
console.log(arr2); // ["one", "two", "three", "four", "five"]

var arr1 = ['a', 'b'];
var arr2 = ['c', 'd'];
arr1.push(...arr2) // Adds arr2 items to end of array
console.log(arr1); // ["a", "b", "c", "d"]

var arr1 = ['a', 'b'];
var arr2 = ['c', 'd'];
arr1.unshift(...arr2) //Adds arr2 items to beginning of array
console.log(arr1); // ["c", "d", "a", "b", ]


const obj = { first: 'Jane', last: 'Doe' };
const {first: fvar, last: lvar} = obj
// console.log(fvar) ==> "Jane"
// console.log(lvar) ==> "Doe"




//====================================================
References:
http://exploringjs.com/es6/index.html
https://gist.github.com/mikaelbr/9900818