ES6 Tutorial for Beginners

ES6 full form is ECMAScript, the updated version of JavaScript that includes dozens of new features; in this ES6 tutorial I will try to explain some of the new features with example

Before you start this ECMAScript tutorial I recommend you to go through Basic JavaScript Tutorial.

You should have good understanding of JavaScript coding before exploring advanced features of ES6.

Eventually this will help you get started with NodeJs (server side JavaScript programming).

ES6 is basically advance version of javascript also known as ecmascript 6.
Here we learn following new things about javascript

• Default parameter values
• JavaScript const
• JavaScript let
• Exponentiation (**)
• ES6 Arrow Functions
• Object.entries | Object.fromEntries
• JavaScript Class and Inheritance
• ES6 Modules with Example

How to learn ES6?

Now before I give some examples of ES6 script syntax, I want to make sure you have some script editor installed on your local system, because new JavaScript 6 syntax may not be supported in your regular html editor, I recommend you to Install Visual Studio Code editor for Nude.Js where you can write ES6 syntax or you can use ES6 Console

Now like many other programming language we can assign default parameter value in JavaScript too, In this ES6 Example we assign default value of unitprice is 10, so if no unitprice is assigned the default value will be considered

function cacuatePrice(quantity , unitprice=10 )
{
    return quantity * unitprice;
}
 

We can call the function with only mandatory parameter also, it will take the default value of optional parameter, we also can override the default value by providing new value at the time of calling.

cacuatePrice(50,5);
cacuatePrice(50);

Now you can declare constraint in JavaScript with const keyword, this was not supported in earlier JavaScript.

const MAX_NO_ALLOWED =10;
console.log(MAX_NO_ALLOWED);

Note: any variable declared with const, must be initialised at the time of declaration, otherwise it will throw an error.

var p; //ok
let p1; //ok
const p2; // will throw exception 

Now if you see the above code sample declaring variable with var or let will work fine even if you don’t initialise any value at the time of declaring variable, but if you are using const keyword to declare a variable, then you must assign some value , else it will throw “Missing initializer in const declaration” exception.

Now, to declare a variable we can write let instead of var.

But that doesn't mean we can’t write var , we still can write var to declare a variable, but there is a interesting difference between var and let

Any variable declared with var will be function-scoped not block-scoped, but any variable declared with let will always be block-scoped

Now let's look at the example below.

var calculateEMI = function(principal, years, rate) {
   
if (rate) {
    var monthlyRate = rate / 100 / 12;
}
    
var monthlyEMI = principal * monthlyRate / (1 - (Math.pow(1/(1 + monthlyRate), years * 12)));
	
    return monthlyEMI;
};
console.log(calculateEMI(11,10,5.6));

Now in above example var monthlyRate is written within "if" clause, but still can access outside the "if" clause, and the calculation done correctly.

Now if you write the same example with let just replace var with let.

let calculateEMI = function(principal, years, rate) {
   
if (rate) {
    let monthlyRate = rate / 100 / 12;
}
    
let monthlyEMI = principal * monthlyRate / (1 - (Math.pow(1/(1 + monthlyRate), years * 12)));
	
    return monthlyEMI;
};
console.log(calculateEMI(11,10,5.6));

when use let, it will throw an exception ("monthlyRate is not defined") , because let monthlyRate won't be accessible outside the "if" clause

We need to understand what is exponent, then it will be easy to understand how exponentiation done in JavaScript.

bn , b indicates Base and n indicates number of time base multiplied

52 indicates   5 * 5 = 25

43 indicates   4 * 4 * 4 = 64

25 indicates   2 * 2 * 2 * 2 * 2 = 32

Now in JavaScript, Exponentiation done using Math.pow(b,n) function.

• b is base: the number to be raised.
• n is exponent: the number of times the value to be raised.

So, in javaScript, if we want to calculate 52, we simply need to write following function

Math.pow(5,2);

You can use negative number in base or exponent; here are some examples with result.

console.log(Math.pow(-210,5)); // -408410100000
console.log(Math.pow(-2.10,-30)); // 2.1548704119013448e-10
console.log(Math.pow(-.10,2.1)); // NaN
console.log(Math.pow(100,2.1)); // 15848.93192461114

Arrow functions were introduced in ES6, Using Arrow functions we can write shorter function syntax.

welcomeMessage = () => {
return "Welcome to advanced JavaScript tutorial";
}
console.log(welcomeMessage());

Even you can make the above function shorter by removing the return statement

welcomeMessage = () => "Welcome to advanced JavaScript tutorial";
console.log(welcomeMessage());

Here is the example of arrow function with parameters

welcomeMessage = (persoName) => "Welcome "+ persoName +",  enjoy ES tutorial";
console.log(welcomeMessage("Anu"));

This new feature is available in ES2020, Now in JavaScript we can transform an object to array, there is a built-in method called Object.entries(obj), the following example will help you to understand better.

in example, we are getting the array from an object variable.

let objFruit = {Apple: 1, Orange: 2, Banana: 3, Berry:4};

console.log(Object.entries(objFruit));

// [ [ 'Apple', 1 ], [ 'Orange', 2 ], [ 'Banana', 3 ], [ 'Berry', 4 ] ]

Now, think if you want just opposite, that means from array to object! there is a built-in method called Object.fromEntries(obj), which will return an object from an array.

let arrayFruit =[ [ 'Apple', 1 ], [ 'Orange', 2 ], [ 'Banana', 3 ], [ 'Berry', 4 ] ];

console.log(Object.fromEntries(arrayFruit));   

//{ Apple: 1, Orange: 2, Banana: 3, Berry: 4 }

Now in advanced JavaScript (ES6) we can create class and use objected oriented features like inheritance by using keywords extends and super.

Please take a look at JavaScript Class Example as per ES6 standard.

Modules are basically files, in ES6, we import and export modules. Function, variables etc. Nothing is accessible outside the file by default, unless exported explicitly. Take a look at ES6 Modules with Example