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
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 = 255 multiplied 2 times
43 indicates 4 * 4 * 4 = 644 multiplied 3 times
25 indicates 2 * 2 * 2 * 2 * 2 = 322 multiplied 5 times
Now in JavaScript, Exponentiation done using Math.pow(b,n)
function.
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