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?

In your first example var myFunction1 = (function myFunction1() {})(); doesn't give you an object. It stores the return value of the function into myFunction1. — nderscore
– nderscore, Commented Jun 28, 2013 at 14:25
@nderscore Yes, but isn't myFunction2 doing that exact same thing aswell? — lejahmie
– lejahmie, Commented Jun 28, 2013 at 14:27
The curly braces have different meaning depending upon how they're used. They can denote object literal syntax, or a block statement, or a function body. — user2437417
– user2437417, Commented Jun 28, 2013 at 14:32

Reinstate Monica -- notmaynard · Accepted Answer · 2013-06-28 14:31:24Z

4

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.

answered Jun 28, 2013 at 14:31

community wiki

Reinstate Monica -- notmaynard

Sign up to request clarification or add additional context in comments.

1 Comment

Reinstate Monica -- notmaynard Over a year ago

I was too slow in typing and the comments scooped me on half the answer. If anyone wants to improve this answer, have at it.

Romain Meresse · Accepted Answer · 2013-06-28 14:30:54Z

1

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.

answered Jun 28, 2013 at 14:30

Romain Meresse

3,04429 silver badges29 bronze badges

6 Comments

lejahmie Over a year ago

You cannot access _privateVar declared inside myFunction2 either. But I get the fact that my second example isn’t a function at all. But what is the functional difference? It performs the same task?

Romain Meresse Over a year ago

@jamietelin : Hum no, I can confirm that you can access _privateVar in myFunction2. This is the functional difference

lejahmie Over a year ago

Have you copy / pasted and tested the code? I get undefined (updated my question with output)

Romain Meresse Over a year ago

@jamietelin : do console.log(b._privateVar); instead of console.log(b.privateVar); ;)

lejahmie Over a year ago

AAAAAAAAAAAAAAAH. Ofcource!

|

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related