Implementing singleton object iffe style

Question

I'm trying to implement the Singleton pattern via iffes and closures. i managed to so but was wandering if there is a difference between both ways (counter and counter2) of using the parentheses.

would love to understand the difference of using parentheses () for invoking the function expression is contained inside the outer parentheses vs using parentheses () for invoking the function expression is outside the wrapping parentheses for the function expression.

var counter = (function sequenceIIFE() {
    
    var current = 0;
    return {
        getCurrentValue: function() {
            return current;
        },
        
        getNextValue: function() {
            current = current + 1;
            return current;
        }
    };
    
})();

var counter2 = (function sequenceIIFE() {
    
    var current = 0;
    return {
        getCurrentValue: function() {
            return current;
        },
        
        getNextValue: function() {
            current = current + 1;
            return current;
        }
    };
    
}());

console.log(counter.getNextValue());
console.log(counter.getNextValue());

console.log(counter2.getNextValue());
console.log(counter2.getNextValue());

Why implement a singleton with closures and not just with classes? — eroironico, Dec 03 '21 at 15:14
What differences have you noticed? Any? "Best practice" is likely unimportant in this case. — Dave Newton, Dec 03 '21 at 15:16
@Nick Because classes make sense only when you have multiple instances? — Bergi, Dec 03 '21 at 15:35

I wrestled a bear once. · Accepted Answer · 2021-12-03T15:45:23.110

-1

There is no functional difference at all, the grouping operator determines the order in which statements are executed (statements in the group execute first). Since there's only one statement in the operator, a function expression, the position of the grouping operator is unimportant.

However, if you're defining the same singleton twice as in your example, I personally would be using a class instead, simply for readability. And even if you're not defining it twice, a class is cleaner.

var counter2 = new(class {

  constructor() {
    this.current = 0;
  }

  getCurrentValue() {
    return this.current;
  }

  getNextValue() {
    this.current++;
    return this.current;
  }
  
})();

console.log(counter2.getNextValue());
console.log(counter2.getNextValue());
console.log(counter2.getNextValue());

If you're concerned about a fraction of a millisecond of performance on a counter structure, you might also consider simply using a literal object:

var counter2 = {
  current: 0,
  getCurrentValue() {
    return this.current;
  },
  getNextValue() {
    this.current++;
    return this.current;
  }
};

console.log(counter2.getNextValue());
console.log(counter2.getNextValue());
console.log(counter2.getNextValue());

edited Dec 03 '21 at 15:45

answered Dec 03 '21 at 15:19

I wrestled a bear once.

22,983
19
69
116

[Don't use `new class`](https://stackoverflow.com/q/38739499/1048572) – Bergi Dec 03 '21 at 15:36
Nothing wrong in using functions, the only thing I would do different to the OP here is use a factory pattern instead of an IFFE for doing multiple counters. etc. Due to prototype chain, classes may also introduce performance issues. – Keith Dec 03 '21 at 15:36
@Keith Due to the prototype chain, classes may actually have better performance than closures from a factory function. But it hardly matters, and even less so for a singleton. – Bergi Dec 03 '21 at 15:38
@Bergi - That's answer is overly dramatic. There are few reasons to *never* do something. I'll agree that a simple literal is more performant, but the singleton class looks cleaner. I tell immediately that it's a singleton with methods instead of a simple data structure. I 100% disagree with your answer. And only a Sith speaks in absolutes. – I wrestled a bear once. Dec 03 '21 at 15:41
@Bergi Good point!!, I just had in the back of my head of the prototype chain, the engine having to traverse up etc. But I assume that issue was with more older browsers. I assume the V8 engines etc, have this well optimised these day. Like you say, hardly matters, not sure why I mentioned it.. – Keith Dec 03 '21 at 15:54
@Iwrestledabearonce. Sure the absolute is overly dramatic, and there may be exceptions, but the general rule still holds. An object literal with method definitions is cleaner and has less boilerplate. Using `class` syntax for singletons is just the wrong tool in JS. These are not the simpletons you are looking for! – Bergi Dec 03 '21 at 16:52

Implementing singleton object iffe style

1 Answers1