var dostuff = function( arg ) { do stuff };
can be written as
var dostuff = ( arg ) => { do stuff };
We nolonger use var
, we now use let
. Meanwhile, const
is used for constants that can NEVER be changed.
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`;
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;
//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;
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]
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 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
}
//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);
}