While it is easy enough to create an object literal, there are cases in which you may want to return one from a constructor. When doing so, you return an object literal that has added value.
Everyone knows that creating a JavaScript object literal is as simple as: var foo = {}. No problem at all. In fact, we can even add properties and methods to this object with such expressions as:
|
1 |
foo.name = "bar" |
or…
|
1 2 3 |
foo.say = function(){ alert("this is the say function"); } |
While these approaches are both simple, there is a difference between an object literal and an instance of a class. For example, var foo = new Foo() is not quite the same thing as our previous var foo = {}. The question is, can we have it both ways? On the whole, the answer is: “Yes!”
Because of the very expressive nature of JavaScript, what we return from a function is really up to us. So, if we want to have a constructor function that returns an object literal, we can literally (sorry : – ) just use the “return” statement, and put an object on the other side of that.
Example # 1 – Return a simple object
|
1 2 3 4 5 6 7 8 9 10 |
var Foo = function(){ return { color: "blue", say: function(){ console.log("this is the say method"); } } } var bar = new Foo(); bar.say(); //this is the say method |
In example # 1, the bar variable becomes an instance of our Foo() constructor. As a result, bar is an object literal. When we run its say() method we get the expected output, and if we were to run the following command: console.log(bar.color), we would get “blue“. But there is really not much added value here. Of course we could have accomplished the same end result by simply saying var bar = {} and including the same exact properties and methods.
But there is, in-fact, great potential for some pretty serious added value here. For example, the difference between simply assigning an object literal to bar and returning an object literal from our Foo() class is that when we instantiate Foo(), we sill have access to the outer function. This closure provides a scope in which we can store private members, to be accessed later if we wish, which is very important.
Example # 2 – Return an object with a privileged method
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var Foo = function(){ var _acctNum = ''; return { getAcctNum: function(){ return _acctNum; }, setAcctNum: function(newAcctNum){ _acctNum = newAcctNum; } } } var bar = new Foo(); |
In example # 2, we still return an object literal, and as a result, the resulting instance is just an object literal. The added value is that we also defined one private variable: _acctNum. In fact, translates to a new level of functionality: the _acctNum variable is not available to the outside world. Therefore, we have complete control over how it is mutated. Here we have defined two methods _getAcctNum and _SetAcctNum. Therefore, these privileged members have access to our private variable _acctNum. So, most importantly, we can change or retrieve the value of _acctNum using these two privileged methods.
Finally, we can do the following:
|
1 2 3 |
bar.getAcctNum() // an empty string bar.setAcctNum("123456") bar.getAcctNum() // "123456" |
Summary
The added value of returning an object literal from a constructor is that while you have a very simple hash table to work with as your instance, you also have access to private variables that were defined within the constructor. As a result, in this case, you can think of the returned value as bar = {}, but with added value.
Helpful Links about JavaScript Objects
http://www.w3schools.com/js/js_objects.asp
[…] that object literal was returned by a function (and that is a critical detail). Because that object literal was returned by a function, the two anonymous functions that are members of the object literal have access to the function […]