3 different types of JavaScript objects, what is the difference?

Question

I've been deep diving into JavaScript lately and stumbled upon a question.

What is the difference between the following implementations of a object:

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

var myFunction2 = {}

var myFunction3 = function myFunction3() {}

Or with a longer example of the three implementations preforming the exact 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 two first examples are singletons, and last one allows me to create multiple objects. But what are the difference between the first two? Or are they the same, just written a little different?

Answer 1

The first example creates a function myFunction1() and executes it, storing the result (not a function) in the variable myFunction1 — in this case, the name myFunction1 first contains a function, then (once it's executed) it contains the result.

myFunction2 is not a function at all. The brackets {} are an object literal, creating an empty object.

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

Answer 2

In your first example, you are using an IIFE (immediately-invoked function expression) to keep private state.

You can't access _privateVar because variables declared inside an IIFE are in a closure.