JavaScript: A Journey to the valley of ES6

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

  1. The client request is received by the server.
  2. The server checks for a local copy of the file requested. Though, this check has a cost, it is still extremely lower than the cost of computing a massive database check or generating content.
  3. If the local resource exists, the server responds with its resource URI. Otherwise, the request is processed normally.

Hybrid Caching

  1. A client makes a request
  2. It first checks for a local copy. If the copy doesn’t exist, it contacts the server with a request for this content.
  3. On the server side, the server will then check for its own local copy,
  4. If a copy exists, it will serve it. Or, it will generate a new one if the copy does not exist.

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Muhammad Rabiul Alam

Muhammad Rabiul Alam

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.