Category Archives: Code Snippets

null >= 0

September 11, 2017Code Snippets, Javascriptadmin

Javascript never stops surprising you.

Try this out.

null > 0 //false

1	null > 0 //false

then try

null == 0 //false

1	null == 0 //false

then once opon a time try this

null >= 0 //true

1	null >= 0 //true

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:

null == null; // true
null == undefined; // true

1 2	null == null; // true null == undefined; // true

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

JavaScript Trick Questions

February 25, 2017Code Snippets, Javascriptadmin

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


function a(x) { return x*2; }
var a;
alert(a);

function a(x) { return x*2; }

var a;

alert(a);


function b(x, y, a) {
  arguments[2] = 10;
  alert(a);
}
b(1, 2, 3);

function b(x, y, a) {

arguments[2] = 10;

alert(a);

}

b(1, 2, 3);


function a() {
  alert(this);
}
a.call(null);

function a() {

alert(this);

}

a.call(null);


if (!("a" in window)) {
  var a = 1;
}
alert(a);

if (!("a" in window)) {

var a = 1;

}

alert(a);


var a = 1,
  b = function a(x) {
    x &amp;&amp; a(--x);
  };
alert(a);

var a = 1,

b = function a(x) {

x && a(--x);

};

alert(a);


var a = function b() {
  return "Hi World";
};
typeof(b());

var a = function b() {

return "Hi World";

};

typeof(b());


var github;
github == undefined;

var github;

github == undefined;


(function(){
  return typeof arguments;
})();

(function(){

return typeof arguments;

})();


(function(x){
  delete x;
  var a = x;
  return a;
})('github');

(function(x){

delete x;

var a = x;

return a;

})('github');


var x = 0;
alert(x === false);

var x = 0;

alert(x === false);


undefined = 'Hello World';
var github;
github == undefined;

undefined = 'Hello World';

var github;

github == undefined;


var x = 0;
alert(x == false);

var x = 0;

alert(x == false);


0.1 + 0.2 == 0.3

0.1 + 0.2 == 0.3


null instanseof Object

null instanseof Object


typeof null

typeof null


typeof NaN

typeof NaN


/* use currentColor */
a {
color: green;
}
a.office {
color: blue;
}

/* instead of */
a:hover {
border: 1px solid green;
}
a.office:hover {
border: 1px solid blue;
}

/* use */
a:hover {
border: 1px solid currentColor;
}

/* use currentColor */

a {

color: green;

}

a.office {

color: blue;

}

/* instead of */

a:hover {

border: 1px solid green;

}

a.office:hover {

border: 1px solid blue;

}

/* use */

a:hover {

border: 1px solid currentColor;

}


(function(){
  return typeof arguments;
})();

(function(){

return typeof arguments;

})();


var f = function g(){ return 23; };
typeof g();

var f = function g(){ return 23; };

typeof g();


(function(x){
  delete x;
  return x;
})(1);

(function(x){

delete x;

return x;

})(1);


var y = 1, x = y = typeof x;
x;
y;

var y = 1, x = y = typeof x;


(function f(f){
  return typeof f();
})(function(){ return 1; });

(function f(f){

return typeof f();

})(function(){ return 1; });


var foo = {
  bar: function() { return this.baz; },
  baz: 1
};
(function(){
  return typeof arguments[0]();
})(foo.bar);

var foo = {

bar: function() { return this.baz; },

baz: 1

};

(function(){

return typeof arguments[0]();

})(foo.bar);


var foo = {
  bar: function(){ return this.baz; },
  baz: 1
}
typeof (f = foo.bar)();

var foo = {

bar: function(){ return this.baz; },

baz: 1

}

typeof (f = foo.bar)();


var f = (function f(){ return "1"; }, function g(){ return 2; })();
typeof f;

var f = (function f(){ return "1"; }, function g(){ return 2; })();

typeof f;


var x = 1;
if (function f(){}) {
  x += typeof f;
}
x;

var x = 1;

if (function f(){}) {

x += typeof f;

}


var x = [typeof x, typeof y][1];
typeof typeof x;

var x = [typeof x, typeof y][1];

typeof typeof x;


(function(foo){
  return typeof foo.bar;
})({ foo: { bar: 1 } });

(function(foo){

return typeof foo.bar;

})({ foo: { bar: 1 } });


(function f(){
 function f(){ return 1; }
 return f();
 function f(){ return 2; }
})();

(function f(){

function f(){ return 1; }

return f();

function f(){ return 2; }

})();


function f(){ return f; }
new f() instanceof f;

function f(){ return f; }

new f() instanceof f;


with (function(x, undefined){}) length;

with (function(x, undefined){}) length;

setAttribute & removeAttribute with checkbox

November 30, 2016Code Snippets, Javascriptadmin

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


