Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ❤ 💻
We are community of people that helps each other.

If you think you have some skills to help others

help someone and become a part of our community - List Q & A

JavaScript - UUID function in Vanilla JS

0 contributions
6 points

In this article we are going to show how in pure JavaScript write own UUID v4 generator (RFC4122).

From wikipedia:

universally unique identifier (UUID) is a 128-bit number used to identify information in computer systems. The term globally unique identifier (GUID) is also used, typically in software created by Microsoft.

Most popular version example

This version is very common that can be found in internet.

Important note: main disadvantage of this solution is weak performance.
Check below performance comparision.

// ONLINE-RUNNER:browser;

function uuidv4() {
    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);
    });
}

// Usage example:

console.log(uuidv4());
console.log(uuidv4());
console.log(uuidv4());
console.log(uuidv4());

Custom implementation example

This implementation is more than 2 times faster than first one because do not use replace() method.

// ONLINE-RUNNER:browser;

var UUIDv4 = new function() {
	function generateNumber(limit) {
	   var value = limit * Math.random();
	   return value | 0;
	}

	function generateX() {
		var value = generateNumber(16);
		return value.toString(16);
	}

	function generateXes(count) {
		var result = '';
		for(var i = 0; i < count; ++i) {
			result += generateX();
		}
		return result;
	}

	function generateVariant() {
		var value = generateNumber(16);
		var variant =  (value & 0x3) | 0x8;
		return variant.toString(16);
	};

    // UUID v4
    //
    //   varsion: M=4 
    //   variant: N
    //   pattern: xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx
    //
	this.generate = function() {
  	    var result = generateXes(8)
  	         + '-' + generateXes(4)
  	         + '-' + '4' + generateXes(3)
  	         + '-' + generateVariant() + generateXes(3)
  	         + '-' + generateXes(12)
  	    return result;
	};
};
  
// Usage example:

console.log( UUIDv4.generate() );
console.log( UUIDv4.generate() );
console.log( UUIDv4.generate() );
console.log( UUIDv4.generate() );

Methods comparison example

Simple comparison for method is presented in this section.

for count=100000 execution time looks following way:

uuidv4()          524 ms
generateUUIDv4()  185 ms

Example code:

// ONLINE-RUNNER:browser;

// method 1

// copied from above example
function uuidv4() {
    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);
    });
}

// method 2

// copied from above example
var UUIDv4 = new function() {
	function generateNumber(limit) {
	   var value = limit * Math.random();
	   return value | 0;
	}

	function generateX() {
		var value = generateNumber(16);
		return value.toString(16);
	}

	function generateXes(count) {
		var result = '';
		for(var i = 0; i < count; ++i) {
			result += generateX();
		}
		return result;
	}

	function generateVariant() {
		var value = generateNumber(16);
		var variant =  (value & 0x3) | 0x8;
		return variant.toString(16);
	};

    // UUID v4
    //
    //   varsion: M=4 
    //   variant: N
    //   pattern: xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx
    //
	this.generate = function() {
  	    var result = generateXes(8)
  	         + '-' + generateXes(4)
  	         + '-' + '4' + generateXes(3)
  	         + '-' + generateVariant() + generateXes(3)
  	         + '-' + generateXes(12)
  	    return result;
	};
};

// Methods comparison:

var count = 10000;

var t1 = Date.now();
for(var i = 0; i < count; ++i) {
	uuidv4();
}
var t2 = Date.now();
var dt1 = t2 - t1;

var t1 = Date.now();
for(var i = 0; i < count; ++i) {
	UUIDv4.generate();
}
var t2 = Date.now();
var dt2 = t2 - t1;

console.log('uuidv4()          ' + dt1 + ' ms');
console.log('generateUUIDv4()  ' + dt2 + ' ms');

 

0 contributions

Suggested wiki articles:

Suggested findings

Let's do the work and have some fun
  • Dirask is online IT community for professionals and hobbyist to share their knowledge and help each other in extraordinary easy way. ❤ 💻 🙂
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    we will help you. 👍 ✔ 🦄
Read more