== vs. ===

I know this is really for beginners, but have you ever asked yourself what are the differences between == and === when comparing in JavaScript, and when to use it? Here’s an example:

var a = false;
alert(a === 0); // prints false

That’s false. Even when both the zero and the variable are faulty the entire operation is false. Because the 0 is a number and the variable a is boolean, therefore their different types give us the answer. If there was a comparision only with == the result would be true:

var a = false;
alert(a == 0); // prints true

It’s good when you expect some variable to match certain type to compare with ===. So the correct code is:

var a = false;
alert(a === false); // prints true

Here the type of a compares with boolean. See the complete demo.

Put All The Markers at Once!

The way OpenLayers puts markers on the stage is fine when they are not so much, but once you need more than 100, the library’s solution is not good. The question is is there a way to put all the markers faster than the built in method.

Yes, There is a Way to Speed Up Markers Load

I once wrote about how to speed up markers on OpenLayers, it is clear that my decision was to concatenate the DOM elements like a string after I’ve generated all the markers as markup with innerHTML as it’s faster than appendChild. The only question left is how to convert Longitude/Latitude pair in pixels.

The Answer’s Given by OpenLayers

There is a method called getLayerPxFromLonLat() which do the job. Let me show you a snippet:

ll = map.getLayerPxFromLonLat(new OpenLayers.LonLat(lon,lat));
console.log(ll);

You can see what’s inside the ll object. You can now reference the pixel as ll.y and ll.x.

cssText

You know you can manage to redraw an element with single browser reflow. Instead of using .style.property … you can simply add all CSS properties you’d like to change with simply appending to style.cssText property.

var csstxt = $('#selector').css('cssText') + ';top:100;left:100;border:1px solid red;color:#f00;';
$('#selector').css('cssText', csstxt);

That code is a replacement for

$('#selector').css({
   left : '100px',
   top : '100px',
   border : '1px solid red',
   color : '#f00'
});

enjoy!

Is undefined equal to undefined?

That’s the question! Crockford says it is not, but let see the experiment.

var a, b;
console.log(typeof a);
console.log(a === b);

the answer is – it is.

What if …

continuing from the previous post let assume there’s the following code:

if ( thisIsTrue ) {
   if ( myFuncReturnsTrue() ) {
      printMe('success');
   } else {
      printMe('error');
   }
}

This can be easily ported to:

thisIsTrue && (myFuncReturnsTrue() ? printMe('success') : printMe('error'));

Source

You can see the demo source here. Here’s a snippet:

function func1() {
	alert('func1');	
}
function func2() {
	alert('func2');	
}
 
var a = true;
var b = false;
 
a && (b ? func1() : func2());