<input type="checkbox" id="mycheckbox"/>
<button id="myBtn">Toggle Checkbox</button>

<button id="myBtn">Toggle Checkbox</button>

then some javascript for click event of button


var mycheckbox = document.getElementById('mycheckbox');
var mybtn = document.getElementById('myBtn');

mybtn.addEventListener("click", function(){
  if(mycheckbox.checked){
      mycheckbox.removeAttribute('checked');
  }else{
      mycheckbox.setAttribute('checked','checked');
  }  
});

var mycheckbox = document.getElementById('mycheckbox');

var mybtn = document.getElementById('myBtn');

mybtn.addEventListener("click", function(){

if(mycheckbox.checked){

mycheckbox.removeAttribute('checked');

}else{

mycheckbox.setAttribute('checked','checked');

}

});

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


if(mycheckbox.checked){
    mycheckbox.checked = false;
}else{
    mycheckbox.checked = true;
}

if(mycheckbox.checked){

mycheckbox.checked = false;

}else{

mycheckbox.checked = true;

}

getElementByTagName vs querySelectorAll

October 1, 2016Code Snippets, Javascriptadmin

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.



		
		
			
			

			
			<html>
  <body>
    <div>A</div>
    <div>B</div>
    <script>
      var querySlectorNodes = document.querySelectorAll('div');
      var getElementsByTagNameNodes = document.getElementsByTagName('div');
      
      //Adding a extra div to body
      var newDiv = document.createElement('div');
      newDiv.innerHTML = "C";
      document.body.appendChild(newDiv);
      
      //Checking the querySlectorNodes length
      console.log("Static Nodes length " + querySlectorNodes.length); //2
      
      //Checking the getElementsByTagNameNodes length
      console.log("Live Nodes length " + getElementsByTagNameNodes.length); //3
    </script>
  </body>
</html>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
				
						<html>
  <body>
    <div>A</div>
    <div>B</div>
    <script>
      var querySlectorNodes = document.querySelectorAll('div');
      var getElementsByTagNameNodes = document.getElementsByTagName('div');
      
      //Adding a extra div to body
      var newDiv = document.createElement('div');
      newDiv.innerHTML = "C";
      document.body.appendChild(newDiv);
      
      //Checking the querySlectorNodes length
      console.log("Static Nodes length " + querySlectorNodes.length); //2
      
      //Checking the getElementsByTagNameNodes length
      console.log("Live Nodes length " + getElementsByTagNameNodes.length); //3
    </script>
  </body>
</html>

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.

//Checking the querySlectorNodes length
console.log("querySlectorNodes length " + querySlectorNodes.length); //2

1 2	//Checking the querySlectorNodes length console.log("querySlectorNodes length " + querySlectorNodes.length); //2

//Checking the getElementsByTagNameNodes length
console.log("getElementsByTagNameNodes length " + getElementsByTagNameNodes.length); //3

1 2	//Checking the getElementsByTagNameNodes length console.log("getElementsByTagNameNodes length " + getElementsByTagNameNodes.length); //3

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

Function Constructor

October 1, 2016Code Snippets, Javascriptadmin

I create my javascript function by two ways.

Function Declaration way



		
		
			
			

			
			function add(x,y) {
  return x + y;
}
			
				
					
				
					1
2
3
				
						function add(x,y) {
  return x + y;
}

or by Function Expression way



		
		
			
			

			
			var add = function(x,y){
  return x + y;
}
			
				
					
				
					1
2
3
				
						var add = function(x,y){
  return x + y;
}

but, there is another way by using Function Constructor



		
		
			
			

			
			var add = new Function('x', 'y', 'return x + y');
			
				
					
				
					1
				
						var add = new Function('x', 'y', 'return x + y');

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.

variable is Array or not?

September 25, 2016Code Snippets, Javascriptadmin

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.


var a = [];

var a = [];

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


console.log(Array.isArray(a));

console.log(Array.isArray(a));

way number 2, to use constructor property of a variable


console.log(a.constructor === Array);

console.log(a.constructor === Array);

way number 3, to use instanceof operator


console.log(a instanceof Array);

console.log(a instanceof Array);

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


console.log(Object.prototype.toString.call(a) === '[object Array]');

console.log(Object.prototype.toString.call(a) === '[object Array]');

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

Sparse to Dense

September 6, 2016Code Snippets, Javascriptadmin

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



		
		
			
			

			
			var a = Array(3);
//Lets initialize the array
a.forEach((e,i) => i);
			
				
					
				
					1
2
3
				
						var a = Array(3);
//Lets initialize the array
a.forEach((e,i) => i);

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



		
		
			
			

			
			var a = Array(3); //Sparse Array
