Modern Concepts in JavaScript(Part 2)

Fig 01: Js (Source: Google)

Through this article let’s discuss some new concepts in JavaScript. This is a continuation of the previous article. So I suggest you go through part 1 of this article before moving on to this.

Visit the previous article by —

Modern Concepts in Javascript — Part 1

6. Template Literals

Refers to a string literal that allows embedded expressions. Templates literals should be enclosed with ` ` instead of “ ”.

Multi-line Strings using template literals —

Easily write multi-line strings without having to use “\n”

Fig 1: Multi-line String

Fig 2: Multi-line String Output

Interpolation of expressions —

Embed expressions within normal strings

This will print the sum as 13.

Nesting Templates —

Fig 3: Nesting Templates

Please refer to the article in the References section to know more about Template Literals.

7. Classes

JavaScript classes have similar behavior to Java classes. However, there are some key differences.

• In Javascript, we have to define the constructor using the keyword “constructor” and not the class name.
• No need to create a local variable in order to call “this.<variablename> = variablename” inside constructor.
• Easily override functions.

Let’s see these points from an example.

Fig 4: Javascript Classes

8. Destructuring

This is a useful feature provided by JavaScript in order to extract properties from objects and bind them.

Let’s try to understand the behavior of destructuring objects with the help of some examples.

Accessing values

Fig 5: Destructuring 1

We can see that it is much easier and cleaner to use object destructuring.

Another way to use destructuring

Now the method will print 196. We only passed the object vehicle and the required method extracted the necessary property(“base” in the above example) from the object. This eliminates the requirement to use the entire object.

Assign default value

Consider the following example,

Fig 6: Default value

The application printed Toyota because the “brand” property is readily available inside the vehicle. However, there is no color property inside the vehicle. Therefore the applicated printed the “blue” which is the default value.

Destructuring with a function

Consider a scenario where we need to read a file.

We can see that the code with destructuring is much cleaner and developer-friendly. We do not need to write “fs.readFileSync”.

The 3 dots ( … )

This is a brand new feature introduced in ES6. This can be used as a Rest Operator or Spread Operator.

Rest Operator

Basically adds all remaining elements into an array. Makes it possible for a function to accept an indefinite number of arguments as an array.

Fig 6: Rest Operator

We can also use the rest operator to copy values from one array to another.

Spread Operator

Consider a situation where we need to include all elements of an object within a list of some kind. In such situations, we can use the Spread Operator.

9. Promises

This is a way to deal with asynchronous operations in JavaScript. A promise is basically a guarantee that we are going to do something in the future. The value of a promise is unknown at the time of creation. This value will be supplied at some point in the future.

Main states of a Promise

• Pending: State before the promise succeeds or fails.
• Resolved: Operation Completed successfully.
• Rejected: Operation Failed.

Fig 7: Promise

Let’s try to understand Promises with some examples. Consider a situation where we need to get data from a website,

Why did we wrap this in a Promise?

Because HTTP takes time to go to the server and get the response.

Consumers-

.then: When the response is complete

.catch(): to log any errors.

.finally(): Regardless of the state(resolve or reject), this method will trigger.

Now in order to get the output successfully, we need to call this inside an “async” function with the help of the “await” keyword.

• await: An operator used to wait for a Promise.

What if we didn't use the await keyword?

Then the program will print undefined. That is because the application is not waiting for the response of the promise (Until the promise is resolved). The “await” keyword is only valid within an “async” function.

I have used the following video by Mr.Krishntha Dinesh to gather the required information.

References

Template literals (Template strings) - JavaScript | MDN

Promise - JavaScript | MDN

Rest parameters - JavaScript | MDN