0

I'm trying to wrap my head around the nuances between the IIFE and the Immediately Invoked Constructor Function in Javascript.

From what I can gather from the code below, both functions act like anonymous functions in the sense that they cannot be called more than once. The only difference is that they are both called immediately, hence the term "immediately invoked." But I don't understand why you would use an Immediately Invoked Constructor Function, since I thought the whole point of a constructor function was to make reusable code for initializing objects? Especially since I'm under the impression I can write an IIFE to do the same thing as the Immediately Invoked Constructor Function... am I on the right track here... or am I completely off?

Immediately Invoked Function Expression.

(function(userName){
this.name = userName;
this.hasBuildingRights = false;
})("Bob the Builder");

Immediately Invoked Constructor Function.

let user = new function(userName){
this.name = userName;
this.hasBuildingRights = false;
};

Thanks for helping me understand in advance!

Weis.Dime
  • 43
  • 1
  • 5
  • 1
    Do a `console.log(this)` inside them and you'll notice the difference. – Bergi Sep 26 '22 at 23:40
  • Also the second snippet misses to pass `"Bob the Builder"` for the `userName` argument, and the first misses the assignment to the `user` variable. – Bergi Sep 26 '22 at 23:40
  • 1
    Either way, [you should never use an "immediately invoked constructor"](https://stackoverflow.com/q/10406552/1048572). Do the simple `let user = {name: 'Bob the Builder', hasBuildingRights: false};`, or if you really need an IIFE for scoping, the proper module pattern `let user = (() => { …; return {name: 'Bob the Builder', hasBuildingRights: false}; })();` – Bergi Sep 26 '22 at 23:42
  • 1
    Neither of these seems useful to me at all. In the IIFE, `this` is the global object, so it's essentially creating global variables (IIFEs are often used to avoid polluting the global namespace). The IICF could just be an object literal. – Barmar Sep 26 '22 at 23:43

1 Answers1

0

If you had declared that IIFE inside the global scope It would create a variable in window object called name with the value of 'Bob the Builder'.

I've printed the this of first example below.

Window {0: Window, window: Window, self: Window, document: document, name: 'Bob the Builder', location: Location, …}

IIFE was used not just to immediately invoke the function but also to control the behavior of 'this' keyword. Therefore in the example as 'this' takes the global scope it would create the name variable if declared in global.

Coming to the second example it would create a new object with the type 'function'.

{ name: undefined }

and in the prototype of the object there will be a constructor with your defined function. (not posting here as it's hard to get the indentation right).

IIFE and constructor does two different jobs in here.

If you want to create a new object with the user name 'Bob the builder' might I suggest creating a class first and define a constructor to set the name? (note setting name to empty variable is not a must and could skip that like if you like to)

class User {
    name = '';
    constructor(name) {
        this.name = name;
    }
}

let user = new User('Bob the builder');

This will create an object named user as following

User {name: 'Bob the builder'}
Inod Umayanga
  • 114
  • 1
  • 7