Category Archives: Code Snippets

null >= 0

Javascript never stops surprising you.

Try this out.

then try

then once opon a time try this

What really happens is that the Greater-than-or-equal Operator (>=), performs type coercion (ToPrimitive), with a hint type of Number, actually all the relational operators have this behavior.

null is treated in a special way by the Equals Operator (==). In a brief, it only coerces to undefined:

Value such as false, ”, ‘0’, and [] are subject to numeric type coercion, all of them coerce to zero.

Facebooktwittergoogle_plusredditpinterestlinkedinmail

JavaScript Trick Questions

This is some of my collection of javascript trick questions. If you have more, please do comments.

Facebooktwittergoogle_plusredditpinterestlinkedinmail

setAttribute & removeAttribute with checkbox

Let say, we have a checkbox and button to toggle on/off for checkbox

then some javascript for click event of button

Now if you click on the button, you can see, it is working fine, but, the big “BUT”,
click on the checkbox first and then click on the button. !Its not working any more! as we expected.

I don’t know the reason why it is not working, somehow, I know how to fix it.
So instead of setAttribute and removeAttribute, use something like

Facebooktwittergoogle_plusredditpinterestlinkedinmail

getElementByTagName vs querySelectorAll

Let me come straight to the point. I need to get all the div inside a html element. I have two options, I can use getElementByTagName or querySelectorAll. I know one thing for sure is that, querySelectorAll can be used for complex selector. But what I am going to show you in below code is a big difference in these two methods.

So, what I am doing up, my html is having two div nodes already, and I am using the both the method querySelectorAll(‘div’) and getElementsByTagName(‘div’) to get the nodes. Then I am adding a div dynamically.

Lets print the length of nodes I am getting by both the methods.

Wow, the length of getElementsByTagNameNodes increases just by adding a dynamic element. Reason for this behavior is querySelectorAll returns static NodeList, where as getElementsByTagName returns the live NodeList. Getting the live Node list is faster for browser, I don’t know the reason yet. Let’s find out. Please add your comments.

!Happy Coding

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Function Constructor

I create my javascript function by two ways.

Function Declaration way

or by Function Expression way

but, there is another way by using Function Constructor


However, this way of defining the function is slow and keeps the function definition in string, hence unable to used properly by IDE or tools.

Facebooktwittergoogle_plusredditpinterestlinkedinmail

variable is Array or not?

Many times I asked this question, while taking interview, to find weather a variable is Array or not? I got different reply.
The question was intended to know, whether he knows about typeof Array. If you don’t know, please try.

So Way number 1, is to use isArray method of Array Constructor

way number 2, to use constructor property of a variable

way number 3, to use instanceof operator

I am excited to share this approach, using toString method of Object constructor, which I found going through the “requirejs” source code

Which one is better, may be the question to find? Till then, Happy Coding.

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Sparse to Dense

Sparse Array

Ideally we should not create sparse array in javascript, but if you do, some time they cause some problem. Let see an example

This is not going to work, as documentation of forEach says, the array should not be a sparse array. So what will i do in this case.
The answer is to convert sparse array into dense array

!Wallah!

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Array.from to convert array like into array

In MDN, you find many use case of Array.from, two of them i recently used.

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Clickable main navigation with sub navigation in touch device

Recently I faced a problem with navigation bar, having main menu clickable and sub menu also clickable. The problem with the touch device is that they don’t have hover event. So when i want to open sub menu by hover on main menu, in touch device, click event is being triggered and hence redirected to the url configured for main menu. So, there was no way to open sub menu in this case. Here is the code i used to handle this problem…

Facebooktwittergoogle_plusredditpinterestlinkedinmail

jQuery toggleClass() method

A very common scenario for a web developer to add and remove some class based on a condition, for example

but we can make this code little shorter and sweat by using jquery toggleClass method

Facebooktwittergoogle_plusredditpinterestlinkedinmail