Important Javascript ES6 Features

4c2be688efe4

In this blog, we will discuss the coolest new Javascript ES6 features. I will cover the one that you guys probably should know and things that you should use in your everyday javascript world. Almost all modern browsers support ES6.

Javascript ES6 Features

let keyword

We now no longer use the “var” keyword in most cases. Instead of var, we have now started using the “let” keyword. With “var” there are a lot of scope issues. In “var”, it wasn’t clear where we are allowed to access those variables. With “var” no one could follow the exact rule. With “let” the rules are very simple. Whenever we declare a variable with let then that variable is accessible from the same block within which variable was declared.

let temp=10;
function changeVaraibleTemp(){
let temp = 20;
return temp;
}
console.log(temp); //OUTPUT: 10
console.log(changeVaraibleTemp()); //OUTPUT: 20
console.log(temp) //OUTPUT: 10
javascript es6 features

In the above example, the temp variable declared inside changeVaraibleTemp() is only available inside curl braces. This is the reason when we try to print the temp variable, it prints the temp variable that is declared outside the function.

Block Level Scope: You can only access variables that are declared within Block(within curly Braces). Block doesn’t need to be function always.

let temp=10;
{
let temp = 20;
console.log(temp); //OUTPUT: 20
}
console.log(temp); //OUTPUT: 10

Arrow Function

This is a new way to write functions. You can exclude function keywords while declaring a function.

let findSum=(a,b)=>a+b;
console.log(findSum(10,20)); //OUTPUT: 30

What is the difference between arrow function and regular function?

  1. Arrow functions are always anonymous functions compared to regular functions which can be named as well as an anonymous function.
  2. Regular function with name can be hoisted. We can declare function in specific scope and call that function before its actual declation. With Arrow Function it is not possible.
  3. Arrow Function does not have own “this” so it this is automatically binds with the surrounding code’s context.

Template Literals

Template literals are literals delimited with backticks ( ` ), allowing embedded expressions called substitutions. It provides an easy way to interpolate variables inside strings. It gives more control over dynamic strings.

let website = "InfoHubBlog"
let str = "Welcome to "+website;
let newstr = `Welcome to ${website}`
console.log(str); //OUTPUT: Welcome to InfoHubBlog
console.log(newstr); //OUTPUT: Welcome to InfoHubBlog

Spread Operator

I have already covered Spread Operator in-depth in my early blog series. In Summary, It takes in an iterable (e.g an array) and expands it into individual elements. The spread operator is commonly used to make shallow copies of JS objects.

Classes

Classes are Blue Print for Creating Objects. It can be declared with the class keywords. Two main areas of the class definition are instance properties(name, age) and instance method(get info).

class Person{
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  getInfo(){
    return `${this.name} is of Age ${this.age}`;
  }
}

let person1 = new Person("Durgesh",25);
let person2 = new Person("Rajan",24);
console.log(person1.getInfo()); //OUTPUT: Durgesh is of Age 25
console.log(person2.getInfo()); //OUTPUT: Rajan is of Age 24

ES6 just made it a lot easier to use classes and create objects and make the syntax a whole lot cleaner.

Inheritance

Inheritance is a concept of inheriting properties from one class to another class. It is very useful since it avoids duplication. If the same functions are required in a different class then you can simply inherit that instead of writing code from scratch and creating code duplication. It helps in avoiding repeating ourselves.

class Person{
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  getInfo(){
    return `${this.name} is of Age ${this.age}`;
  }
}
class Programmer extends Person{
    constructor(name,age,language){
        super(name,age);
        this.language = language;
    }
    displayLanguage(){
        return `${this.name} works on ${this.language}`
    }
}
let programmer = new Programmer("Durgesh",25,"Javascript");
console.log(programmer.getInfo());  //OUTPUT: Durgesh is of Age 25
console.log(programmer.displayLanguage()); //OUTPUT: Durgesh works on Javascript

In the above example, you can see that in the Programmer class we don’t have getInfo() function but we have inherited the Person class in Programmer Class.

Generators

In JavaScript, a regular function is executed based on the run-to-completion model. It cannot pause midway and then continues from where it paused. For example:

function print(){
console.log("Not");
console.log("Pause");
}
print();
javascript es6 features

It will only exist from function when there is an error or function execution is completed. If you want to pause in a midway then it cannot be done.

If you want to give pause to the particular line then you can do it using generator function. For Example

function* print(){
    yield "Pause";
    yield "Successfull";
}
let val = print()
val.next(); //OUTPUT: {value: 'Pause', done: false}
val.next(); //OUTPUT: {value: 'Successfull', done: false}
val.next(); //OUTPUT: {value: undefined, done: true}
javascript es6 features

In the above code, the object returned the value of done as false since more lines are there to execute. If that line was the last line then done would have been true.

Hope you like our “Important Javascript ES6 Features” blog. Please subscribe to our Blog for upcoming blogs.

Happy Coding!

Read more: Important Javascript ES7 Features, Important Javascript ES8 FeaturesImportant ES9 Javascript FeatureImportant Javascript ES10 FeaturesTop ES11 Features | Javascript, Latest ECMAScript 2021 / ES12 | Feature in Javascript,  ECMAScript

Be the first to comment on "Important Javascript ES6 Features"

Leave a comment

Your email address will not be published.


*