Using Namespaces to Prevent Conflicts

13 Jun

If you’re doing an extensive amount of raw JavaScript coding and suspect that additions could be made to the same pages you’re working on, you can prevent any future conflicts with your code by giving your code its own namespace.

Object-oriented JavaScript implements namespace-like principles due to the fact that properties and methods are declared inside of objects, thus there are less likely to be conflicts. A conflict could arise, however, through object names. And very likely, the conflict will occur “silently”, thus you may not be alerted to the issue immediately.

You can prevent all conflicts by creating a unique namespace. Let’s use the showStatistics function to demonstrate how we can encapsulate code into its own namespace:

if (typeof MY == "undefined") {
  MY = new Object();
  MY.CUSTOM = new Object();

MY.CUSTOM.namespace = function() {
  function showStatistics(args) {

Name: " +; document.write("Team: " +; if (typeof args.position === "string") { document.write("Position: " + args.position); } if (typeof args.average === "number") { document.write("Average: " + args.average); } if (typeof args.homeruns === "number") { document.write("Home Runs: " + args.homeruns); } if (typeof args.rbi === "number") { document.write("Runs Batted In: " + args.rbi + "

"); } } showStatistics({ name: "Mark Teixeira", team: "New York Yankees", position: "1st Base", average: .284, homeruns: 32, rbi: 101 }); } MY.CUSTOM.namespace();

The first few lines create the namespace by checking to see if the “MY” object already exists. This object can be whatever you want it to be. Just pick a name that you don’t think will ever be used again. After the MY object is created, we are then able to create the “CUSTOM” object as a property of the MY object. Then our namespace function becomes a method of the MY.CUSTOM object. Keep in mind that “MY”, “CUSTOM” and “namespace” can each be your own custom names. I chose these for demonstration purposes. They could be CHEESEBURGER.ONIONS.pickles if you want!

The showStatistics function is exactly the same as in the example earlier that utilizes an object literal to pass in the values. But in this case, the entire function, including the object literal, is encapsulated inside my.custom.namespace. The last line invokes the entire function using dot notation, and the function runs exactly the same as it normally would, except that it is protected from conflicting with another function called “showStatistics”.

Leave a comment

Posted by on June 13, 2011 in JavaScript, Mixed


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: