Javascript Closures
A closure is a special kind of object that combines two things: a function, and the environment in which that function was created. The environment consists of any local variables that were in-scope at the time that the closure was created.
https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures
Javascript Module Pattern
Module Pattern - It stays out of the global namespace, provides publicly addressable API methods, and supports protected or “private” data and methods along the way.
var myFunc = (function() {
var privateProperty = 10;
return {
print: function() {
console.log(privateProperty);
},
assign: function(a) {
privateProperty = a;
}
}
})();
myFunc.print(); //10
myFunc.assign(100);
myFunc.print(); //100
The private variables can only be accessed from within the anonymous function itself or
from within a member of the return
ed object. This is through the power of closuers.
References
javascript void(0) for HTML link
To create a HTML link which does nothing when user clicks it, use like below
When the user clicks the link, void(0) evaluates to undefined, which has no effect in JavaScript.
References -
https://developer.mozilla.org/en/JavaScript/Guide/Expressions_and_Operators#void
Here is a stackoverflow.com link, which answers why void(0) is better than using
for this requirement
http://stackoverflow.com/questions/134845/href-for-javascript-links-or-javascriptvoid0
Referencing variables in setTimeout function - Javascript Closures
Requirement
- Reference For loop variable i in setTimeout function
Wrong way
for(var i = 1 ; i <= 10; i++) {
console.log('i in for :: ' + i);
setTimeout(function() {
console.log(' i in timeout :: ' + i);
}, 2000);
}
Ouput
i in for :: 1
i in for :: 2
i in for :: 3
i in for :: 4
i in for :: 5
i in for :: 6
i in for :: 7
i in for :: 8
i in for :: 9
i in for :: 10
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
Right way using Closures
for(var i = 1 ; i <= 10; i++) {
console.log('i in for :: ' + i);
setTimeout(function(j) {
return function() {
console.log(' j in timeout :: ' + j);
}
}(i), 2000);
}
Ouput
i in for :: 1
i in for :: 2
i in for :: 3
i in for :: 4
i in for :: 5
i in for :: 6
i in for :: 7
i in for :: 8
i in for :: 9
i in for :: 10
j in timeout :: 1
j in timeout :: 2
j in timeout :: 3
j in timeout :: 4
j in timeout :: 5
j in timeout :: 6
j in timeout :: 7
j in timeout :: 8
j in timeout :: 9
j in timeout :: 10
References:
javascript undefined, null, undefined property, 0, false, '', ==, ===, typeof
== Equals>If the two operands are not of the same type, JavaScript converts the operands then applies strict comparison.
=== Strict equal
Returns true if the operands are strictly equal with no type conversion.
typeof
The typeof operator returns a string indicating the type of the unevaluated operand.
typeof undefined === ’undefined’
undefined
A variable that has not been assigned a value is of type undefined.
false
Examples of expressions that can be converted to false are those that evaluate to null, 0, the empty string (“”), or undefined.
null
null is an object. It’s type is null. Null and Undefined types are == (but not ===)
Undeclared variable
/ var z*/
*z.x // throws a ReferenceError
Check for undefined variable
*var x;
*if (x === undefined) {
* // these statements execute
*}
*else {
* // these statements do not execute
*} check for undeclared variable
*// x has not been defined before
*if (typeof x === ’undefined’) { // evaluates to true without errors
* // these statements execute
*}
*
*if(x === undefined){ // throws a ReferenceError
*
*} check for object property
*var myobj = {‘a’:’a’};
*myobj.hasOwnProperty(‘a’) // true
*var myobj2 = Object.create(myobj);
*myobj2.hasOwnProperty(‘a’) //false
*‘a’ in myobj2 // true check for null
*var c = null
*if (c === null) { // true
*} References
http://saladwithsteve.com/2008/02/javascript-undefined-vs-null.html
http://constc.blogspot.com/2008/07/undeclared-undefined-null-in-javascript.html
http://www.mapbender.org/JavaScript_pitfalls:_null,_false,_undefined,_NaN
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/undefined
https://developer.mozilla.org/en/JavaScript/Reference/Operators/Comparison_Operators
https://developer.mozilla.org/en/JavaScript/Reference/Operators/typeof
http://www.nczonline.net/blog/2010/07/27/determining-if-an-object-property-exists/