Categories:

Avoiding variable and function conflicts in JavaScript

Credits: This tutorial is written and contributed by Alex Vincent. Edited by JavaScript Kit. Alex is a long time visitor of JavaScript Kit, and one of the moderators of CodingForums.

One of the concerns I have about writing scripts and tutorials for other people to use is that invariably, my scripts create new functions, variables, etc., each with names which no one else using my script can use for their own projects.  The same hazard applies to any script you can cut & paste.  In this tutorial, I'm going to offer a few ideas you can use to make sure you don't add too many common object names to your scripts.

Choosing unique object names

Obvious names for any object should really be avoided, as they will be obvious names for other people as well.  It would be far wiser to use a name which (a) describes the object's intended use, and (b) is extremely unlikely to be duplicated.

For instance, if a form was for processing a customer address, I might say: 

document.forms.alxaddress.text.value

If there were two customers' addresses involved, obviously I'd want to include ways to identify which is which. For example:

document.forms.alxaddress.text.value
document.forms.alxaddress2.text.value

By adding the prefix "alx" to my form names, I greatly reduce the chance of them being inadvertently the same as the names chosen by another webmaster for his forms on the same page.

Enlisting the help of the "ID" attribute of HTML

One feature of HTML which has been around for years has been the existence of NAME and ID attributes.  I would suggest it is time to begin using them to uniquely identify scripts:

<script language="javascript" type="text/javascript" id="fakecounter" src="fakecounter.js"></script>

This may not seem very important to you.  Indeed, it probably isn't, except as far as the Document Object Model is concerned.  Nevertheless, by using them, you can also establish a rather quick acronym you can attach as a prefix to each of your script's objects or functions: 

function FC_fakecounter() { 
... 
}

By prefixing the code "FC_" (meaning FakeCounter) before this function, we reduce the chances of running into another object with the exact same name.  With scripts composed of only one function and a few variables, this may not make a lot of sense.  But if your scripts expose a lot of functions and use a lot of variables, you increase the chance of someone using your script while at the same time defining an object which has a name your script shares.  This can cause the user to ask you, "What happened?  My code works fine on its own, why does it crash with yours?"  How much effort will it take you to add a few more characters -- an acronym and an underscore -- to the beginning of your global objects?

You can use any sequence of characters that make sense, as long as they are legal characters for an object name.  Suggestions include abbreviations of the script's ID, your own initials, or the object which you intend to apply the object to (for functions like z = z.addProperties()).  You could even use a random string, but that could be confusing to developers who follow you.