JavaScript Object Literal is a comma separated list of name-value pairs enclosed within a curly braces, means of encapsulating lots of data under a namespace, where the name is a valid variable name and the name can be used as variable. Values can be of any data type, including array literal and object literal.
Purposes of JavaScript Object Literal notion:
- It provides encapsulation
- Avoiding global namespace pollution
- Relatively straightforward to implement
A namespace is a context for identifiers, simply a namespace is an abstract container for items such as names, objects etc. Also within a namespace, the components can not share the same name.
Encapsulation, In his influential book on object-oriented design, Grady Booch defined encapsulation as “the process of compartmentalizing the elements of an abstraction that constitute its structure and behavior; encapsulation serves to separate the contractual interface of an abstraction and its implementation.”
An example given as:
/* * BlogPost : creating BlogPost object using object literal notation * basic structure: {name:value, name:value}; * or can be as { name:value, { name:function(){...},...}, name:value ... } */ var BlogPost = { title: 'Welcome to My Blog', // Blog title numberOfView: 0, // Number of Blog view blogContent: '', // Blog post content URL: 'https://mahtonu.wordpress.com', // Blog post URL flag: false, // Use some flag lastView: null, // Timestamp of the last Blog view //set blog content here setContent: function(content) { this.blogContent = content; }, //get blog content getContent: function() { return this.blogContent; }, //count the number of blog post view incrementView: function() { this.numberOfView++; }, //set timestamp of the last Blog view setTimeStamp: function(time) { this.lastView = time; }, //get timestamp of the last Blog view getTimeStamp: function() { return this.lastView; }, //get blog url getBlogUrl: function() { return this.URL; } };
In the avobe example the “BlogPost” object created using object literal notion with some properties. Thus the property values can be manipulated using methods sharing the namespace. Further adding property or methods are simple enough.
More usage:
//set some post here BlogPost.setContent('I am a body of a blog post!'); BlogPost.setTimeStamp('14th April 2010 09.00PM'); //publish your blog post document.write('Title: '+BlogPost.title); document.write('Post: '+BlogPost.getContent()); document.write('Link: '+BlogPost.getBlogUrl()); document.write('Posted at: '+BlogPost.getTimeStamp()); document.write('Total Viewed: '+BlogPost.numberOfView); //got a hit increment your view no BlogPost.incrementView();
So we are accessing and working around the properties of an object forming a namespace.
References /Further Readings:
Wiki page for Information hiding [Encapsulation Part]
Tim McCormack on Javascript object literal namespacing
Jonathan Snook on Objectifying JavaScript