Colon Javascript Returns

Question

I am learning JavaScript and found 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 does. Is this a very commonly used JavaScript framework? Please let me know where I can get more information about this.

Answer 1

This is a module expansion template .

The returned object contains references to functions defined inside IIFE. Thus, functions defined internally are private to an anonymous function.

But if you want to use internal 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 how Javascript emulates a class . Since there are no visibility qualifiers using the module template, variables / methods can be public / private.

The sample module template is inspired by the module template. When displaying a module template in an object, only a reference to private variables / methods is returned.

The main idea of ​​the template is to avoid evil global variables. This is similar to IIFE, except that instead of a function, an object is returned. Variables / methods defined inside IIFE are private to the function. To access any variable / method inside IIFE, it must be added to the returned object, and then it can be accessed from outside IIFE. This template takes advantage of closures, so variables / methods defined inside IIFE are available even after the object returns.

From the book Addy Osmani Exploring Javascript Design Patterns

The drop-down module scheme arose because Heilmann was upset by the fact that he had to repeat the name of the main object when we wanted to call one public method from another or gain access to public variables. He also did not like the requirements for module templates in order to switch to object literature for what he wanted to make public.

The result of his efforts was an updated template in which we would simply define all our functions and variables in a private area and return an anonymous object with pointers to private functionality that we wanted to disclose as public.

<strong> Benefits:

• Sealing. The code inside IIFE is encapsulated from the outside world
• Clean, organized and reusable code
• Confidentiality. This allows you to create private variables / methods. Private variables / methods cannot be affected due to IIFE limits.

Disadvantages:

• If a private function refers to a public function, this public function cannot be redefined

Further reading:

• https://en.wikipedia.org/wiki/Module_pattern
• https://carldanley.com/js-revealing-module-pattern/
• How to use module template expansion in JavaScript

EDIT

From comment by @Mike

It should be noted that it is common for creating an object (for example, var me = {}; ), and then declares public members on it ( me.func1 = function() { /* ... */ }; ), returning this object to end ( return me; ). This avoids the repetition that we see in the return statement of the OP code (where all public things are repeated).

Answer 2

This is the literal object in the return statement. This is like creating an object and then returning it:

 var obj = { func1: func1, func2: func2, func3: func3 }; return obj; 

The literal syntax of an object creates an object and sets its properties, as:

 var obj = new Object(); obj.func1 = func1; obj.func2 = func2; obj.func3 = func3; return obj; 

The purpose of returning an object is to show functions inside a function for code outside, creating a scope for private variables that functions can use.

If you do not use private variables, the code does the same thing:

 var Test = { func1: function() { //do something..... }, func2: function() { //do something..... }, func3: function() { //do something..... } }; 

Private variables are declared within the scope of the function and are available only 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(); 

Answer 3

This works as a class in other programming languages. This way you can access the public element func1 with Test.func1 and call it like a regular function with Test.func1() .