Generate UUIDs in Javascript

Resources  |  Generate UUIDs in Javascript

Generating a UUID in JavaScript can be accomplished using various methods. One of the most popular and reliable methods is using a third-party library like uuid. The uuid library provides a simple way to generate UUIDs of different versions (v1, v4, etc.).

Using the uuid Library

  1. Install the uuid Library:

    If you are using Node.js or a project setup with npm/yarn, you can install the uuid library using the following command:

    npm install uuid

    or

    yarn add uuid

  2. Generate UUID (v4) in JavaScript:

    Here is an example of how to generate a UUID in JavaScript using the uuid library:

    // Import the uuid library
const { v4: uuidv4 } = require('uuid');

// Generate a new UUID (v4)
const newUUID = uuidv4();

// Output the generated UUID
console.log('Generated UUID:', newUUID);

Using the uuid Library in a Browser Environment

If you are working in a browser environment, you can use a CDN to include the uuid library. Here is an example using a CDN:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generate UUID</title>
    <script src="https://cdn.jsdelivr.net/npm/uuid@latest/dist/umd/uuidv4.min.js"></script>
</head>
<body>
    <script>
        // Generate a new UUID (v4) using the CDN version of uuid library
        const newUUID = uuidv4();

        // Output the generated UUID
        console.log('Generated UUID:', newUUID);
    </script>
</body>
</html>

Using a Custom Function (Without External Libraries)

If you prefer not to use external libraries, you can generate a UUID (v4) using a custom function. Here is an example:

function generateUUID() {
    // Generate a random UUID (version 4)
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        const r = (Math.random() * 16) | 0;
        const v = c === 'x' ? r : (r & 0x3) | 0x8;
        return v.toString(16);
    });
}

// Generate a new UUID
const newUUID = generateUUID();

// Output the generated UUID
console.log('Generated UUID:', newUUID);

Summary

Here are three methods to generate UUIDs in JavaScript:

  1. Using the uuid library (Node.js/Browser with npm/yarn):

    const { v4: uuidv4 } = require('uuid');
const newUUID = uuidv4();
console.log('Generated UUID:', newUUID);

  2. Using the uuid library (Browser with CDN):

    <script src="https://cdn.jsdelivr.net/npm/uuid@latest/dist/umd/uuidv4.min.js"></script>
<script>
    const newUUID = uuidv4();
    console.log('Generated UUID:', newUUID);
</script>

  3. Using a custom function:

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

const newUUID = generateUUID();
console.log('Generated UUID:', newUUID);

These methods provide flexible options for generating UUIDs in both Node.js and browser environments.