DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Creating and Generating UUIDs with Javascript
Johnny Simpson
Johnny Simpson

Posted on • Originally published at fjolt.com

Creating and Generating UUIDs with Javascript

Universally Unique Identifiers (UUIDs) are used all over the place in software development for everything from identifying object elements to DOM elements on a web page. They are unique, 128 bit identifiers consisting of 36 characters in the format 8-4-4-4-12 - for example, f81e7af3-fcf4-4cdd-b3a3-14a8087aa191. UUIDs typically do not rely on a registry or database to ensure uniqueness. The chances of a UUID being a duplicate is not zero, but it is so close that most ignore the risk.

In Javascript, there are many ways to create UUIDs. With that in mind, let's look at how you can create UUIDs with Javascript.

Β Option 1: use the crypto.randomUUID() method

crypto.randomUUID is a relatively new and reliable way of making UUIDs with native Javascript. It's supported in all modern, evergreen browsers and can generate a UUID with one line of code. The crypto method is available on the global this object on browsers - also known as window. It is also available on Node.JS

You can therefore now generate UUIDs like so in the browser:

console.log(this.crypto.randomUUID()); // f81e7af3-fcf4-4cdd-b3a3-14a8087aa191
Enter fullscreen mode Exit fullscreen mode

Or, in Node.JS from version 19.0 like this:

import crypto from 'crypto'

console.log(crypto.randomUUID()); // f81e7af3-fcf4-4cdd-b3a3-14a8087aa191
Enter fullscreen mode Exit fullscreen mode

Β Option 2: use the UUID package

There is a very popular package on NPM called uuid which does all the grunt work for you and generates reliable UUIDs. It can be used in a Node.JS project by first installing it, and then running it in your code.

First, use npm to install:

npm i uuid
Enter fullscreen mode Exit fullscreen mode

Then you just have to import and use it in your code like this:

import { v4 as uuid } from 'uuid';

let myUUID = uuid(); // Returns a random UUID xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
Enter fullscreen mode Exit fullscreen mode

The uuid package is a reliable method of creating UUIDs in Node.JS.

Β Option 3: use the crypto.getRandomValues() method

It is possible to generate your own uuid function using crypto.getRandomValues(). This is useful in situations where you're dealing with Node.JS versions before 19.0, or have to support old browsers. crypto.getRandomValues() is supported as far back as Chrome 11.

function uuid() {
    return ('10000000-1000-4000-8000-100000000000').replace(/[018]/g, c => (
        c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
    );
}
Enter fullscreen mode Exit fullscreen mode

This function is based off the work here - and generates reliable UUIDs if you need your own function to do so.

Option 4: Math.random() (not recommended)

The last resort, and the dirtiest solution is to use Math.random(), however this is not generally a good idea, since Math.random() does not do a sufficiently good job of generating UUIDs to enure uniqueness. You should also not need this since we now have the crypto.randomUUID() method widely available.

If you want a real UUID, it's best to avoid this solution, but it can provide a quick fix on a project where you need a UUID fast for testing. This could be acceptable as a fall back when you don't have randomUUID() support or the uuid package available:

function uuid() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}
Enter fullscreen mode Exit fullscreen mode

Β Conclusion

That about covers all the different ways to make UUIDs in Javascript. Hope you've enjoyed this guide - check out more about Javascript here.

Top comments (1)

Collapse
 
abrahamlawson profile image
Lawson

I suggest another package nanoid .
I has used it manny times and it works fine, but the thing I most like from nanoid is it's small (tiny) more than others.

We want your help! Become a Tag Moderator.
Check out this survey and help us moderate our community by becoming a tag moderator here at DEV.