How to prevent overriding using Immediately Invoked Function Expression in JavaScript ?

Overriding is basically when you define multiple functions or variables that have the same name, the last one defined will override all the previously defined ones and every time when you invoke a function, the last defined one will get executed. Overriding usually happens when you have multiple javascript files in your page. It can be an external file or the file which you have created internally. This usually occurs due to the presence of variables or functions with the same name in the global scope.

Suppose we have the following files:
Filename: index.html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>IIFE</title>
    <script src="script1.js"></script>
    <script src="script2.js"></script>
    <script src="app.js"></script>
</head>
<body></body>
</html>

chevron_right


This file has linked script1.js, script2.js and app.js as external javascript files which are given below:

Filename: script1.js

filter_none

edit
close

play_arrow

link
brightness_4
code

var arsalanGreeter = {};
arsalanGreeter.name = "Arsalan";
var greeting = "Hello ";
arsalanGreeter.sayHello = function() {
    console.log(greeting + arsalanGreeter.name);
}

chevron_right


Filename: script2.js



filter_none

edit
close

play_arrow

link
brightness_4
code

var johnGreeter = {}
johnGreeter.name = "John";
var greeting = "Hi ";
johnGreeter.sayHi = function() {
    console.log(greeting + johnGreeter.name);
}

chevron_right


Filename: app.js

filter_none

edit
close

play_arrow

link
brightness_4
code

arsalanGreeter.sayHello();
johnGreeter.sayHi();

chevron_right


Here app.js is responsible for invoking functions inside script1.js and script2.js and you will get below output in your console window as shown below:

Well, this happens because we have the same variable name in script1.js and script2.js as “greeting”. This is the reason script2.js is overriding over script1.js.

In order to fix this issue, we will use the concept of Immediately Invoked Function Expression (IIFE) as described below:

Now our files will look like this:
Filename: index.html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>IIFE</title>
    <script src="script1.js"></script>
    <script src="script2.js"></script>
    <script src="app.js"></script>
</head>
<body></body>
</html>

chevron_right


Filename: script1.js

filter_none

edit
close

play_arrow

link
brightness_4
code

(function (window) {
   var arsalanGreeter = {};
   arsalanGreeter.name = "Arsalan";
   var greeting = "Hello ";
   arsalanGreeter.sayHello = function() {
       console.log(greeting + arsalanGreeter.name);
   }
   window.arsalanGreeter = arsalanGreeter; 
})(window);

chevron_right


Filename: script2.js

filter_none

edit
close

play_arrow

link
brightness_4
code

(function (window) {
   var johnGreeter = {};
   johnGreeter.name = "John";
   var greeting = "Hi ";
   johnGreeter.sayHi = function() {
    console.log(greeting + johnGreeter.name);
   }
   window.johnGreeter = johnGreeter; 
})(window);

chevron_right


In the above two files, we have created IIFE and passed to the window variable and invoked that.
Filename: app.js

filter_none

edit
close

play_arrow

link
brightness_4
code

arsalanGreeter.sayHello();
johnGreeter.sayHi();

chevron_right


After doing the above mentioned changes that is adding Immediately Invoked Function Expression, the output of the console will look as shown below:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.