JavaScript: A Journey to the valley of ES6

Data Types, Event Loop, Try…Catch, Coding Style, Comment, Caching, Arrow Function, Block Binding, Spread Operator, Function Default Parameter

Data Types

Primitive Types

Objects and Functions

Event Loop

Fig.1: Event Loop Illustration

Error handling with “try…catch…finally”

let json = '{ "age": 30 }'; // incomplete data 
try {
// try to execute the code
let user = JSON.parse(json);
if (!user.name) {
throw new SyntaxError("Incomplete data: no name");
}
name = 'rabi'; // unexpected error <-- forgot to put "let" before name variable, this error will be rethrown
alert( user.name );
}
catch (err) {
// handle errors
if (err instanceof SyntaxError) {
alert( "JSON Error: " + err.message );
}
else {
throw err; // rethrow (*)
}
}
finally {
// execute always
alert( 'finally' );
}

Coding Style

Curly braces

Fig.2: Good Coding Style

Line Length

// backtick quotes ` allow to split the string into multiple lines let str = `   
ECMA International's TC39 is a group of JavaScript developers,
implementers, academics, etc collaborating with the community
to maintain and evolve the definition of JavaScript.
`;
// for 'if' statements
if ( id === 123 &&
moonPhase === 'Waning Gibbous' &&
zodiacSign === 'Libra' ) {
letTheSorceryBegin();
}

Spaces & Indents

function pow(x, n) {   
let result = 1;
// <--
for (let i = 0; i < n; i++) {
result *= x;
}
// <-- return result;
}

Semicolons

Nesting Level

function pow(x, n) {   
if (n < 0) {
alert("Negative 'n' not supported");
} else {
let result = 1;
for (let i = 0; i < n; i++) {
result *= x;
}
return result;
}
}
function pow(x, n) {   
if (n < 0) {
alert("Negative 'n' not supported");
return;
}

let result = 1;

for (let i = 0; i < n; i++) {
result *= x;
}

return result;
}

Function Placement

// the code which uses the functions 
let elem = createElement();
setHandler(elem);
walkAround();
// --- helper functions ---
function createElement() {
...
}

Comments

/**  
* Returns x raised to the n-th power.
*
* @param {number} x The number to raise.
* @param {number} n The power, must be a natural number.
* @return {number} x raised to the n-th power.
*/
function pow(x, n) { ... }

Caching

Client Caching

Server Caching

Hybrid Caching

Block Bindings

Spread Operator

Syntax

// pass all elements of iterableObj as arguments to function myFuncmyFunc(...iterableObj);
// combine two arrays by inserting all elements from iterableObj[...iterableObj, '4', 'five', 6];
// pass all key:value pairs from an objectlet objClone = { ...obj };

Arrow functions

Before:

hello = function() {
return “Hello World!”;
}

With Arrow Function:

hello = () => {
return “Hello World!”;
}

Arrow Function With Parameters and a single statement:

hello = (val) => “Hello “ + val;

Function Default Parameter

function getInfo (name, year = 2018, color = 'blue') {   
// function body here...
}

References

I am a Front-End Developer. I love to work with JavaScript, ReactJS, NodeJS, React Native and other front-end and/or JavaScript based technologies.