JavaScript tips and tricks - 3

Is undefined a reserved word
It seems like so, but actually it doesn’t.

var undefined = 'Hello';   undefined; // 'Hello'

This may surprise you, but it does work well. undefined is just a pre-defined variable.

Note: Never assign a value to undefined, that may break your program.

How to check a undefined value
In two situations, a variable is identified as a variable that is not defined.
1. A variable is declared, but not assigned.

var name;   name === undefined; // true

2. A variable is never declared.

name2 === undefined; // error – name2 is not defined

You can see in the second situation an error which has been thrown out.
How to catch this error?
We can use the following way which is vary common to check whether a variable is defined or not:

typeof(name2) === ‘undefined’; // true

how to preload images
The concept of “preload images” is about loading images that are not exist in the document and displaying them later using javascript to response to user’s action. For example, you may want to change an image to another one when mouse hover.

The basic preload syntax like this:

var img = new Image();   img.src = ‘clock2.gif’;

Then you can use it as follows:

<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="clock.gif" mce_class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="clock.gif" alt=""   onmouseover="this.src='clock2.gif';"   onmouseout="this.src=clock.gif';" />

Then, how to preload an array of images:

var source = ['img1.gif','img2.gif'];   var img = new Image();   for(var i = 0; i < source.length; i++) {       img.src = source[i];   }

This will only preload the last image. The rest of the images have no chance to preload before the loop come around again. The right way to do would be:

var source = ['img1.gif','img2.gif'];   for(var i = 0; i < source.length; i++) {       var img = new Image();       img.src = source[i];   }

JavaScript Closures
A closure is a local variable for a function keeps alive after the function has returned.
If you use the function keyword inside another function, you are creating a closure.
A famous example:

function add(i) {       return function() {           return ++i;       };   }   add(2).toString(); // "function () { return ++i; }"   add(2)(); // 3

add(2) is a function, which can access the outer function’s local parameter i.
It’s the power of closure.

You can refer to this wonderful resource for details.

Private variable
JavaScript doesn’t have the mechanism of hidden variable from the outside world.
Sometimes we use name conventions to identify whether a variable is a private member:

var person = {       _name: '',       getName: function() {           return this._name || 'not defined';       }   };   person.getName(); // "not defined"

The underline prefix name convention is used to identify a private member.
But other people can invoke it regardless what name conventions have been applied.

person._name; // ""

Then, how to implement a real private member in javascript?
The core technology to implement a private variable is anonymous function and closure.

var person = {};   (function() {       var _name = '';       person.getName = function() {           return _name || 'not defined';       }   })();   person.getName(); // "not defined"   typeof(person._name); // "undefined"