# The right way to generate a random number in JavaScript

*Last updated: May 20, 2022.*

There’s a lot of reason you’d want to generate a random number in JavaScript: randomizing the appearance of contents, shuffling an array, generating a password, and more.

The most common way is using the in-built `Math.random()`

. But `Math.random()`

does not generate cryptographically secure random numbers!

Therefore, depending upon the end-goal, methods on the `crypto`

interface should also be used to create more strongly random passwords.

##### Table of contents

## Weakly random but quick with `Math.random()`

The quick and simple way to generate a random number is using the `Math.random()`

method. This method generates a number between 0 and 1 (not inclusive of 1).

So, to generate a random number between two values, the return of calling `Math.random()`

is modified accordingly:

```
/* Use Math.random() to generate a random number (0-10) */
Math.random(); // Returns a value between 0 and <1
Math.floor(Math.random()*10); // Multiples result by 10 and rounds down (result: 0-9)
Math.floor(Math.random()*(10+1)); // Adds one to make return value 0-10
```

Externalizing this logic to a function creates a random number generator:

```
/* A random number generator using Math.random() */
function getRandomInt(max) {
return Math.floor(Math.random() * (max+1) )
}
getRandomInt(3); // 0, 1, 2 or 3
```

### What's wrong with `Math.random()`

?

The catch with `Math.random()`

is that the number it generates is only *weakly* random.

This isn't a design flaw. When JavaScript was created, `Math.random()`

was included to provide a utility function capable of quickly generating random numbers that *appear* like random to humans.

It was never intended to create cryptographically secure random numbers (i.e. numbers random enough that it is almost impossible for a third party to predict them).

So why hasn't it been replaced?

This is because it fulfills its intended purpose. Instead, there is an alternative.

## Strongly random but slow with `crypto.getRandomValues()`

To create cryptographically secure randoms numbers, use the `crypto`

interface available on the global object.

To do so, call the `getRandomValues()`

method, passing in a typed array:

```
/* Get random values with crypto */
const typedArray = new Uint32Array(5); // Create new typed array object (length 5)
crypto.getRandomValues(typedArray); // Assign random values
console.log(typedArray);
{
"0": 3445426891,
"1": 550747900,
"2": 612279700,
"3": 1488281924,
"4": 2641953635
}
console.log(typeof typedArray);
// object Uint32Array
```

To get random values between 0 and maximum value, you can get the remained of `typedArray`

divided by the maximum value +1. This works because the remainder returned is never greater than `max`

.

```
/* A random number generator using window.crypto */
function getRandomInt(max) {
const typedArray = new Uint32Array(1);
crypto.getRandomValues(typedArray);
const res = typedArray % (max+1); // +1 because values should be inclusive of max value
return res;
}
getRandomInt(3); // 0, 1, 2 or 3
```

## Speed test ðŸš€

The difference in speed in generating a single random number is significant: `Math.random()`

is almost 10x faster than `crypto.getRandomValues()`

!

The key takeaway is that there is a speed-to-randomness trade-off: if you want more of one, you will sacrifice the other.

## Takeaway: Choose the right tool for the job!

If speed is important and random-like from a human perspective is good enough, you should probably use `Math.random()`

.

According to this rule of thumb, some good use cases for `Math.random()`

would be:

- Displaying a random image
- Shuffling a playlist
- In games

However, for tasks where randomness is a priority, using `window.crypto()`

is strongly recommended.

For example:

- Generating a password
- Creating a security key
- Lotto numbers

## Summary

`Math.random()`

is something of a misnomer: it generates what appears to us to be a very random number quickly. But its output is not generally considered cryptographically secure. In other words, the randomness of its output is weak enough that it could conceivably be predicted by a third party.

For a greater degree of randomness, use `crypto.getRandomValues()`

instead. This does not produce perfectly random values (no generator can) and is slower. But, when security is a priority, it's the better alternative.

### Related links

- MDN Web Docs: Web Crypto API
- MDN Web Docs: JavaScript Typed Arrays
- Wikipedia: Cryptographically-secure pseudorandom number generator