New features in Javascript ES2015 (ES6)

Arrow Functions

var dostuff = function( arg ) { do stuff }; can be written as var dostuff = ( arg ) => { do stuff };

Let & Const

We nolonger use var, we now use let. Meanwhile, const is used for constants that can NEVER be changed.

Template Strings

Rejoice, it is now much easier to concatenate strings and variables!

//Old form
console.log("Hello " + name + ", the total is " + ( a + b ) + ".");
//ES2015 (ES6) Javascript, Template Strings
console.log(`Hello ${name}, the total is ${ a + b }.`);

Also, line breaks are now recognized and outputted!

//Old form
var msg = "Line one\nLine two\nLine three";
//Now
let msg = `Line one
Line two
Line three`;

Statement and Expression Bodies

There are different formats for writing functions. Long form statement bodies are for multiline functions, while Expression bodies are a shorter abreviated format for single line functions.

Old form, statement body: var add = function add(a,b){ return a + b; };

Arrow Function, Statement: var add = (a,b) => { return a + b; };

Arrow Function, Expression: var add = (a,b) => a + b;

Some more examples

//Previous Javascript
var braveNewWorld = function( world ) {
    console.log( "Welcome to" + world ); 
};
var add = function add(a, b){
    return a + b;
};

//ES2015 (ES6) Javascript, Statement Bodies
const braveNewWorld = ( world ) => {
    console.log( `Welcome to ${world}` );
};
const add = ( a, b ) => {
    return a + b;
};

//ES2015 (ES6) Javascript, Expression Bodies
const braveNewWorld = world => console.log( `Welcome to ${world}` );
const add = ( a, b ) => a + b;

Spread Operator ...

The Spread operator will expand an array in place. For instance this makes it very easy to pass an array of variables into a function that expects a list of arguments. For example: var a = [1, 2, 3, 0]; would need to be converted into a list for Math.max(). This could be done previously by using .apply and a null to expand the array: Math.max.apply(null,a); Now we can use the spread operator to expand the array: Math.max(...a);

//Previous Javascript
var arrayOfNumbers = [ 1, 5, 0, 234, 39 ];
var maxNum = Math.max.apply(null, arrayOfNumbers);

//ES2015 (ES6) Javascript, Spread Operator    
let arrayOfNumbers = [ 1, 5, 0, 234, 39 ];
const maxNum = Math.max(...arrayOfNumbers);

Using spread operator to concat

const numAr1 = [5,6,3,8];
const numAr2 = [11,24,53,99];
const concatArray = [...numAr1, ...numAr2];
console.log(concatArray); // [5, 6, 3, 8, 11, 24, 53, 99]

Rest Parameters

Just like the spread ... can be used to expand an array being passed to a function, it can also be used to create an array from arguments passed into a function!

//ES2015 (ES6) Javascript, Rest Parameters
const sum = function(...numbers) {
    return numbers.reduce((a,b) => a + b); 
};
sum(2,3,4,5,6,7); //results 27

//ES2015 (ES6) Javascript, Rest Parameters, Statement body format
const sum = (...numbers) => numbers.reduce((a,b) => a + b);
sum(2,3,4,5,6,7); //results 27

Another cool example, a function that accepts a multiplier as first arg and will multiply that by every other number given after it.

const multi = (multiplier, ...numbers) => {
    return numbers.map(n => n * multiplier);
}
multi(2,5,10,20); //results [10, 20, 40]

Default Paramaters

Default function paramaters are now supported, so if the variable is not provided, no problem.

//Previous Javascript
function doStuff(x) {
    if (!x) {
        var x = 1;
    }
    // Do stuff
}

//ES2016 (ES6) Javascript
function doStuff(x=1) {
    // Do stuff
}

Looping!

//Previous Javascript
var items = [ 3,9,5,6,2,1 ];
for (i=0; i<items.length; i++) {
    console.log(items[i]);
}

//ES2016 (ES6) Javascript
for (let i of items) {
    console.log(i);
}