Javascript ES6: Tips and Tricks

Tips 1 : Performance check using Console.time and timeEnd

In javascript how to check how much time your function will take to complete the process. Check below code where I defined the one function called LongrunningTask where I put the sleep inside the while loop. So I just start console.time before my long running start and put the console.timeEnd after the function.

Output of the above code

Output

So, 5000ms means 5 seconds. So that way you can check the performance of your javascript function.

Tips 2: Use of console.trace

This tip is useful for Angular, ReactJs or any front-end framework developer. We have faced one common issue to track the function called or not or called then from where did it call.

So usually to do that we use the console.log to print the message on console.

So here is the solution for it. Rather using console.log we can use the console.trace. The benefits of using the console.trace are as below.

I have written below trace command in one of the angular components on the button press event.

console.trace(“Search for consumer call”);

Output of the command. Here i got full stack trace where this message was written. In below snapshot you can check it written on searchForConsumer function line number 41 of search-customer.component.ts file.

output of console.trace command

So, you can use trace on exception to trace from where exactly the exception is thrown. Because in real life projects there is a single component made of many sub components so that way at least we can trace actual occurrence of error.

Tips 3: String Concatenation

String concatenation. It’s simple: we have to display the variable value in between the string. Dev usually uses (+) to concat the string. But there is a better and smart way available. Check below example for good and bad practice.

Tips 4: Destructuring Assignment

It’s a javascript expression is used to destructure the properties or values from arrays or objects. Lets understand this by the example. I have put the comments on each function for better understanding.

Tips 5: Spread Syntax

Spread syntax is basically three dots like (…)

Problem : Think we have two different arrays and we need to combine both arrays values to a single new array.

Let’s discuss how the spread operator will help us to solve the problem.

Suppose i have this two arrays of movies list of my favourite hollywood stars.

let keanuMvArr = [‘John Wick’, ‘Matrix 1’, ‘Matrix Reloaded’];
let robertMvArr = [‘Iron Man’, ‘Avenger’, ‘Sherlock Holmes’];
let allMovies = []; // want to merge both array into this array var.

Now the problem is that I want to merge these two arrays to a single new array. So let’s do this first in a traditional way.

So if you check then i push each object one by one or we can loop through the array and push it to new array one by one.

Now we do the same thing with new powerful spread techniques.

//Efficient Way
allMovies = […keanuMvArr, …robertMvArr];

Output of above code is

Output Sample for Spread Techniques

Spread Syntax is more powerful then let me show you a few more examples of it.

Lets now add new items between both arrays too.

allMovies = [‘Spiderman’, …keanuMvArr, ‘Matrix Revolution’, …robertMvArr];

Here is the output of it. See how simply we can combine different arrays with new values inserted in between the array and create the new array.

Output

See the beauty of new ES6 syntax which will help you to solve many problems like this. And there are a lot of new things to learn which will come to my next blog.

I hope you liked the tips and you will use them in your daily routine coding habits. Let me know about your views in comments section. So I can take care about those in my next blog for ES6.

You can refer Part 2 of this blog here.