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

Named function expression in javascript

Usually how we define a function expression in javascript. I am putting an example to create a method repeat, which take two arguments, one is number( how many times to repeat a string), and a string( to repeat).

To refer a function inside same function we use named function expression, in the above example we use recursion, and used “me” to call the function again until it is greater than 0.

One thing to make sure, The name of a named function expression is only accessible inside the function expression.

Happy Coding!

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

Reverse a String in javascript

There are multiple ways to reverse a string, This code snippet shows two of them

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

This is how I get rid of closure

Closures are beautiful feature of javascript. They are powerful but cruel. We do implement closure in our daily programming(if you are a javascript developer), knowingly or unknowingly. I have already explained the definition of closure in my previous posts. This time I am showing you how you can get rid of closure. Lets look into this code


This is pure closure, To check this, run console.dir(add1); in your browser console.

And if I create function inside a loop(which i should not), It will consume hell lot of memory.

To remove this closure i used bind. Which I tested in profiler tool and it consumes less memory as compared to the above example.

Please share your thoughts, if you think this is interesting.

Facebooktwittergoogle_plusredditpinterestlinkedinmail