ECMAScript (ES6) Features with Example (Part -1)

 ECMAScript (ES6) Features with Example (Part -1)

ECMAScript (ES6) Features Part 1 By Visionfortech

In this article we will see some of the fantastic features of ES6 with examples so that it will be easy to understand each and every features.

In this article we will discuss about some major features about ECMAScript (ES6). Since there are lot many features of into ES6 We will cover few of them in part 1 and rest of them we will cover it in out next article. So let' start with some coolest features of ES6 now.

Below are the list of ES6 Features.

ES6 FEATURES

let vs var
Declaring Variable as Constant
Template Literals
Spread Operator
Function default parameters
Arrow functions
Shorthand Properties
This keyword
Destructuring
Class Inheritance
Promise
Define and Use of Promise
Promise Chaining
Error Handling into Promise Chain

In this article we are going to discuss about let vs var, Declaring Variable as Constant, Template Literals, Spread Operator, Function default parameters, Arrow functions features of ES6

1. Let vs Var

Var : 

var visionfortech_x = 5;
if(visionfortech_x){
    var visionfortech_x = 10
}
console.log(visionfortech_x )  // The output will be 10

Let :
 
var visionfortech_x = 5;
if(visionfortech_x){
    let visionfortech_x = 10
}
console.log(visionfortech_x ) // The output will be 5

for detail understanding please visit let vs var by visionfortech or Global VS local Variable into JS

2. Declaring variable as Constant

Const:

1) const car = "Honda";
    car = "BMW";
    console.log(car) // It will give you an Error

2) const cars = ['Honda', 'BMW'];
    cars.push('Ferrari');
    console.log(cars); // Output will be ['Honda','BMW','Ferrari']

3) const car = {
        brand: 'BMW',
        doors: 2,
        engine: 3.0
    }
    car.brand = "Ferrari";
    console.log(car); // Output will be {brand: 'Ferrari',doors: 2,engine: 3.0}

3. Template Literals

1) let name = "Pratik";
    let message = `Hello Mr. ${name}`;
    console.log(message ) // Hello Mr. Pratik

2) let number1 = 10;
    let number2 = 20;
    let results = `Total is $${number1 + number2}`;
    console.log(results); // Total is 30

4. Spread Operator

var topics= ["Javascript", "Angular", "VueJS"];
var author_topics = ["visionfortech", "JS", "MongoDB"];
var author_likes= ["Mongodb Certifications",...topics, ...author_topics];
console.log(...author_likes) 

Above will print below thing on browser console.
Mongodb Certifications,Javascript,Angular,VueJS,visionfortech,js,MongoDB

5. Function Default Parameter

function website(sitename="Visionfortech", sitetype="Blog"){
    console.log(car1, car2);
}
console.log(website())

Above will print below thing on browser console.
Visionfortech Blog

function website(sitename="Visionfortech", sitetype="Blog"){
    console.log(car1, car2);
}
console.log(website("Visionfortech Javascript"))

Above will print below thing on browser console.
Visionfortech Javascript Blog

6. Arrow Function

var cal = (number1, numbe2) => number1 + numbe2;
console.log(cal(3, 12));

Above will print below thing on browser console.
15

For More ES6 features stay tuned to visionfortech

Hope you enjoyed the article and it got added something new to your knowledge.

To Learn more about Javascript Javascript Treasure.

To add something new every-time into your mind stay tuned to visionfortech.