How to generate unique ID in Javascript? Here is several ways how to do it.

There are two different approach when it comes to generate unique ID in Javascripts:
1. Generate random unique id

2. Generate UUID (Universally Unique IDentifier) or GUID (Globally Unique IDentifier)

1. How to generate unique value in JS

Simple way by just using built in Javascript Date.now() feature. This will return current time in milliseconds

                    Date.now()
// output => 1648535651689

But be aware that this number is actually not generated every millisecond, so from that point of view maybe is better to use performance.now()

                    performance.now()
// output => 2423349.599999994

If you want to get more unique value, we can combine Math.random() with the time and output it as a string:

                    Date.now().toString(36) + Math.random().toString(36).substr(2)
//output => l1brvxk7bdjboqjs6yc

// or by using performance.now

performance.now().toString(36) + Math.random().toString(36).substr(2)
// output => 1lr99.p7776xkoo2mkio8f

// or maybe without a date 
Math.random().toString(36).substr(2, 32)
// output => r2vpzr691q

2. Generating UUID or GUID

However if you want to generate  UUID ( Universally Unique IDentifier ) or GUID ( Globally Unique IDentifier ), there are some rules how this ID should look like and therefore value needs to be in this format  "xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx"  and guarantee certain uniqueness.

The most simple solution (and it is becoming standard in web crypto world)  for this is by using "Crypto.randomUUID()" javascript:

                    
Crypto.randomUUID()
// output => 'eda301e1-6180-407c-8295-ffe170a2b971'

// or this

crypto.getRandomValues(new Uint32Array(4)).join('-');
// output => '1668636045-2187264721-1244211637-901894732'

However there are some limitations when using Crypto

  • it is not supported by Internet Explorer
  • available only in secure context (HTTPS)


If you want to use alternative solutions you can try some of these examples:

                    URL.createObjectURL(new Blob([])).substr(-36);
// output => '855c97e0-1a36-483d-a1d1-d2d4779dba96'

Or you can use method provided by Jeff Ward which does not use crypto - it should work on older browsers and it is optimized for performance

                    var lut = []; for (var i=0; i<256; i++) { lut[i] = (i<16?'0':'')+(i).toString(16); }
function e7()
{
    var d0 = Math.random()*0xffffffff|0;
    var d1 = Math.random()*0xffffffff|0;
    var d2 = Math.random()*0xffffffff|0;
    var d3 = Math.random()*0xffffffff|0;
    return lut[d0&0xff]+lut[d0>>8&0xff]+lut[d0>>16&0xff]+lut[d0>>24&0xff]+'-'+
    lut[d1&0xff]+lut[d1>>8&0xff]+'-'+lut[d1>>16&0x0f|0x40]+lut[d1>>24&0xff]+'-'+
    lut[d2&0x3f|0x80]+lut[d2>>8&0xff]+'-'+lut[d2>>16&0xff]+lut[d2>>24&0xff]+
    lut[d3&0xff]+lut[d3>>8&0xff]+lut[d3>>16&0xff]+lut[d3>>24&0xff];
}

console.log(e7())
// output => 83aef830-c8fc-4066-9759-9cfa092d4218