Hello there, People. Hope you find it helpful for your journey with JavaScript.

Table of contents

• ES6
• let, const keywords
• Arrow Function
• Template literals
• Promises
• Destructuring Assignment
• Classes
• Default Parameters
• Object Literals

---

About ES6

EcmaScript or ES6 is 6th major revision of ECMAScript language. Its the newer version of JavaScript introduced in 2015. The following update came with some major implementation on how JavaScript programming language should work.

Now you must be thinking, what are the features that brought significant changes to the JavaScript Language. Let me break this for you.

let and const keywords

ES6 introduced the new let and const keywords for declaring variable. Before ES6 , the standard for declaring variable was var. Let's see the difference between them.

ES5 had only Global Scope and Functional Scope. Variables declared with the var keyword are function-scoped and can be hoisted at the top within the scopes. This imposed many problems during the development.

Whereas the keywords let and const are Block Scoped, which means variables inside the { } can't be accessed from the outside of the block.

Understanding let and const variable declaration.

Let me break this for you in simple terms. Use let when you are going to reassign the value where use const when the value is going to be fixed and constant through the development because it can't be reassigned.

Arrow Function

Arrow function allows the you to write the shorter function. That brings more cleaner way to create functions way compared to the regular functions.

Here's the code snippet of Arrow function -

let codeSnippet = (a, b) => a * b;

Regular function code snippet -

let codeSnippet = function() {
  return " Hello Lovely Humaaans !!! ";
}

Template Literals

Template Literals lets you create more easier and cleaner way to interpolate variables and expressions into strings. With the use of Back-ticks `` you can easily use the template literals.

Within the template literals you can use both single and double quotes inside a string.

Let me show you the code snippet so that you can visualize I am saying.

let stringbe = 
`The quick
brown fox
jumps over
the lazy dog`;

Now, you can use template literals to interpolate variables and expressions into string.

Here's the code-snippet : -

let platform = "Hashnode";
let profile = "Shivani's Tech Tea";

let text = `Welcome to the ${platfrom}, into the world of ${profile}!`;

Output will be :

Welcome to the Hashnode, into the world of Shivani's Tech Tea.

And remember don't forget to use $ to interpolate the variables and expressions into the string.

Promises

Promises are used to handle asynchronous tasks. It is used to find out if the asynchronous operation is successfully completed or not.

It will be in one of 3 possible states:

• Fulfilled: onFulfilled() will be called (e.g., resolve() was called)
• Rejected: onRejected() will be called (e.g., reject() was called)
• Pending: not yet fulfilled or rejected

A promise starts with in a pending state, which states that process is not completed yet. If the operation is successful, the process is completed and fulfilled.

Understand this as - When you request data from server by using a promise, it will be in a pending state. When you receive the desired data or when the data arrives successfully, it will be in a fulfilled state. If an error is there it will be in a rejected state.

Here's the code-snippet -

const count = true;

let countValue = new Promise(function (resolve, reject) {
    if (count) {
        resolve("There is a count value.");
    } else {
        reject("There is no count value");
    }
});

console.log(countValue);

Output :

Promise {<resolved>: "There is a count value."}

Destructuring Assignment

Destructuring is one of the most popular features of ES6. The destructuring assignment is an expression that makes it easy to extract values from arrays, or properties from objects, into distinct variables.

There are two types of destructuring assignment expressions

• Array Destructuring and
• Object Destructuring.

Here's the code-snippet -

//Array Destructuring
let fruits = ["Orange", "Banana"];
let [a, b] = fruits; // Array destructuring assignment
console.log(a, b);

//Object Destructuring
let person = {name: "Shivani", age: 21};
let {name, age} = person; // Object destructuring assignment
console.log(name, age);

Classes

Classes never existed in JavaScript. Until recently, developers used constructor functions to mimic an object - oriented design pattern in JavaScript.

ES6 introduced classes to the JavaScript language. Es6 classes makes the process simpler to create objects. To implement inheritance extends keyword is used.

Here's the code-snippet -

class UserProfile {   
   constructor(firstName, lastName) { 
      this.firstName = firstName;
      this.lastName = lastName;     
   }  

   getName() {       
     console.log(`This blog section belongs to ${this.firstName} ${this.lastName}`);    
   } 
}
let obj = new UserProfile('Shivani', 'Yadav');
obj.getName();

Output :

 This blog section belongs to Shivani Yadav.

Default Parameters

ES6 can provide the default values in the signature of the functions. Previously, ES5, OR operator had to be used.

Here's the code-snippet -

//ES6
let calculateArea = function(height = 100, width = 50) {  
    // logic
}

//ES5
var calculateArea = function(height, width) {  
   height =  height || 50;
   width = width || 80;
   // logic
}

Object Literals

ES6 provided developers to use enhanced Object Literals which makes it easier to create objects with properties inside the curly braces { }

Here's the code-snippet -

function getUser(name, platform, year) {
   return {
      name,
      platform,
      year
   }
}
getMobile("Shivani", "Hashnode", "2022");

---

Summary

All the features mentioned above led huge impact on implementation of JavaScript. These are some major feature that has been added to the JavaScript in 2015. There's more to the JavaScript's ES6 features. Surely will add more in the upcoming blogs.

Happy Reading !!!