Constructing Javascript functions as variables [duplicate] - javascript

I am learning JavaScript and have come across of the structure below:
var Test = (function () {
function func1() {
//do something.....
}
function func2() {
//do something.....
}
function func3() {
//do something.....
}
return {
func1: func1,
func2: func2,
func3: func3
};
})();
I am wondering what the return block is doing. Is this a very commonly used JavaScript structure? Please let me know where can I get more information about this.

This is the Revealing Module Pattern.
The returned object contains references to the functions defined inside the IIFE. So the functions defined inside are private to the anonymous function.
But if you want to use the inner functions outside, you can use the returned object.
The value of Test will be
var Test = {
func1: func1,
func2: func2,
func3: func3
};
And you can call func1 from outside as
Test.func1();
This is the way Javascript emulate class. As there is no visibility specifiers using Module pattern, variables/methods can be make public/private.
The revealing module pattern is inspired from Module pattern. In revealing module pattern, only reference to the private variables/methods is returned in an object.
The main idea behind the pattern is avoiding evil global variables. This looks similar to IIFE except an object is returned instead of function. The variables/methods defined inside the IIFE are private to the function. To access any variable/method inside the IIFE, it needs to be added in the returned object and then it can be accessed from outside of IIFE. This pattern takes advantage of closures, so the variables/methods defined inside the IIFE are accessible even after the object is returned.
From Addy Osmani's book Learning Javascript Design patterns
The Revealing Module pattern came about as Heilmann was frustrated with the fact that he had to repeat the name of the main object when we wanted to call one public method from another or access public variables. He also disliked the Module pattern’s requirement for having to switch to object literal notation for the things he wished to make public.
The result of his efforts was an updated pattern where we would simply define all of our functions and variables in the private scope and return an anonymous object with pointers to the private functionality we wished to reveal as public.
Advantages:
Encapsulation. The code inside the IIFE is encapsulated from outside world
Clean, organized and reusable code
Privacy. It allows to create private variables/methods. The private variables/methods cannot be touched from outside of the IIFE.
Disadvantages:
If a private function refers to a public function, that public function can't be overridden
Further Reading:
https://en.wikipedia.org/wiki/Module_pattern
https://carldanley.com/js-revealing-module-pattern/
How to use Revealing module pattern in JavaScript
EDIT
From comment from #Mike
It's of note that it's common to create an object (eg, var me = {};) and then declare the would-be public members on it (me.func1 = function() { /* ... */ };), returning that object at the end (return me;). This avoids the repetition that we see in the return statement of OP's code (where all the public stuff is repeated).

It's a literal object in the return statement. It's like creating an object and then returning it:
var obj = {
func1: func1,
func2: func2,
func3: func3
};
return obj;
The literal object syntax creates an object and sets its properties, just like:
var obj = new Object();
obj.func1 = func1;
obj.func2 = func2;
obj.func3 = func3;
return obj;
The purpose of returning the object is to reveal the functions inside the function to the code outside, while creating a scope for private variables that the functions can use.
When not using private variables, the code does the same thing as:
var Test = {
func1: function() {
//do something.....
},
func2: function() {
//do something.....
},
func3: function() {
//do something.....
}
};
Private variables are declared inside the function scope, and are only reachable by the functions inside it. Example:
var Test = (function () {
var name;
function setName(str) {
name = str;
}
function getName() {
return name;
}
return {
setName: setName,
getName: getName
};
})();
Test.setName("John Doe");
var name = Test.getName();

That works like a class in other programming languages. Therefore, you can access the public func1 member using Test.func1 and call it like a normal function using Test.func1().

Related

implementing private functions for a window.object

