Generating Unique IDs with JavaScript

Generating Unique IDs with JavaScript

Sometimes you want to generate unique IDs with JavaScript. Perhaps you're creating several DOM elements and want your script to automatically avoid naming conflicts. Anywhere automatic name or number generation is used, there's a chance you'll need to ensure you can get a unique ID.

    var uniqueID = function() {
        var id = 1; // initial value
        return function() {
            return id++;
        }; // NOTE: return value is a function reference
    }(); // execute immediately

This sneaky anonymous function doesn't actually return a "normal" value the first time it runs. We're using the powerful combination of function literal syntax with inline execution to return a new function, which is assigned to var uniqueID. This new function has access to var id, because that variable was defined in the same scope as the function that got assigned to uniqueID.

The first time we call uniqueID(), 1 is returned. That number gets incremented every time we call uniqueID(). Because the variable id belonged to the sneaky anonymous function, there's no way for us to accidentally overwrite that value and start getting duplicate values. For example, if our code later runs uniqueID.id = 0;, that creates a new property of the function uniqueID, and the result of calling uniqueID(); is unaffected. Handy!

Tags

javascript