ES2015 (ES6) Template Strings

Example: https://jsfiddle.net/ehdgpvyb/

ES2015 provides a better way to use variables inside strings.


function exampleJS5( name , age ) {
console.log("Hello " + name + ", you are " + age + "!");
}

function exampleJS6( name , age ) {
console.log(`Hello ${name}, you are ${age}!`);
}

exampleJS5('Bob', 20);
//Hello Bob, you are 20!
exampleJS6('Bob', 20);
//Hello Bob, you are 20!

Advertisements

ES2015 (Es6) Default Parameters Syntax

Example: https://jsfiddle.net/pkygohf3/

ES2015 provides a good way to define default parameters in functions.


function example( x = 2 ) {
 console.log(x);
}
example(5);
// 5
example();
// 2

In this example, if the argument of ‘x’ is not passed to the function, it falls back to the default value of ‘2’.


function objExample1( x ) {
 console.log(x.length);
}
function objExample2( x = [] ) {
 console.log(x.length);
}
objExample1();
// Cannot read property 'length' of undefined
objExample1(['test']);
// 1
objExample2();
// 0
objExample2(['test']);
// 1

You can see here that the built in Array.length() function is failing in objExample1 as it trying to call it on ‘undefined’ argument. objExample2 fixes this by using the ES2015 default syntax as the function parameter.

This is more powerful with default objects:


const $initSetup = {
width: 400,
height: 200,
background: 'blue'
}

function defaultTest({
width = $initSetup.width,
height = $initSetup.height,
background = $initSetup.background
} = $initSetup) {

console.log(`'${width} x ${height}' with background: ${background}.`);

};

let $userSetup = {
width: 250,
background: 'red'
}

defaultTest();
//'400 x 200' with background: blue.
defaultTest($userSetup);
//'250 x 200' with background: red.