I'm creating a wrapper for an API that will be used in a couple different applications.
I'm using a global object and placing the various functions into that object as different keys. So I'll have:
window.globalContainer = {
APIEndpoint1: function(){
make API call and resolve result
},
APIEndpoint2: function(){},
...
}
All the meat of the API calls are directly in the functions. That is, you could go to window.globalContainer.APIEndpoint1 from the console and see the entire function.
Is this generally bad practice for something that's used across multiple applications and acts as a helper library? Or is this acceptable? I looked at jQuery in the console and it seemed to do much of the same. If it is frowned upon, how do I implement private functions within the global object?
A good place to start is anonymous closures:
(function (global) {
var foo = global.foo || {};
//accessible
foo.publicVar = 5;
foo.publicFcn = function (a, b) {
privateFcn(a, b);
...
};
//not accessible
var privateVar = 5;
function privateFcn(a, b) {
...
}
global.foo = foo;
})(window)
With these you can pretty intuitively build a library and not pollute the namespace.
You explicitly say which variables and functions you want to be made accessible.
You can use an IIFE to implement private functions/properties.
window.globalContainer = function () {
//what ever you define here is not accessible outside. Only the API in
//the returned object is accessible outside
function private1() {
make API call and resolve result
}
return {
APIEndpoint1: function(){
private1();
},
APIEndpoint2: function(){},
...
}
}();

Javascript return with colon

I am learning JavaScript and have come across of the structure below:
var Test = (function () {
function func1() {
//do something.....
}
function func2() {
//do something.....
}
function func3() {
//do something.....
}
return {
func1: func1,
func2: func2,
func3: func3
};
})();
I am wondering what the return block is doing. Is this a very commonly used JavaScript structure? Please let me know where can I get more information about this.
This is the Revealing Module Pattern.
The returned object contains references to the functions defined inside the IIFE. So the functions defined inside are private to the anonymous function.
But if you want to use the inner functions outside, you can use the returned object.
The value of Test will be
var Test = {
func1: func1,
func2: func2,
func3: func3
};
And you can call func1 from outside as
Test.func1();
This is the way Javascript emulate class. As there is no visibility specifiers using Module pattern, variables/methods can be make public/private.
The revealing module pattern is inspired from Module pattern. In revealing module pattern, only reference to the private variables/methods is returned in an object.
The main idea behind the pattern is avoiding evil global variables. This looks similar to IIFE except an object is returned instead of function. The variables/methods defined inside the IIFE are private to the function. To access any variable/method inside the IIFE, it needs to be added in the returned object and then it can be accessed from outside of IIFE. This pattern takes advantage of closures, so the variables/methods defined inside the IIFE are accessible even after the object is returned.
From Addy Osmani's book Learning Javascript Design patterns
The Revealing Module pattern came about as Heilmann was frustrated with the fact that he had to repeat the name of the main object when we wanted to call one public method from another or access public variables. He also disliked the Module pattern’s requirement for having to switch to object literal notation for the things he wished to make public.
The result of his efforts was an updated pattern where we would simply define all of our functions and variables in the private scope and return an anonymous object with pointers to the private functionality we wished to reveal as public.
Advantages:
Encapsulation. The code inside the IIFE is encapsulated from outside world
Clean, organized and reusable code
Privacy. It allows to create private variables/methods. The private variables/methods cannot be touched from outside of the IIFE.
Disadvantages:
If a private function refers to a public function, that public function can't be overridden
Further Reading:
https://en.wikipedia.org/wiki/Module_pattern
https://carldanley.com/js-revealing-module-pattern/
How to use Revealing module pattern in JavaScript
EDIT
From comment from #Mike
It's of note that it's common to create an object (eg, var me = {};) and then declare the would-be public members on it (me.func1 = function() { /* ... */ };), returning that object at the end (return me;). This avoids the repetition that we see in the return statement of OP's code (where all the public stuff is repeated).
It's a literal object in the return statement. It's like creating an object and then returning it:
var obj = {
func1: func1,
func2: func2,
func3: func3
};
return obj;
The literal object syntax creates an object and sets its properties, just like:
var obj = new Object();
obj.func1 = func1;
obj.func2 = func2;
obj.func3 = func3;
return obj;
The purpose of returning the object is to reveal the functions inside the function to the code outside, while creating a scope for private variables that the functions can use.
When not using private variables, the code does the same thing as:
var Test = {
func1: function() {
//do something.....
},
func2: function() {
//do something.....
},
func3: function() {
//do something.....
}
};
Private variables are declared inside the function scope, and are only reachable by the functions inside it. Example:
var Test = (function () {
var name;
function setName(str) {
name = str;
}
function getName() {
return name;
}
return {
setName: setName,
getName: getName
};
})();
Test.setName("John Doe");
var name = Test.getName();
That works like a class in other programming languages. Therefore, you can access the public func1 member using Test.func1 and call it like a normal function using Test.func1().

