Create GUID / Create UUID in JavaScript

Generate uuid universally unique identifier with Javascript code

Using window.crypto.getRandomValues to create a UUID/GUID with the crypto api

Let's take a look at the function that will return UUID after it generate GUID from a byte array. It uses a pseudo random number when creating guid with the following code function createuuid. This example is very similar to using the JavaScript String concat() Method

Function generateuuid or function createuuid (whichever you prefer) to generate guid or create guid or uuid in javascript with the crypto api:

function createuuid() {
let bytes = window.crypto.getRandomValues(new Uint8Array(32));
const randomBytes = () => (bytes = bytes.slice(1)) && bytes[0];
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
(c ^ randomBytes() & 15 >> c / 4).toString(16)
);
}

UUID in Javascript with crypto api

Generating uuids

Let's execute it 10 times generate UUID to create guid and checkout the output to see the UUID generated with the below code for a certain uniqueness guarantees in the example guid for the uuid in javascript using:

for (var i = 0; i < 10; i++) {
console.log(createuuid());
}

Generate uuid

guid uuid in javascript

When I ran the function method I received the following sample output for the UUID generated:

1afe978d-420b-4820-b64b-0e22243b6652

779af4c2-3742-4695-9fc2-4d9fac9ecead

2a510685-17cb-466d-b2e3-54c3103ff8a2

e6e4eaec-aade-4143-a313-0589c8dfa3ab

5a6b74f6-e634-419b-91e3-7708dfdfd71f

449b9450-8fd5-4ca5-b6a1-7b618428e893

78b473a0-7cfa-45e2-9c7a-7edb1f8af949

0220e01a-3442-49ca-9e5d-7018b0c77617

62da3118-aecc-4405-be96-79f944d7039e

cf6de48b-99dd-4ebf-ae5d-0cd482292753

Looks pretty good to me. Let's run it again to see some more UUIDs:

5d272b50-5f04-400c-9e45-a8c3fe5d570b

7bc0eccb-5ef5-46ea-bd88-481a3a2b6618

90969df6-7979-4d38-a0ae-f94fd039151e

244b4515-f2de-4b17-81be-714259c0b598

da9e4edf-949b-4918-9485-244f510b3cf3

cdaeb4f2-164a-4436-8f37-02c287906ff1

a9d20c1d-6b6b-4ffa-8158-8dcc96bca078

28a6620d-3e0e-4789-b65b-ca8de0f351c2

41b9cec0-9754-4710-a817-b6bfbda73267

0cd58d8d-934e-41ea-91b8-ed8ecebdbe5d

With this code it's like we have our own uuid package to generate uuid in javascript using a random number and not relying on a new date for the uuid in javascript.

Function createuuid

Creating guid uuid in javascript

I've previously accomplished this by executing a server-side function to generate a GUID (globally unique identifier) with the crypto api and pass it through to my JavaScript with the below code. This saves me the awkwardness of passing a variable from the server to the client when I generate guid to return uuid in javascript.

Generate guid

uuid package with crypto api and a random number

Some other ways to generate uuid would be to use var uuid or import uuid in javascript using randomuuid instanceof function to return random with the following methods for the uuids generated. This is great that it will work in both older browsers and modern browsers without using regular expression. The following code can be executed on page load and contains a small footprint for the identifiers designed with the allowed values.

Published on Jul 6, 2022

Tags: JavaScript | guid | uuid