UI Development

Frequently used ES6 features

Introduction

ES6 is a huge JavaScipt update, jumping right from 2011 to 2015. It introduced a bunch of whole new cool features that made things simple and more convenient. If you work with JavaScript on a daily basis, then you might already be familiar with some of these features. But you might not know the features specific to this standard. So, let me go into detail into some of the most used characteristics particular to this standard.

Extended Parameter Handling

  • Default Parameter Values:  In ES6, we can directly assign the default value.

    ES5 code

    ES6 code
  • Rest Parameter: Rest parameter is a new way to handle the function parameter. Irrespective of definition of a function with the help of a rest parameter, a function can be called with any number of arguments.

    Rest operator takes all the left out parameters which are passed in the function call and forms an array with them.

    Note: We can’t use Rest parameter in between the parameters like func(a, …numbers, b). This is absurd and throws a syntax error. So, the rest parameter should always be used as the last parameter in the function call.

  • Spread Operator: It helps us to place all the elements of one array into another by using ‘…’ notation before an array:

    Spread operator can also be used for splitting all the characters of a string and converting then into characters:

Template Literals

  • String Interpolation: This is an intuitive way of writing a string using the combination of variables and it is very helpful for multi-line strings.
    ES6 code

    ES5 code

  • Custom Interpolation: This is an intuitive way of writing a string using a combination of variables and it is very helpful for multi-line strings.
    ES6 code

Enhanced Object Properties

  • Shorthand property: Shorter syntax for assignment:
    ES6 code

    ES5 code

  • Computed Property Names: Now in an object definition, computed names are also allowed:
    ES6 code

    ES5 code

Destructuring Assignment

  • Array Matching: In the code below, numbers array is being assigned to [a, , z]. So, a = 10 and z = 50. When we have to interchange the numbers, we can do it in a single line with a temporary variable using this property. The example shows the difference between ES6 code and ES5 code:
    ES6 code

    ES5 code

  • Object Matching: Easy way of destructuring objects and assigning them to variables:
    ES6 code

    ES5 code

    In the above example, we saw how easily we can assign similar name variables now let’s look at how we can assign it to new variables:

    Here copy_op, copy_lhs and copy_rhs variables get the assigned values of action.op, action.lhs and action.rhs respectively.

  • Deep matching of objects: 

Arrow Functions

  • Expression Bodies: New syntax of the fat arrow(=>) reduces the effort of writing a function and is more intuitive for the developer.
    ES6 code

    ES5 code

  • Statement Bodies: Another intuitive way of using the arrow function,
    ES6 code

    ES5 code

Classes

  • Classes are just a special type of function, but the main difference is functions are hoisted and classes are not hoisted.

  • In ES6 we can encapsulate everything into a single entity which is more intuitive in nature.
    ES6 code

    ES5 code

Modules

  • A module is nothing but a snippet of code written in a file. This helps in organising the set of reusable code in a particular file.

  • Before ES6, there was no native modules support. Now as there is support, it helps to increase the code reusability.

  • Export statements with named exports:

  • Exporting multiple files under a single export statement:

  • Modules which require only a single value export can use export default.  There can be only one default export/module.

  • Importing named exports:

  • Importing named exports and renaming them:

  • To import all named exports use *.

  • Importing named exports:

  • Importing named exports and renaming them:

Promise

  • Example of promise:

  • Chaining of promises is done when there is a sequence in which the async calls have to be made

  • Promise.all helps to aggregate all the promises and to show the result.

Conclusion

In this blog, I have covered frequently used features in ES6 and given you a proper insight into the very specific characteristics of this standard. For further reading, you can visit the below sites:

https://codetower.github.io/es6-features/

http://es6-features.org/

About The Author