What is Modern JavaScript?

The way we write JavaScript can always be improved. As the language evolves and more convenient features added. In this Post,we will look at some modern JavaScript features that we should use to make our lives easier. These are not the entire comprehensive features since ES2015.  But these are 20% of features that we use 80% of all the time.
So,Let’s begin with,

Template Literals

Before ES6, we had to deal with the below string concatenations.

 

 

Now, with template literals we can define a string with placeholders and get rid of all those concatenation. Modern JavaScript has a way to define strings using the backtick character.

Strings with backtick characters are called Template strings because they can be used as a template with dynamic values. They support expression interpolation and we can inject any valid JavaScript expression within ${} syntax. With template strings we can also have multiple lines of string which was not possible with regular quoted strings.

Backticks are very common to single-quotes and that’s the character before number 1 on our keyboard, so make sure to differentiate between them and when to use template strings.

Don’t worry about what is const here, we will discuss that now.

Let and Const

Prior to ES6, we used var keyword to define variables. The scope of a variable using the var keyword is entire enclosing function. If we define var keyword within a block scope , they will leak out of the scope. For example,

variables defined within block should be scoped to that block only. Here, i variable should not access from outside. And, if we use var keyword at top level outside a function, it creates prop on global object.

To resolve these issues,ES6 introduced two keywords let and Const.

When defining variables with let, we won’t have out-of-scope problem.

 Use the let keyword to define variables, but only when the variable needs to change the value.

For better practice,always define variables with Const keyword.Only use let keyword when you absolutely need it.

But,what is Const?

Const

Using Const , we can define a constant which cannot be re-assigned. Values declared using const keyword could not be re-assigned.

Note that values defined using const keyword are still mutable, but they could not be re-assigned. If we define an Array using const keyword, we can still call push to insert new values into the array.

Also, unlike the var keyword, let and const does not create a property on global object.

Arrow Function

Arrow Functions are probably the most used feature in Modern JavaScript. While JavaScript is having many ways to define a function, why this Arrow Function is needed?

Arrow Functions are shorter and also we don’t have to worry about the value of this inside an arrow  function. Legacy constructors like arguments object also can not be used within an arrow function. Arrow functions gives us clean and concise syntax for function expressions.

For example in ES5:

With Arrow Functions, we can remove function keyword and put a fat arrow in between parameters and body of the function.

We can make this even shorter, if arrow function having single parameter we can drop parenthesis also like below,

The other case is , if arrow function does not have any parameter we should keep parenthesis.

Arrow functions are much useful when we want pass callback functions as arguments like:

Destructuring

Destructuring is an expression refers to extracting the property of an object , or items from an Array. For example we have a object like this,

Without Destructuring in ES5, we have to write repetitive code and with ES6 we can extract object properties within single line which produces exactly the same result. This can be more useful when we have nested objects like,

We will do destructure for Arrays also , as curly braces{} need to replace with square brackets[].

Rest And Spread

Destructuring gets more interesting when combined with the REST and SPREAD syntax, which are both done using 3 dots(…)  notation but does different jobs.

The REST operator allows us bundle up arguments inside a function into a single array parameter. For example,

This is really useful when we don’t know how many arguments are going to pass. We can use REST with destructuring. Here is an example,

The above example destructuring only one item out of this array and then creates a new array in the name restItems to hold the rest of the items. This is powerful while splitting the array and is more powerful while working working with Objects to filter out certain properties of an Object and return into a new Object.

The SPREAD operator is useful to spread an array into its individual components and, it let us copy and combine objects. For example,

In the above example, merged is the combination of both objects since we spread entries from employees and members into a new object. We can perform SPREAD operation with the Objects too as follows:

Here , we are making copy of an Object not just the copy of pointer.

Well, Here are few modern JavaScript features that i have mentioned and there are few other.

Using Modern JavaScript features is must for any JavaScript app to keep the code clean and short.