JavaScript Module assignment pattern

I am reading A JavaScript Module Pattern, and wondering why bother to do the module assignment by firing an immediate anonymous function call like this:
YAHOO.myProject.myModule = function () {
return {
myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty.",
myPublicMethod: function () {
YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");
}
};
}();
instead of directly assign the object to YAHOO.myProject.myModule like this:
YAHOO.myProject.myModule = {
myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty.",
myPublicMethod: function () {
YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");
}
};
In that example, there isn't any point. You didn't read enough of the document you linked to.
Section 3 is Add "private" methods and variables in the anonymous function prior to the return statement., and that demonstrates why you would want to use an IEFF here.
It is so you can define local variables which are accessible to the functions you are making public, but aren't directly accessible themselves.

Understanding a basic modular patterns private and public functions

I was just looking at the code of a simple demonstration of modular pattern, have a look :
// Global module
var myModule = (function ( jQ, _ ) {
function privateMethod1(){
jQ(".container").html("test");
}
function privateMethod2(){
console.log( _.min([10, 5, 100, 2, 1000]) );
}
return{
publicMethod: function(){
privateMethod1();
}
};
// Pull in jQuery and Underscore
})( jQuery, _ );
myModule.publicMethod();
The code is pretty straightforward, what I don't understand is what's the need for a publicMethod? Why are privateMethod1 and privateMethod2 inaccessible? I understand that privateMethod1 and privateMethod2 are classic js functions and publicMethod is more of a variable assigned to hold a function.
privateMethod1() and privateMethod2() are local functions declared inside the module function wrapper. As such, they are only visible and callable from within that function wrapper. They can't be reached from outside the module wrapper.
This is the same as a local variable inside a function.
function someFunc() {
// a function declared inside another function is ONLY available
// inside that function
function localFunc() {
// do something
}
// this is just like a local variable which is only available within
// the scope of the function itself
var myVariable = 2;
}
// can't call localFunc here - this will be an error
// because it is defined in a different scope and not available here
localFunc();
Private methods can be useful when you want to create functions or methods that the public methods can use, but you do not want outside callers to be able to also call or use those functions/methods.
Private variables can be used to store state that the public methods or private methods want to reference, but you don't want the outside callers to have access to or be able to mess with.

Return part of a function in javascript

In javascript is there a name for this idiom / pattern? A function which has about 10 inner functions and 10 vars, and returns an object literal usually name "that" which returns a a subselection of the inner functions and vars. For example:
function myFunction() {
var myVar1;
var myVar2;
var myVar3;
...
...
function myInnerFunction1() {
...
}
function myInnerFunction2() {
...
}
function myInnerFunction3() {
}
var that = {
inner1: myInnerFunction1,
inner2: myInnerFunction2,
var1: myVar1
}
return that;
}
It's called "the module pattern" and/or "creating a namespace." It's so you have a private scope for your stuff (the execution context of the call to the wrapper function, myFunction in your example), and you return an object that only has the things on it that you want to make publicly accessible. Those things (myInnerFunction1 for example) have access to the private information within the wrapper function, but nothing using the resulting object does.
In the module pattern, you may well not export anything, if you have nothing public you need to expose directly (for instance, your code is completely self-contained, setting up event handlers and such).

Categories