How To Create a Random String with JavaScript

For many purposes, you can need a random string. Sometimes a long one and sometimes a short one. A lot of time, I use these functions in a unit or end-to-end test to automate even more.

In this post, I will show you how you can create it yourself; I will explain every part of the function to extend it yourself.

Enjoy the ride!

Originally published on byrayray.dev

Get a random number

In JavaScript, we have a Math Object with all kinds of mathematical constants and functions. You need Math.random() when you want to create random things. This will return a random float. (Try it in your console). The result of this function is always higher than 0 and lower than 1.

Math.random()

But since we want to generate a short random string, we don't need a number in the first place. By multiplying the result of Math.random() * 10 you will get a number between 1 and not higher than 10. Our result could be 5.698829761336681 or something like that.

Math.random() * 10 // returns 5.698829761336681

So how do we turn this into a string? Pretty simple, if you put .toString(36) behind this, you will get a string with numbers and letters with a dot in between. With the number 36 as a parameter in the .toString() method, you apply a base 36 encoding on the string.

(Math.random() * 10).toString(36); // returns '9.ja773x85wr'

Every time you run this code, it will be different. If you want to remove the dot, then replace it like this.

(Math.random() * 10).toString(36).replace('.', ''); // returns '1cq54mxwg9hl'

Now that you have generated a random string every time you run it, you can turn it into a function.

function randomString() {
    return (Math.random() * 1000000).toString(36).replace('.', '');
}

What are you want to have a longer string? Well, you can create a loop and turn that into a string again.

function randomString() {
    return [...Array(5)].map((value) => (Math.random() * 1000000).toString(36).replace('.', '')).join('');
}

// returns '8mtmvtuzzfnau0bf0ecy668tzrc3ztc57a7b87vehyu51yb8gj35t7'

I would recommend playing around with this function and using it for something practical.

The next post will be another JavaScript exercise 😉

Thanks!

I hope you learned something new or are inspired to create something new after reading this story! 🤗 If so, consider subscribing via email (scroll to the top of this page) or follow me here on Hashnode.

Did you know that you can create a Developer blog like this one, yourself? It's entirely for free. 👍💰🎉🥳🔥

If I left you with questions or something to say as a response, scroll down and type me a message. Please send me a DM on Twitter @DevByRayRay when you want to keep it private. My DM's are always open 😁