understanding JavaScript classes and objects

Question

Sometimes we write

window.COB = window.COB || {};
window.COB.HostWebApp = function() { ... }();

and sometimes we write

window.COB.AppHelper = {

        getUrl: function (absoluteUrl) { ... },
};

What is the difference? what and where can I read to understand this basic and important stuff?

The first one makes sure that `COB` exists as a property of `window` before you try to add a property to it. — Kevin B, Jun 25 '13 at 14:36
do you created a class or an object? sometimes it contains a strange return clause. and sometimes there is a comma between functions but sometime there is no comma between functions. — user217648, Jun 25 '13 at 14:38
@user217648: Are you trying to figure out basic language syntax by reading random snippets of code? If so, that's not a great way to learn. — , Jun 25 '13 at 14:43
@KevinB of course that makes sense. You can either declare an Object (in literal notation - here the functions are separated with ,) or inside a Constructor function where you return the "public" values again as object literal. — Christoph, Jun 25 '13 at 14:43
@CrazyTrain yes I want to learn syntax, as I wrote in my post. — user217648, Jun 25 '13 at 14:46
the something = {a bunch of stuff} is called an object literal. You can create an object in this manner: var counter={add:function(){},value:0}; Now counter has add wich is a function and value wich is a number. There is only one instance of counter. If you wish to create multiple instances then I prefer to use constructor functions and prototype for inheritance http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 — HMR, Jun 25 '13 at 14:47
There's no shortage of learning materials for JavaScript basics. You just need to search... but you can try http://eloquentjavascript.net and [MDN Learn JavaScript](https://developer.mozilla.org/en-US/learn/javascript) for starters. — , Jun 25 '13 at 14:48

score 1 · Answer 1 · answered Jun 25 '13 at 14:38

1

In Javascript there are no classes, only objects. But you can use a function to do some classish things. You can think an object in the form

var name = {};

as a sort of "static" class, where you don't need to instantiate and a

 var name = function(){}

as a class that needs to be instantiated before using.

This is a good reading: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

answered Jun 25 '13 at 14:38

Mir

1,575
1
18
31

so, If I create it like window.cob.MyHelper = { mymethod: function(){ ... }, }; Then it means that I have to instantiate MyHelper before I can use it? – user217648 Jun 25 '13 at 14:41
1

@user217648 no, in this case you don't need to create an instance, you can call your method directly with window.cob.MyHelper.mymethod() since MyHelper is an object literal. – Mir Jun 25 '13 at 14:55

HMR · Accepted Answer · 2013-06-25T14:50:23.713

1

You are defining an object literal to be used as namespaces. Sometimes you want to group your functions and objects in logical groups like an url but in reverse. For example:

com.myCompany.myApplication.Dom
com.myCompany.myApplication.Validators

Where Dom does dom stuff and Validators do validation. You can't just define

com.myCompany.myApplication.Dom

because window.com is undefined and you can't add myCompany on window, this is why in your code window.COB = window.COB || {}; checks if COB exist on window and if it doesn't it's created.

Later you can organise your code in several files so Dom will go in Dom.js (like in Java). If I want to create com.myCompany.myApplication.Dom I have to check step by step if the object hasn't already been created:

com=com||{}; //if com doesn't exist create it
com.myCompany=com.myCompany||{};//if com.myCompany doesn't exist create it
//... and so on

This is because com.myCompany might already be declared in the Validators.js or any other js file and you don't want to just overwrite it.

The code:

window.COB.AppHelper = {

        getUrl: function (absoluteUrl) { ... },
};

will throw an error because COB is undefined on window, you have to define it first.

edited Jun 25 '13 at 14:50

answered Jun 25 '13 at 14:39

HMR

37,593
24
91
160

thank you. it declared COB before and created an object by writing window.COB.HostWebApp = function() {}(); but still my question remains. why the other object is defined like this (without fucntion) window.COB.AppHelper = { – user217648 Jun 25 '13 at 14:55
In an object literal notation the variables have to be separated by a comma. In a function body the syntax is different and lines of code are ended with ; An object literal is a key value pair {key:value} where key can be any valid variable name (or invalid if you put it in quotes) and value is the value. A very exotic example is `var b = {"1 + 1":2};b["1 + 1"];` please don't use that though because it's only to show that you can basically use any string for key. – HMR Jun 25 '13 at 14:55
When you create multiple instances (like users) then use a constructor function when you have only one instance you can use an object literal. You can use an object literal for namespacing as well as shown in my answer: the object `com` doesn't do anything it only holds `myCompany` to declare `com` as a function would be useless because it doesn't do anyting and I'm not going to create multiple instances of `com` – HMR Jun 25 '13 at 14:58
thank you, it was good description to start with – user217648 Jun 25 '13 at 15:04
Is com or myCompany a namespace? – user217648 Jun 26 '13 at 08:45
@user217648 Both are objects but used only as a namespace to group other objects or functions. – HMR Jun 26 '13 at 09:15

understanding JavaScript classes and objects

2 Answers2