Question

Consider the below code.

I created an empty object. And am adding var1,var2,var3 without declaring them.

var har = new Object();
har.var1 = "Var1";
har.var2 = "Var1";
har.var3 = "Var1";

alert( har.var1 );

If I can do this, then why do I need to create a Class and fix the attributes when I can introduce new attributes anytime?

Answer 1

Why would you even need to use objects in the first place? Non-object-oriented languages are already Turing-complete, so everything you can accomplish with objects you can also do without them.

What you’re showing in your example is not really an object, but just a dictionary. In cases like this, where you only need to keep several related properties together, anonymous unprototyped objects like the one you’re using are the de-facto standard approach (though it is customary to initialize them with the shorthand syntax, e.g. var har = {}). It is an object, since it uses the object data structure, but it is not object-oriented.

Actual objects, in contrast, not only define data, but also the operations that you can perform on that data. Objects have not only properties, but also methods which work on these properties. These properties are usually defined in the object prototype (which you’re calling “class”, but Javascript is not a class-based language, but a prototype-based one). All methods defined in the prototype are shared between all instances of that prototype.

function Counter() {
    this.counter = 0;
}

Counter.prototype.increment = function() {
    this.counter++;
    alert(this.counter);
}

var c1 = new Counter();
var c2 = new Counter();

c1.increment(); // alerts 1
c1.increment(); // alerts 2
c2.increment(); // independent from c1: alerts 1 again

Each instance is still a dictionary, as in your example (and you can even still add more properties to them, they are not “fixed” by having a constructor and prototype), but now it can also perform tasks on its properties. This can be done your way as well:

c1 = {
    counter: 0,
    increment: function() {
        this.counter++;
        alert(this.counter);
    }
}

c2 = {
    counter: 0,
    increment: function() {
        this.counter++;
        alert(this.counter);
    }
}

You can see, however, that if you need two counters, without using prototypes you will need to duplicate your entire object definition. This will be cumbersome to write and maintain, and each increment function will be defined separately, thus it will also waste memory.

That said, in cases where you need an object that you know you’ll only ever need one instance of, it makes no sense to define a constructor and a prototype for it. Such objects are usually regarded as namespaces instead of actual objects.

Appendix: Dictionaries vs Objects

A dictionary is a data structure which holds named elements. Besides “dictionary”, they are also called associative arrays or hashmaps. Objects in Javascript are implemented as dictionaries — each property is a named element in the dictionary. In addition to a plain dictionary, objects also have a prototype, which is kind-of like a parent object — when you look up a named element in the dictionary and it is not there, it is automatically searched for in the prototype as well. This way, default properties and methods are defined only once in the prototype, and do not need to be copied into each instance. (The prototype of an object is often visible as the instance.__proto__ property, though this is non-standard and deprecated even in browsers that support it; the actual prototype is defined as an internal, non-accessible property by the standard)

So, Javascript objects are actually dictionaries. When you want to use a plain dictionary to store some related properties together, there is no separate syntax in Javascript to create a dictionary that is not an object, so you create an instance of the base Object type to hold your dictionary (it does not matter if you do var dict = new Object or var dict = {}, the result is the same); thus, dictionaries that you use in your code are also objects.