DEV Community

Cover image for How To Generate An Alphabet Array With JavaScript
Dev By RayRay
Dev By RayRay

Posted on • Originally published at hasnode.byrayray.dev on

How To Generate An Alphabet Array With JavaScript

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 πŸ˜…).

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 πŸš€

divider-byrayray.png

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]

Enter fullscreen mode Exit fullscreen mode

divider-byrayray.png

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]

Enter fullscreen mode Exit fullscreen mode

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']

Enter fullscreen mode Exit fullscreen mode

divider-byrayray.png

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']

Enter fullscreen mode Exit fullscreen mode

Now we have our alphabet!

divider-byrayray.png

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)));
}

Enter fullscreen mode Exit fullscreen mode

Inside the fromCharCodemethod, 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.

Try the function in this runkit example:

function generateAlphabet(capital = false) { return [...Array(26)].map((_, i) => String.fromCharCode(i + (capital ? 65 : 97))); } generateAlphabet();

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)]
}

Enter fullscreen mode Exit fullscreen mode

Try the function in this runkit example:

function generateAlphabet(capital = false) { return [...Array(26)].map((_, i) => String.fromCharCode(i + (capital ? 65 : 97))); } function getRandomLetter() { const alphabet = generateAlphabet(); return alphabet[Math.floor(Math.random() * alphabet.length)]; } getRandomLetter();

divider-byrayray.png

Thanks!

hashnode-footer.pngI 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 😁

Top comments (1)

Collapse
 
laerciolopesll profile image
LaercioLopesLL

Great post! Thankyou!