Less Used Features of JavaScript
UI Development

Less Used Features of JavaScript

JavaScript is always there to make a web page dynamic and to manipulate data. It has lots of inbuilt methods to make web development easy. Here we will discuss some less used features provided by JavaScript which perform complex tasks, still underrated. Lets start with few of them.

.reduce()

We have to work with different kind of data types to store data like Arrays, JSON’s, Maps, Strings. Most of the time, as per requirements we have to manipulate data. Mostly we do not get expected data format from DB. In such case we have to write numerous line of code to convert the data format.
Using ‘reduce()’ method we can iterate over data to get desired result, that’s also with less lines of code. We do have some other methods like ‘map()’, ‘filter()’, etc. But using reduce method we can manipulate data in a way which is tough to get using map or filter.

We have data of 10th class students of a school

 

    var student = [
         {name:'Raj', id:'10_001', subject: 'Hindi', marks:90},
         {name:'Raj', id:'10_001', subject: 'Eng', marks:95},
         {name:'Mahesh', id:'10_002', subject: 'Hindi', marks:89},
         {name:'Mahesh', id:'10_002', subject: 'Eng', marks:92},
         {name:'Shyam', id:'10_003', subject: 'Hindi', marks:91},
         {name:'Shyam', id:'10_003', subject: 'Eng', marks:70}
     ]


We need an object having student’s id as key with their total marks and name. We can have this object using reduce in very few line of code.


     var result = student.reduce(function(r,s){ r[s.id] = r[s.id] || {}; r[s.id].name = s.name;
                          r[s.id].totalMarks = (r[s.id].totalMarks || 0) + s.marks; return r; },{});


In case of map() and filter() method we have return type array. But in case of reduce(), return type can be any type like object, array or number.

.freeze()

Many time we make use of an Object and do not want to change its value. But as we perform many actions over that, then without our knowledge, we alter some values of original object.
In such case ‘freeze()’ is clear solution of our need. I do not find enough use of this method as much it should.

This method convert an Object into an immutable Object. After using ‘freeze()’, we will not able to update anything of the Object on which ‘freeze()’ has been applied.

It sounds like ‘const’ is a good option to use instead of ‘freeze()’. But in case of Object, even if we have used const, value of an Object can be changed. But ‘freeze()’ is a perfect solution.

Set

Set is collection of data like Array or Objects in JavaScript. Many time we compare set with array. Set is not here to replace the array but we have some additional features in set which are missed in array like delete(), intersect(), difference(), etc.

The main feature/advantage of using set is not have duplicate elements without using any extra method or logic. Set do not create new element if it is already present without any extra logic.
We can not add elements in set by the same way as we do in Array. It has its own constructor ‘new Set()’. Also we can not add element to a specific index as we do in Array. There is ‘add()’ method to add new element in set. Easily we can convert a set into array using ‘Array.form()’ method.

.some()

There are common requirements where we have to check if a value matches with any of the element in array. To fix this requirement we have ‘some()’ method for Arrays.

It will more efficient to use ‘some()’ method instead of iteration over elements. It is a clear and fast solution. It will return a Boolean value and takes a function as parameter.
It do not return index of matched value. But if we have clear requirement to match a condition for existence of any element, then using ‘some()’ is a clever decision.

.querySelector(), .querySelectorAll()

Whenever we think to get any element using core JavaScript, first thing we think of is document.getElementById.
We can use above two methods to get element using css selectors as we do in jQuery.

The first one ‘querySelector()’ returns first matched element and the second one ‘querySelectorAll()’ returns all matched elements.

If some one  thinks of jQuery as simplest solution to get elements and uses jQuery only to serve this purpose, then it should be reconsidered using above methods.

Pretty console.log

Every one of us who has worked on web development, at least once has seen console section in dev tools for Facebook page and must be surprised to see some fancy console message.

Well, this kind of console message is not an image or something but a console log styled using many of css properties used for font styling.

// Stop!
console.log(“%c Stop! “, “font-weight: bold; font-size: 55px; font-family: arial; color: red; text-shadow: 1px 1px 0px black, 1px -1px 0px black, -1px 1px 0px black, -1px -1px 0px black”);

We are having this feature with us from so many years but not widely used as we all know console is not something that common user will use.
So next time, if you want to surprise any new developer who check console of your web page, put a fancy ‘Hi!’ with big fonts in console log.

Conclusion

JavaScript is a vast language and maybe it would take a whole life to explore it at 100%, but that doesn’t mean that we should keep on going with very frequently used features and shouldn’t give a try from time to time to new features that can be game changers in your next projects.

About The Author