Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to prevent overriding using fake namespace 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 created internally. This usually occurs due to the presence of variables or functions with the same name in the global scope.

Suppose we have following files:
Filename: index.html

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!




<!DOCTYPE html>
<html>
<head>
    <title>Namespace</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




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

Filename: script2.js






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

Filename: app.js




sayHello();
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 in the global scope. This is the reason script2.js is overriding over script1.js

In order to fix this issue we will use the concept of the namespace as described below with the following changes made to these files:

Filename: index.html




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

Filename: script1.js




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

Filename: script2.js




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

In the above two files, we have created an object and then assigned names to the name variable. In this way, we have prevented any overriding issue.
Filename: app.js




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

In the above file, we have used a new function name and that will get invoked while running program and your console window will look as shown below:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!