I'm trying to learn ExtJS and object-oriented JavaScript in general. I've seen people defining classes in custom namespaces in a couple of ways. What's the difference between these two methods?

Method 1

Ext.ns('myapp.cars');
(function(){
    var Car = Ext.extend(Object, {
       //...
    })

    myapp.cars.Car = Car;
})()

Method 2

Ext.ns('myapp.cars');
myapp.cars.Car = Ext.extend(Object, {
       //...
});

Method 2 is easier to read and requires less code; is there any reason Method 1 is better? Thanks!

I'm trying to learn ExtJS and object-oriented JavaScript in general. I've seen people defining classes in custom namespaces in a couple of ways. What's the difference between these two methods?

Method 1

Ext.ns('myapp.cars');
(function(){
    var Car = Ext.extend(Object, {
       //...
    })

    myapp.cars.Car = Car;
})()

Method 2

Ext.ns('myapp.cars');
myapp.cars.Car = Ext.extend(Object, {
       //...
});

Method 2 is easier to read and requires less code; is there any reason Method 1 is better? Thanks!

• javascript
• extjs
• extjs3

Share Improve this question Follow edited Apr 24, 2012 at 21:51 clint asked Nov 7, 2010 at 20:11 clintclint 14.5k1313 gold badges7474 silver badges8080 bronze badges 1

• 1 Do you mean that Method 2 is easier to read and requires less code? – fijiaaron Commented Apr 24, 2012 at 17:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

It's basically the same, except that you could use private variables in the self-exectuing function of the first method, while you can only define global variables in the second one.

For example:

Ext.ns('myapp.cars');
(function(){

    var carInfo = {
      goodEngine: true
    };

    var Car = Ext.extend(Object, {
       info: carInfo
    });

    myapp.cars.Car = Car;
})()

// carInfo is undefined here, so this will give an error
alert( carInfo.goodEngine );

So, the first method is quite useful if you work with a bunge of variables that you won't use later on.

The following are practically equivalent:

var Car = Ext.extend(Object, {
   //...
});

myapp.cars.Car = Car;

... and:

myapp.cars.Car = Ext.extend(Object, {
   //...
});

In the first example you'd be using a temporary variable to hold a reference to the newly created object, which is then copied to myapp.cars.Car (the reference is copied, not the object). In the second example you'd be assigning the reference to the object directly to myapp.cars.Car.

The reason your first example was enclosed in the self-invoking anonymous function (function(){ })() is to limit the scope of that temporary variable. That is generally done in order not to pollute the global namespace with that Car variable. If there was an other Car variable defined elsewhere, it would not conflict with this one. Example:

var Car = "My Nice Car";

(function(){
    var Car = Ext.extend(Object, {
       //...
    });

    myapp.cars.Car = Car;
})();

alert(Car); // Still "My Nice Car"
            // No conflict with the `Car` variable in the self invoking function.