How to prevent overriding using fake namespace in JavaScript ? Last Updated : 01 Jul, 2020 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 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> This file has linked script1.js, script2.js and app.js as external javascript files which are given below: Filename: script1.js javascript var name = "Arsalan"; function sayHello(){ console.log("Hello "+name); } Filename: script2.js javascript var name = "John"; function sayHi(){ console.log("Hi " + name); } Filename: app.js javascript 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 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 javascript var arsalanGreeter = {}; arsalanGreeter.name = "Arsalan"; arsalanGreeter.sayHello = function(){ console.log("Hello "+ arsalanGreeter.name); } Filename: script2.js javascript 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 javascript 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: Comment More infoAdvertise with us Next Article How to prevent overriding using Immediately Invoked Function Expression in JavaScript ? M MohdArsalan Follow Improve Article Tags : JavaScript HTML-Misc JavaScript-Misc Similar Reads How to declare namespace in JavaScript ? The coding standard of assigning scope to identifiers (names of types, functions, variables, and so on) to avoid conflicts between them is known as a namespace. It is a framework for a collection of identifiers, functions, and methods. It gives its contents a sense of direction so that they are easi 3 min read How to Prevent XSS Attacks in JavaScript? Cross-site scripting (XSS) is a security vulnerability that enables attackers to inject malicious scripts into web pages viewed by users, potentially leading to serious consequences such as data theft and unauthorized actions. Given that JavaScript is a fundamental technology in web development, it 4 min read 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 jav 2 min read How to Detect an Undefined Object Property in JavaScript ? Detecting an undefined object property is the process of determining whether an object contains a certain property, and if it does, whether the value of that property is undefined. This is an important concept in JavaScript programming, as it helps to prevent errors that can occur when attempting to 3 min read Namespacing in JavaScript Namespace refers to the programming paradigm of providing scope to the identifiers (names of types, functions, variables, etc) to prevent collisions between them. For instance, the same variable name might be required in a program in different contexts. Using namespaces in such a scenario will isola 2 min read JavaScript Handler preventExtensions() Method JavaScript handler.preventExtensions() method in JavaScript is a trap for Object.preventExtensions() method. New properties cannot be added to an object when extensions are disabled. It returns a boolean value. Syntax: const p = new Proxy(target, { preventExtensions: function(target) { } }); Paramet 2 min read Like