8 Key ES6 Features In JavaScript

Using arrow functions you can write this function in just one line, let’s take a look at the syntax of the arrow function:

This is also known as a Fat Arrow (=>) syntax. It provides a more concise approach to defining a function without a ‘function’ and ‘return’ keyword. In the case of a single parameter, you can opt for skipping the parenthesis around the parameters.

For example:

Apart from the advantages it offers, there are some of the limitations it has. It cannot be used as a constructor and method within an object due to the missing ‘this’ context.

2. Multi-line Strings:

ES6 also provides a way to handle multi-line strings. You can use backticks(`)

For example:

3. Javascript Classes:

Classes being one of the important features of the programming languages was not available before the ES6 update. Using ES6 you can easily create classes and can inherit using the ‘extends’ keyword. Let’s take a look at how we can use classes in JS:

4. Default Parameters:

ES6 provides you a feature where you can now simply provide a default value to the function parameter in the definition itself. Let’s see how it’s done:

So, in this case, when you call the sum function with the arguments it will return the sum of the parameters passed but if in any case, you forget to send a parameter, the function will take 1 as the default parameter

5. Promises:

Using ES6, you can handle asynchronous operations easily using Promises. Let us see the basic syntax of a promise: 

So This is how a promise is defined. We have defined a promise and assigned it to a variable myPromise. Promise takes functional parameters namely resolve and reject. When a promise is resolved, the resolve function gets invoked and a then function is followed denoting that a promise has been resolved. If in any case a promise gets rejected the reject function is invoked and is followed by a catch function denoting that there has been an error.

6. Destructuring: 

ES6 provides an amazing feature to us, which lets us assign array elements to a variable easily. Earlier to assign array elements to a variable like this:

This is a very concise and readable format for assigning variables.

7. Let and Const:

The way var was used to define a variable, now we can use let and const to define a variable. However, the ‘let’ keyword is mainly used for a block scope or loop scope and the ‘const’ keyword is used when you need to define a constant variable. 

8. Template Literals:

There has been an introduction of backticks(`) in ES6, which also lets us add the variables to the placeholders. Let’s see how it works

${param1} will assign the value of the variable param1 in the template string. Note that this only works if you are using backticks.

 Subscribe our newsletter to learn more about JavaScript.

There are more features that are new in ES6 but, the main agenda of this blog was to cover 8 top features for ES6. Kindly stay tuned for more such content.

Explore our other JavaScript related blogs:-

• String Methods In JavaScript

• Handling Asynchronous Operation in JavaScript

• React vs Vue: Comparison Guide of Leading JavaScript Frameworks