How can I create unique IDs with JavaScript?

javascript

unique-ids

dom-manipulation

event-driven

byNikita Barsukov·Aug 10, 2024

Here is a quick and dirty way to create a unique ID utilizing JavaScript. We integrate Date.now() for the time aspect and Math.random() for the randomness.

const uniqueID = `id-${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;

This generates an ID that follows the pattern: "id-{timestamp}-{random}". Here, 'timestamp' is in base 36 to keep it short, and 'random' adds the flavor of uniqueness.

Getting to the root of unique ID generation

Uniqueness of ID: The use of Date.now() provides a time component that aids in preventing collisions. However, Math.random() alone doesn't guarantee true uniqueness due to limited randomness. If you crave for stronger IDs, you may want to try a built-in method:

const secureID = crypto.randomUUID();
// Everybody loves a good superhero, right?

This creates a Version 4 UUID, which is pretty much the Batman of unique IDs - dependable, robust, and not easily duplicated.

Making unique IDs for dynamic elements

When you're busy populating the DOM with dynamic elements such as select boxes, consider these tips:

If you're in a loop, appending a running index or counter will differentiate IDs.
A meaningful prefix goes a long way for quick debugging and readability.
document.createElement and appendChild are your friends for injecting elements into the DOM.
Assign IDs during creation of elements to avoid any interference with existing scripts.

Sensitive matters of case sensitivity

IDs in the DOM are case-sensitive. 'id_myId' and 'id_myid' are as different as apples and oranges in the eyes of JavaScript. Keep this in mind, consistency is key.

Handling dynamism in forms

When you have forms dealing with array data, you can dynamically create select box options just by iterating through it. It's just a matter of using array indexes:

const cities = ['New York', 'Los Angeles', 'Chicago'];
const selectElement = document.createElement('select');
cities.forEach((city, index) => {
    selectElement.options[selectElement.options.length] = new Option(city, index);
    selectElement.id = `city-select-${index}`;
    // Fancy city names deserve fancy IDs!
});

Because every city deserves its own unique identifier!

Wrestling with conflicts in the DOM

Before you introduce a new ID, you might want to do a quick sweep for potential conflicts:

function checkIfIDExists(id) {
    return !!document.getElementById(id);
    // Makes sure you're not playing musical chairs with your elements!
}

Going event-driven in ID generation

In dynamic applications, it's a no-brainer to generate IDs as per user events, such as button clicks, form submissions, or AJAX calls. That'll keep your UI fresh and peppered with element-wise ID identity.

button.addEventListener('click', function() {
    const dynamicID = createUniqueID();
    // Now create an element dynamically with this ID
    const newElement = document.createElement('div');
    newElement.id = dynamicID;
    // Hey newElement, meet your new ID. Make sure to remember it!
});