ES6

Work in progress

ES6 also know as ECMAScript 6 or ECMAScript 2015 (European Computer Manufacturers Association (ECMA)) is the move to make javascript more awesome and a better programming language. A lot of it is a syntactical sugar but there are some useful good additions to this language which we will see in this post.

This video is from Brendan Eich ( the creator of Javascript)

Let & Const:

let and const are introduced to ES6 for a blocked scope. For example var which is used very frequently in javascript is a function scope. All the declaration within the function get hoisted to the top of the function which can cause all sorts of issue if not used correctly.

Let and Const solve this problem. Both can be used within block scope. That means any time you have set a curly braces you have a block scope.

Demo

function hideReplies(topicId){

let previewText;

if(topicId){
 const TEXT_SEPARATOR = '%%';
 previewText = TEXT_SEPARATOR+"Topid id "+topicId; 
 }
 //console.log(TEXT_SEPARATOR);// This will throw an reference error
 console.log(previewText);// %%test%%
}
hideReplies(42);


Function defaults:

Function defaults now allow you set a default value if the function is expecting a parameter and if that parameter is not send.

Example:

function loadProfiles(userNames){
 let namesLength = userNames.length;
 console.log("length "+userNames.length)
 
}

loadProfiles()//Throw TypeError: Cannot read property 'length' of undefined

Now you can do like this:

function loadProfiles(userNames =[]){
 let namesLength = userNames.length;
 console.log("length "+userNames.length)
 
}

loadProfiles(["a","b"]);//length 2
loadProfiles()// length 0

Rest and Spread Operators:

Spread operator is used where multiple arguments are passed  for function calls.

Example: Demo

var prices = [12, 20, 18];
var maxPrice = Math.max(...prices); 
console.log(maxPrice); //20

Rest parameter syntax allows us to pass an indefinite number of arguments as an array.

Demo

var showCategories = function (productId, ...categories) {
categories.forEach(function(elements){
console.log(elements);
});
};
showCategories(123, 'Sam', 'Adams','Beer');

Object Literal Extension:

Object literal is a comma-separated list of name-value pairs wrapped in curly braces. Object literals encapsulate data, enclosing it in a tidy package. This minimizes the use of global variables which can cause problems when combining code.

Demo

var price = 5.99,
 quantity = 10;
var productView = {
 price: 7.99,
 quantity: 1,
 calculateValue() {
 return this.price * this.quantity;
 }
};
console.log(productView.calculateValue());//7.99

for … of Loops

This is new syntax added similar to for ..in. But  for … of Loops works for everything : Array’s, Strings,Map, Set, WeakMap, and WeakSet.

For example:

Demo

var codes = "ABCDF";
var count = 0;
for (var code of codes) {
console.log(code);

}

Template Literals

Template literals are string literals allowing embedded expressions. It also allows multi-line strings and string interpolation features with them. Note that you need to use back-tick (` `) for enclosing the string.

Demo

'use strict';
let invoiceNum = '1350';
console.log(`Invoice Number: ${invoiceNum}`);//1350

let message = `A
B
C`;
console.log(message);

Destructuring

The destructuring syntax allows to extract data from arrays or objects into distinct variables.

Demo

'use strict';
let salary = ['20000', '50000', '75000']; 
let [ low, average, high ] = salary; 
console.log(low);//20000
console.log(average);//50000
console.log(high);//75000

let [ small, ...remaining ] = salary; 
console.log(remaining);//["50000","75000"]

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s