3 different types of JavaScript objects, what's the difference?

Question

Recently, I have deeply immersed myself in JavaScript and came across a question.

What is the difference between the following object implementations:

var myFunction1 = (function myFunction1() {})(); var myFunction2 = {} var myFunction3 = function myFunction3() {} 

Or with a longer example of three implementations that perform the same task.

 <script> var myFunction1 = (function myFunction1() { var _privateVar = 'Private var'; this.publicVar = 'Public var'; function init( newPrivate, newPublic) { _privateVar = newPrivate; this.publicVar = newPublic; } function getPrivateVar(){ return _privateVar; } function setPrivateVar(string){ _privateVar = string; } return { init: init, getPrivateVar: getPrivateVar, setPrivateVar: setPrivateVar } })(); var myFunction2 = { _privateVar: 'Private var', publicVar: 'Public var', init: function init( newPrivate, newPublic) { this._privateVar = newPrivate; this.publicVar = newPublic; }, getPrivateVar: function getPrivateVar(){ return this._privateVar; }, setPrivateVar: function setPrivateVar(string){ this._privateVar = string; } } var myFunction3 = function myFunction3() { var _privateVar = 'Private var'; this.publicVar = 'Public var'; function init( newPrivate, newPublic) { _privateVar = newPrivate; this.publicVar = newPublic; } function getPrivateVar(){ return _privateVar; } function setPrivateVar(string){ _privateVar = string; } return { init: init, getPrivateVar: getPrivateVar, setPrivateVar: setPrivateVar } } var a, b, c; a = myFunction1; a.init('Private var updated', 'Public var updated'); console.log('== A =='); console.log(a.publicVar); // Public var updated console.log(a._privateVar); // undefined console.log(a.getPrivateVar()); // Private var updated a.setPrivateVar('Private var is updated again'); console.log(a.getPrivateVar()); // Private var is updated again b = myFunction2; b.init('Private var updated', 'Public var updated'); console.log('== B =='); console.log(b.publicVar); // Public var updated console.log(b._privateVar); // Private var updated console.log(b.getPrivateVar()); // Private var updated b.setPrivateVar('Private var is updated again'); console.log(b.getPrivateVar()); // Private var is updated again c = new myFunction3(); c.init('Private var updated', 'Public var updated'); console.log('== C =='); console.log(c.publicVar); // Public var updated console.log(c._privateVar); // undefined console.log(c.getPrivateVar()); // Private var updated c.setPrivateVar('Private var is updated again'); console.log(c.getPrivateVar()); // Private var is updated again </script> 

I know that the first two examples are single, and the last allows me to create several objects. But what is the difference between the first two? Or are they the same, just written a little differently?

Answer 1

The first example creates the function myFunction1() and executes it, saving the result (and not the function) in the variable myFunction1 - in this case, the name myFunction1 first contains the function, then (after its execution) contains the result.

myFunction2 not a function at all. The braces {} are an object literal that creates an empty object.

myFunction3 is the only function in the example. In this case, he does nothing.

Answer 2

In the first example, you use the IIFE expression ( immediately called function expression ) to preserve your personal state.

You cannot access _privateVar because the variables declared inside IIFE are in closure.