The most recent iteration of JavaScript was released in 2015 and is called JavaScript ES6 (also known as ECMAScript 2015 or ECMAScript 6). The programming language used by JavaScript is called ECMAScript. The guidelines for how the JavaScript programming language should operate are provided by ECMAScript.

We'll go over some of the top ES6 features in this blog that you may utilize in your regular JavaScript code.

  1. What is ES6?
  2. Understanding ES6 Features
    1. let and const keywords
    2. Arrow Functions
    3. Multi-line Strings
    4. Default Parameters
    5. Template Literals
    6. Destructuring Assignment
    7. Enhanced Object Literals
    8. Promises
    9. Classes
    10. Modules
  3. Summary

What is ES6?

The sixth major edition of the ECMAScript language specification standard is known as ES6, or ECMAScript 2015. It has become far more well-liked than the previous edition, ES5, and it defines the standard for the implementation of JavaScript.

The JavaScript language has undergone considerable changes as a result of ES6. In order to make writing in JavaScript simpler and more enjoyable, it included a number of new features, including the let and const keywords, the rest and spread operators, template literals, classes, and modules. We'll talk about some of the top and most in-demand ES6 features in this article and how to use them when writing JavaScript on a regular basis.

  1. let and const Keywords
  2. Arrow Functions
  3. Multi-line Strings
  4. Default Parameters
  5. Template Literals
  6. Destructuring Assignment
  7. Enhanced Object Literals
  8. Promises
  9. Classes
  10. Modules

Understanding ES6 Features

1. let and const keywords :

Users can define variables using the keyword "let," whereas they can define constants using the keyword "const." In the past, variables were declared by using the top-level keyword "var," which had function scope. It indicates that a variable may be utilized prior to declaration. But, the "let" variables and constants have block scope which is surrounded by curly-braces "{}" and cannot be used before declaration.

let i = 10;
console.log(i);   //Output 10

const PI = 3.14;
console.log(PI);  //Output 3.14

2. Arrow Functions

The Arrow Functions functionality is a part of ES6. By omitting the "function" and "return" keywords, it offers a more succinct syntax for creating function expressions.

The fat arrow (=>) notation is used to define arrow functions.

// Arrow function
let sumOfTwoNumbers = (a, b) => a + b;
console.log(sum(10, 20)); // Output 30

It is clear that the declaration of the arrow function does not contain the keywords "return" or "function."

When there is precisely one parameter, we can omit the parenthesis; however, when there are zero or several parameters, we must always use them.

However, we must enclose the function body in curly brackets ("{}") if it contains several expressions. In order to return the necessary value, we must also utilize the "return" statement.

3. Multi-line Strings

Also available in ES6 are Multi-line Strings. Back-ticks(') are used to produce multi-line strings by users. The steps are as follows:

let greeting = `Hello World,     
                Greetings to all,
                Keep Learning and Practicing!`

4. Default Parameters

In ES6, users can provide the default values directly in the function signature. However, with ES5, the OR operator was required.

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

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

5. Template Literals

Very basic string templates and variable placeholders are also new features of ES6. The back-ticked string contains the syntax ${PARAMETER}, which is utilized to use the string template.

let name = `My name is ${firstName} ${lastName}`

6. Destructuring Assignment

One of the most used ES6 features is destructuring. An expression that makes it simple to separate off values from arrays or properties from objects into separate variables is the destructuring assignment.

Destructuring assignment expressions come in two flavours: array destructuring and object destructuring. It can be applied in the ways listed below:

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

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

7. Enhanced Object Literals

Enhanced object literals are a feature of ES6 that make it simple to quickly build objects with properties inside curly braces.

function getMobile(manufacturer, model, year) {
   return {
      manufacturer,
      model,
      year
   }
}
getMobile("Samsung", "Galaxy", "2020");

8. Promises

Promises are utilized for asynchronous execution in ES6. As shown here, we can combine promise and the arrow function.

var asyncCall =  new Promise((resolve, reject) => {
   // do something
   resolve();
}).then(()=> {   
   console.log('DON!');
})

9. Classes

JavaScript has never before had classes. In ES6, classes are introduced. Classes in other object-oriented languages, such C++, Java, PHP, etc., resemble classes in ES6. But they don't operate in precisely the same manner. By employing the "extends" keyword to implement inheritance, ES6 classes make it easier to construct objects and reuse code effectively.

In ES6, we can declare classes by preceding the class name with the new "class" keyword.

class UserProfile {   
   constructor(firstName, lastName) { 
      this.firstName = firstName;
      this.lastName = lastName;     
   }  
    
   getName() {       
     console.log(`The Full-Name is ${this.firstName} ${this.lastName}`);    
   } 
}
let obj = new UserProfile('John', 'Smith');
obj.getName(); // output: The Full-Name is John Smith

10. Modules

Until recently, JavaScript lacked native support for modules. A brand-new function known as modules was added to ES6. Each module is represented by a distinct ".js" file. Variables, functions, classes, and other components can be imported or exported from or to different files and modules by using the "import" or "export" declaration in a module.

export var num = 50; 
export function getName(fullName) {   
   //data
};
import {num, getName} from 'module';
console.log(num); // 50

Summary

  • This post introduced us to ECMAScript 2015, often known as ES6, which establishes the benchmark for JavaScript implementation.
  • The top 10 ES6 Features that make it so well-liked were also covered in this lesson.
  • Working with JavaScript is significantly facilitated by ES6's classes, modules, arrow functions, template literals, destructuring assignments, and many other features.

Recommended Posts

View All

Learn JavaScript Closures with Code Examples


Master JavaScript closures with code examples! Our comprehensive guide explains how closures work and how to use them in your code. Start learning now...

JavaScript Template Literals Explained


JavaScript template literals are one of JavaScript's most powerful capabilities. They enable us to generate dynamic strings without the need for conca...

JavaScript's Lambda and Arrow Functions


Lambda and arrow functions in JavaScript allow for concise and elegant code. Learn how to use them to streamline your code and improve readability.

Understanding Hoisting in JavaScript


Learn about hoisting in JavaScript: how variables and functions are moved to the top of their scope during compilation, affecting code behavior.

Difference Between == and === in JavaScript


Learn the Difference Between == and === in JavaScript. Discover how each operator compares values and data types, and when to use them in code.