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!
![9 Mind-Blowing WebGL Demos]()
As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us. Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos. Another technology available...
![Vibration API]()
Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user. One of those simple APIs the Vibration API. The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...
![CSS Animations Between Media Queries]()
CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...
![:valid, :invalid, and :required CSS Pseudo Classes]()
Let's be honest, form validation with JavaScript can be a real bitch. On a real basic level, however, it's not that bad. HTML5 has jumped in to some extent, providing a few attributes to allow us to mark fields as required or only valid if matching...
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) ); } }