DBA Knowledge Base

JavaScript Closure Misunderstanding

Let’s list some well-known facts:

• JavaScript blocks don’t have scope.
• Only functions have scope.
• Variable access speed depends on “distance” of scopes (in which scope is defined a variable and from which scope we want to retrieve it).
• The furthest scope is global scope and it is considered as slowest scope (That is window object in browser implementation of JavaScript).
• Closures are used to cache scope locally and make variable access faster (and for much more…).

Classical closure example is:

//without closure
window.singeltonObject = {/* properties of singleton object */};
getSingeltonObject = function(){
   return singeltonObject;
};
//with closure
getSingeltonObject = (function(){
    var singeltonObject = {/* properties of singleton object */};
    return function(){
          return singeltonObject;
    }
})();

Closure version looks difficult but it is very powerful (for example you can not modify your singelton object, it is closed in a local scope, while when you have defined it in global scope it is accessible from everywere). Les’t explain it:

//without closure
//global scope
window.singeltonObject = {};
getSingeltonObject = function(){
    //local scope
   return singeltonObject; //goes out of local scope in
                            //global scope, finds variable and
                            //reads it.
}
//with closure
//global scope
getSingeltonObject = (function(){
    //local scope1
    var singeltonObject = {};
    return function(){
          //local scope2
          //while definition of this function local scope1
          //is cached and singeltonObject will be found there,
          //it will not be searched in global scope
          //that's why it is faster and useful.
          return singeltonObject;
    }
})();

What happens when we have three or multiple deep closure? I mean, when we have such kind of code:

/**
*  @param {Number} personId
*  @return {Object}
*     Has method logPersonId that logs parameter
*/
getSingeltonObject = (function(){
    //scope0
    var singeltonObject;
    return function(personId){
          //scope1
          if(!singeltonObject){
               singeltonObject = {
                    logPersonId : function(){
                        console.log(personId);
                    }
               }
          }
          return singeltonObject;
    }
})();

At first glance everything is OK, but there is a bug:

getSingeltonObject(1).logPersonId(); // 1 will be logged
getSingeltonObject(123).logPersonId(); //still 1 will be
                              //logged instead of 123 :) why?

Because the function logPersonId is defined once, it caches the scope1 and at that time the parameter personId equals to 1. During the second call logPersonId is already defined and it has cached scope1 when personId was equal to 1 and it still “remembers” it. That is why in both calls value 1 was logged.

What is solution? scope0. We have to update personId in scope0 by creating a new variable in it (for example newPersonId) and assigning it personId everytime the getSingeltonObject is called. The code will look like this:

getSingeltonObject = (function(){
    //scope0
    var singeltonObject, newPersonId;
    return function(personId){
         //scope1
         newPersonId = personId;
          if(!singeltonObject){
               singeltonObject = {
                    logPersonId : function(){
                        console.log(newPersonId); //newPersonId
                    //will be found in scope0 and it will
                    //equal to parameter of getSingeltonObject
                    //function every time.
                    }
               }
          }
          return singeltonObject;
    }
})();

This was a little about JavaScript closure and its complexity.

JavaScript shorthands

Let’s talk about shortening JavaScript code. Browser has to parse JavaScript source code every time when it is used in a web page, because JavaScript is a scripting language and the browser gets raw source code as a text. So, code shortening gives the following benefits:

• Less amount of bytes will be downloaded from the server, which means that the download time will be shorter.
• Browser parsing phase will take less time
• Code will be written/read faster and so on.

That’s why shortening code is good. Now let’s talk about how and when code can be shortened:

Boolean(value)

!!value

Number(value)

+value

prop = value || defaultValue;

if(foo){
  return foo;
}else{
  return bar;
}

foo || bar

if(foo){
  return bar;
}else{
  return foo;
}

foo && bar

if(condition){
  return val1;
}else{
  return val2;
}

(condition) ? val1 : val2;

if(!val){
  //calculate val just once
  val = calcVal();
}
//use val variable

(!val && (val = calcVal()) );
//use val variable

Problem when using JavaScript keyword in code

It is well known advice/rule in programming that you must not use keywords in your own code (considered cases when programming language gives ability to do it). But sometimes when programmer is overtired may forget this rule and builds a huge logic and writes a big amount of code using language keywords. And then flow of code execution goes wrong or illogically. What is effective solution of this kind of situations?

Let’s discuss it when coding in JavaScript. For example, if you have defined array of this kind of objects:

{
	title		             : 'Employees',
	root		             : 'employeesList',
	display 	             : 'always',
	constructor: {
			fn			: someFunction,
			config		: {
				rootVisible	: false,
				listeners: {
              		                    click: function(node) {
                                                alert('Not implemented yet!');
				            }
				 }
			},
			type		: 'tree',
			children	: 'subEmployees',
			getText		: function(node){
			    return node.text || 'EMPTY';
			}
	}
}

Object looks quite complicated, there is used JavaScript’s keyword constructor, I’ve array that contains objects of this kind and have build logic on this array. Once I needed to check if i-th object had property constructor and as usual I wrote:

    for(var i=0; i<array.length; i+=1){
        if(array[i].constuctor){
            alert('has property constuctor');
        }else{
            alert('doesn\'t have constructor');
        }
    }

 
The result always was: has property constuctor. Of course it would have!!! 😀 why? Because every JavaScript object has property constructor since every object is directly or indirectly inherited from Object function (or class in this case) and Object.prototype object contains property constructor that is reference to function which created that object. So, every JavaScript object has property constructor because JavaScript language defines Object.prototype.constructor as reference to function that created object. (new ThisWillBeReturnedByConstructorPropertyOfObject() ), more shortly “constructor” is keyword :).

When I realized it I was confused for a second but then I remembered about function hasOwnProperty that also have every object (because Object.prototype.hasOwnProperty is defined by language). This function gets one parameter -{String} property of an object. And returns Boolean true if object has not inherited property and has defined it itself. So I changed my code like this and everything was corrected:

    for(var i=0; i<array.length; i+=1){
        if(array[i].hasOwnProperty("constuctor")){
            alert('has property constuctor');
        }else{
            alert('doesn\'t have constructor');
        }
    }

I do not provoke writing a bad code. All I wanted to say is that, unfortunately, if you have written a bad code, that I described above, there is a way by which you can go around of problem by a little change. In the most cases programmers do not have enough time to spend on not scheduled tasks.