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
