How to Create a UUID in JavaScript
The UUID identifier has been used in programming since the days a baby-faced David Walsh became a professional software engineer. My first exposure to UUIDs was via a ColdFusion app I inherited and ... the less we say about that the better. In any event, I was recently surprised to see that JavaScript has the ability to create UUIDs.
Developers can use the native JavaScript crypto library to generate a UUID:
crypto.randomUUID() // '5872aded-d613-410e-841f-a681a6aa8d8b'
crypto.randomUUID() // 'fe6c7438-a833-4c7c-9ea3-cdc84ef41dfc'
crypto.randomUUID() // 'e47a03d4-5da3-4451-a2c1-265de99cc2c1'
crypto.randomUUID() // '04cdadeb-0228-43db-85dc-ce7e960a6cde'
It's important to remember that the UUID is not guaranteed to be unique, though the probability of repetition is incredibly low. I look forward to exploring the window.crypto API further to see what other cool things we can do!
![Conquering Impostor Syndrome]()
Two years ago I documented my struggles with Imposter Syndrome and the response was immense. I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions. I've even caught myself reading the post...
![7 Essential JavaScript Functions]()
I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent. Times have changed but there are still a few functions each developer should...
![Add Site Screenshots for External Links Using MooTools Tooltips]()
Before you send your user to an unknown external website, why not provide them a screenshot of the site via a tooltip so they may preview the upcoming page? Here's how you can do just that using MooTools.
The MooTools JavaScript
The first step is to grab...
![Geolocation API]()
One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...
Unfortunately, browser support is very patchy so far…
Plenty of shims/polyills are available.
From https://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid
if (! (crypto.randomUUID instanceof Function)) { crypto.randomUUID = function uuidv4() { return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) ); } }V8 is not equal to JavaScript
Yes, the article should have included ‘node’ or ‘v8’ in the title.
Probably worth mentioning this doesn’t work in Safari or Firefox and is not a W3C Standard nor is it on the W3C Standards Track.
Are there any other libraries that generate uuid other than crypto in js?
https://github.com/uuidjs/uuid
the uuid library
https://www.npmjs.com/package/uuid
A note on browser support would be useful ;) But it‘s great to see that we can soon use it just like that.
Chromium (including Edge): >=92
Firefox: >=95 (Release notes how I discovered the API)
Safari: :(
IE: No!
shim:
if (! (crypto.randomUUID instanceof Function)) { function uuidv4() { return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) ); } }Turns out I cannot edit comments…
if (! (crypto.randomUUID instanceof Function)) { crypto.randomUUID = function uuidv4() { return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) ); } }