a = [...a]; //Converting Sparse to Dense
a.forEach((e,i) => i);
			
				
					
				
					1
2
3
				
						var a = Array(3); //Sparse Array
a = [...a]; //Converting Sparse to Dense
a.forEach((e,i) => i);

!Wallah!

Array.from to convert array like into array

August 23, 2016Code Snippets, Javascriptadmin

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



		
		
			
			

			
			// String
Array.from("foo");                      
// ["f", "o", "o"]

//and 

// Generate a sequence of numbers
Array.from({length: 5}, (v, k) => k);    
// [0, 1, 2, 3, 4]
			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						// String
Array.from("foo");                      
// ["f", "o", "o"]
 
//and 
 
// Generate a sequence of numbers
Array.from({length: 5}, (v, k) => k);    
// [0, 1, 2, 3, 4]

Clickable main navigation with sub navigation in touch device

August 23, 2016Code Snippetsadmin

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…



		
		
			
			

			
			(function ($) {
    $(document).ready(function () {
        // see whether device supports touch events
        var hasTouch = ("ontouchstart" in window);

        // hook touch events for drop-down menus
        // NB: if has touch events, then has standards event handling too
        if (hasTouch && document.querySelectorAll) {
            var i, len, element,
                mainNav = document.querySelectorAll("#pmenu li a.main");

            //Added for handling hover effect of sub navigation
            $('#pmenu a.sub').on('click touchend', function(e) {
                var el = $(this);
                var link = el.attr('href');
                window.location = link;
            });

            function menuTouch() {
                // toggle flag for preventing click for this link
                var i, len, noClick = !(this.dataNoclick);

                // reset flag on all links
                for (i = 0, len = mainNav.length; i < len; ++i) {
                    mainNav[i].dataNoclick = false;
                }

                // set new flag value and focus on dropdown menu
                this.dataNoclick = noClick;

                if($(this).parent().find('ul').length == 0){
                    this.dataNoclick = false;
                }

                this.focus();
            }

            function menuClick(event) {
                // if click isn't wanted, prevent it
                if (this.dataNoclick) {
                    event.preventDefault();
                }
            }

            for (i = 0, len = mainNav.length; i < len; ++i) {
                element = mainNav[i];
                element.dataNoclick = false;
                element.addEventListener("touchstart", menuTouch, false);
                element.addEventListener("click", menuClick, false);
            }
        }
    });
})(jQuery);
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
				
						(function ($) {
    $(document).ready(function () {
        // see whether device supports touch events
        var hasTouch = ("ontouchstart" in window);
 
        // hook touch events for drop-down menus
        // NB: if has touch events, then has standards event handling too
        if (hasTouch && document.querySelectorAll) {
            var i, len, element,
                mainNav = document.querySelectorAll("#pmenu li a.main");
 
            //Added for handling hover effect of sub navigation
            $('#pmenu a.sub').on('click touchend', function(e) {
                var el = $(this);
                var link = el.attr('href');
                window.location = link;
            });
 
            function menuTouch() {
                // toggle flag for preventing click for this link
                var i, len, noClick = !(this.dataNoclick);
 
                // reset flag on all links
                for (i = 0, len = mainNav.length; i < len; ++i) {
                    mainNav[i].dataNoclick = false;
                }
 
                // set new flag value and focus on dropdown menu
                this.dataNoclick = noClick;
 
                if($(this).parent().find('ul').length == 0){
                    this.dataNoclick = false;
                }
 
                this.focus();
            }
 
            function menuClick(event) {
                // if click isn't wanted, prevent it
                if (this.dataNoclick) {
                    event.preventDefault();
                }
            }
 
            for (i = 0, len = mainNav.length; i < len; ++i) {
                element = mainNav[i];
                element.dataNoclick = false;
                element.addEventListener("touchstart", menuTouch, false);
                element.addEventListener("click", menuClick, false);
            }
        }
    });
})(jQuery);

jQuery toggleClass() method

September 20, 2015Code Snippetsadmin

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

 if ( addOrRemove ) {
$( "#foo" ).addClass( className );
} else {
$( "#foo" ).removeClass( className );
}

if ( addOrRemove ) {

$( "#foo" ).addClass( className );

} else {

$( "#foo" ).removeClass( className );

}

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

 $( "#foo" ).toggleClass( className, addOrRemove );

1	$( "#foo" ).toggleClass( className, addOrRemove );

jforjs

JavaScript is most misunderstood language but it is most used language now.

Category Archives: Code Snippets

null >= 0

JavaScript Trick Questions

setAttribute & removeAttribute with checkbox

getElementByTagName vs querySelectorAll

Function Constructor

variable is Array or not?

Sparse to Dense

Array.from to convert array like into array

Clickable main navigation with sub navigation in touch device

jQuery toggleClass() method