How to prevent overriding using Immediately Invoked Function Expression in JavaScript ?
Last Updated :
01 Jul, 2020
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
html
<!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>
This file has linked script1.js, script2.js and app.js as external javascript files which are given below:
Filename: script1.js
javascript
var arsalanGreeter = {};
arsalanGreeter.name = "Arsalan";
var greeting = "Hello ";
arsalanGreeter.sayHello = function() {
console.log(greeting + arsalanGreeter.name);
}
var johnGreeter = {}
johnGreeter.name = "John";
var greeting = "Hi ";
johnGreeter.sayHi = function() {
console.log(greeting + johnGreeter.name);
}
arsalanGreeter.sayHello();
johnGreeter.sayHi();
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
html
<!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>
(function (window) {
var arsalanGreeter = {};
arsalanGreeter.name = "Arsalan";
var greeting = "Hello ";
arsalanGreeter.sayHello = function() {
console.log(greeting + arsalanGreeter.name);
}
window.arsalanGreeter = arsalanGreeter;
})(window);
(function (window) {
var johnGreeter = {};
johnGreeter.name = "John";
var greeting = "Hi ";
johnGreeter.sayHi = function() {
console.log(greeting + johnGreeter.name);
}
window.johnGreeter = johnGreeter;
})(window);
In the above two files, we have created IIFE and passed to the window variable and invoked that.
Filename: app.js
javascript
arsalanGreeter.sayHello();
johnGreeter.sayHi();
After doing the above mentioned changes that is adding Immediately Invoked Function Expression, the output of the console will look as shown below:
Similar Reads
Immediately Invoked Function Expressions (IIFE) in JavaScript Immediately Invoked Function Expressions (IIFE) are JavaScript functions that are executed immediately after they are defined. They are typically used to create a local scope for variables to prevent them from polluting the global scope. Syntax: (function (){ // Function Logic Here. })();Immediately
2 min read
How to prevent overriding using fake namespace 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 jav
2 min read
How to invoke a function without parenthesis using JavaScript ? Method 1: Using the new operator. The new operator is used to create an instance of an object which has a constructor function. This constructor function can be used to write our own function and then be invoked by the new operator. The parenthesis is optional when using this operator, hence the fun
2 min read
How to create a function that invokes function with partials prepended arguments in JavaScript ? In this article, we will see how to create a function that invokes functions with partials prepended to the arguments it receives in JavaScript. Before understanding the problem statement and approaching the solution for the same, let's, first of all, know what a function (also called a method) is a
5 min read
How to override a JavaScript function ? In this article, we are given an HTML document and the task is to override the function, either a predefined function or a user-defined function using JavaScript. Approach: When we run the script then Fun() function is called. After clicking the button the GFG_Fun() function is called and this funct
2 min read
How to transform String into a function in JavaScript ? In this article, we will see how to transform a String into a function in JavaScript. There are two ways to transform a String into a function in JavaScript. The first and easy one is eval() but it is not a secure method as it can run inside your application without permission hence more prone to th
3 min read