Free Web Development Online Tutorials, Learn to Code
Learn es6 JavaScript new features, ES6 Modules Class, Ecmascript JavaScript Tutorial, es6 arrow function

ES6 Tutorial, ES6 JavaScript Features

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.

What is ES6 ?

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

ES6 Editor

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

Default parameter values in JavaScript

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.

cacuatePrice(50);

const keyword in JavaScript ES6

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.

ES6 (ECMAScript) new keyword let

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

Exponentiation in JavaScript Example

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
5 multiplied 2 times
43 indicates   4 * 4 * 4 = 64
4 multiplied 3 times
25 indicates   2 * 2 * 2 * 2 * 2 = 32
2 multiplied 5 times

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 in JavaScript

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"));

JavaScript Class and Inheritance

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.

ES6 Modules with Example

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


Comment
Name
Email
Website
Subscribe
 
EcmaScript Syntax
Learn ES6