Javascript ES6: Tips and Tricks Part-2

Tip 1 : Alternative to Console.log

Let’s take the same array of objects from my Part 1 post and play with it. So here, alternative option for console.log is console.table. It will display the objects in a tabular format in console with the index number of the array. Check below example.

Here is the output of the above code.

Output console.table

Limitations :

1. It will display max 1000 records of the array in the console.
2. Its doesn’t support (n)th number of argument to display on console like we used to with console.log. Eg. console.log(arg1,arg2, arg3). Console.table supports only one argument but there is alternative to display multiple objects with the same structure only. You can do it like this. console.table({arr1,arr2});

Interesting :

1. You can sort the collection in console. Sounds interesting hmmm..

Tip 2 : Array.every

It’s a very powerful function to use with the array. Let’s discuss the problem first. Suppose we have the array and we want to find that every item of the array satisfy the passed condition. Let’s go through an example.

We have a json array as below.

Q1. Is all items rating more than 3 or not?

Simple solution for this is as below.

tech.every(x => x.rating > 3);

It will check for every item inside the array and return true if it satisfies the condition otherwise false.

Q2. Is all items set isSelected to true?

Simple solution for this is

tech.every(x => x.isSelected == true);

Tip 3 : Array.some

Continue to solve the problem….

Q1. Is any item’s rating below then 4?

Here we can’t use the every because in every function it will check for the whole array for the condition.

So here we can use some method which can help us to check that if any items of array can satisfy the condition then it will return true.

tech.some(x => x.rating < 4);

Q2. Is any item isSelected set to true?

Simple solution for this is

tech.some(x => x.isSelected == true);

Tip 4 : Array.flat()

You can use flat() method when you want to merge your sub collection of arrays to the parent item and return a new array of that. Let’s understand it by a simple example.

// simple number array with the nested array
const arr = [1, 2, [3, 4, [5,6,7]]];

I need output something like this : [1,2,3,4,5,6,7];

// solution for that
arr.flat(2)

Output :

If you check that i passed 2 as a parameter to the flat method. Its a depth of the array to merge into final array. If i do not pass anything then it will merge only the very first subcollection only.

Output without any Param :

Hope you got the idea from the output.

Tip 5 : Array.flatMap()

The flatMap() method is the combination of the map() method followed by the flat() method of depth 1. Let’s take the example to understand it. I use the same tech array from Tips 2.

Q1 Add new json object to the tech array after the Android object and return the new array?

Solution :

Output :

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.