How To Generate an Alphabet JavaScript Array

Imagine building a word game with JavaScript, and you need to pick a random character from the alphabet, but you don’t want to type all the letters by hand. (Please tell me you didn’t consider that 🙈). We will generate it with JavaScript .map, string and the Math.round methods.
No, we want to generate an Array with all the characters of the alphabet (I’m referring to the latin alphabet). We want to do that most straightforwardly and shortly as possible.
Let’s go.
Generate an Array with 26 items
First, we need an Array with 26 items because the Latin alphabet has 26 letters. We can do that simply with this code.
;[...Array(26)]
// returns [...undefined, undefined]
Get a letter based on a number
Now that we have an Array with 26 items in it, we need to have a way to get letters based on this Array. So let’s create an Array with 26 numbers.
;[...Array(26)].map((_, i) => i)
// returns [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]
Based on those numbers, we are going to get a letter. To achieve this, we need the String.fromCharCode()
(check the MDN documentation for what you can do with the fromCharCode method).
;[...Array(26)].map((_, i) => String.fromCharCode(i))
// returns ['\x00', '\x01', '\x02', '\x03', '\x04', '\x05', '\x06', '\x07', '\b', '\t', '\n', '\v', '\f', '\r', '\x0E', '\x0F', '\x10', '\x11', '\x12', '\x13', '\x14', '\x15', '\x16', '\x17', '\x18', '\x19']
Get the correct letter from the alphabet
But those characters are not the ones we want. So we have to add something more. W3Schools offers a list of all the available letters. We can see that the “a” is on number 97. Now we can start counting.
;[...Array(26)].map((_, i) => String.fromCharCode(i + 97))
// returns ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
Now we have our alphabet!
Choose between capital and lowercase characters
If you want capital letters instead of lowercase letters, you should start at position 65. Let’s make a function that supports both.
function generateAlphabet(capital = false) {
return [...Array(26)].map((_, i) => String.fromCharCode(i + (capital ? 65 : 97)))
}
Inside the fromCharCode
method, a ternary operator checks if capital
is false
or not. Notice that the default value of the parameter capital
is false
. When the value is true
, it will return 65
, when it’s false, it will return 97
. So we can easily call the function like this generateAlphabet()
without getting errors.
If you want to have a random letter from the alphabet, you can achieve that by this.
function getRandomLetter() {
const alphabet = generateAlphabet()
return alphabet[Math.round(Math.random() * alphabet.length)]
}
I hope you learned something new or are inspired to create something new after reading this story!
Thanks!
After reading this post, I hope you learned something new or are inspired to create something new! 🤗
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 😁
Suggestions
Mastering The JavaScript Includes() Method
Learn how to use the includes() method in JavaScript to search an array and return a boolean value indicating whether a specific value is present. Quick and easy guide for beginners."
How To Sum Total From Array Of Object Properties With JavaScript Reduce Method
Calculating the total price for your shopping cart was a hassle in the days before the JavaScript reduce method. In this post, I will show you how easy it is to use the reduce method to calculate the total price of a product array in the shopping cart. The JavaScript reduce method is powerful and can calculate a total price based on an array of object properties.
Mastering The JavaScript Find() Method
Searching specific values in arrays is easy with the JavaScript `find()` method. It doesn't matter if you want to find a string, number, boolean, or property of an object in an array. In this post, I will show you how to find values very easily. The find() Array method in JavaScript returns the first item in the array that matches your condition.