How to print the alphabet with JavaScript

Whether you are doing some programming homework, or you are working on something genuine in your company, like creating a menu that helps the user to search for content alphabetically, typing manually the whole alphabet maybe not the best solution always. There are some languages that include such features, specially templating engines like Smarty:

{* To display the list of characters from A to Z *}
{foreach item=i from='A'|@range:'Z'}
    {* 
        $i in this case contains the character in the order of the loop 
        e.g A, B, C, D ...

        The output would be:
        <a href="/lexicon/A">A</a>
    *}
    <a href="/lexicon/{$i}">{$i}</a>
{/foreach}

However, in JavaScript there's no such thing, so you will have to write your own code to create it. In the following article, I will share with you multiple ways to generate a string with the alphabet in JavaScript.

A. The shortest way

Without a doubt, the faster, shortest, and easiest way to obtain the alphabet in JavaScript is hard-coding it into a variable just like this:

let alphabet = 'abcdefghijklmnopqrstuvwxyz';

Declaring the alphabet doing this will force you to type 44 characters in your code. I know, I mentioned that sometimes we get lazy of typing it where we need it, but hey, you can always search this post and copy it from here!

B. Iterate with a for loop from 10 to 35 and convert it to string using 36 as radix

The JavaScript toString method returns a string representing the specified Number object. It receives as the first argument an integer in the range 2 through 36 specifying the base to use for representing numeric values. In this case, iterating from 10 to 35, converting every number to a string using 36 as the base will return the alphabet's character that we'll concatenate into a string:

let alphabet;

for(i=9,alphabet='';++i<36;){
    alphabet += i.toString(36);
}

// abcdefghijklmnopqrstuvwxyz
console.log(alphabet);

It's a little bit longer, declaring the alphabet doing this will force you to type 79 characters in your code. This logic will be used in the other implementations.

C. Map a numeric array with the spread operator from 10 to 35 and convert it to string using 36 as radix

The following implementation can be done in a single line. It basically iterates over an empty array with 26 items, runs the logic of the function converting every number from 10 to 35 into a string using 36 as radix, and adds it into the array, to finally join the items in the array into a single string:

let alphabet = [...Array(26)].map(_=>(++i).toString(36),i=9).join``;

Declaring the alphabet doing this will force you to type 68 characters in your code.

D. Using String.fromCharCode

This implementation uses the fromCharCode method from the String class in JavaScript, it basically returns a string created from the specified sequence of UTF-16 code units:

let alphabet = String.fromCharCode(...Array(123).keys()).slice(97);

The HTML ASCII reference specifies that the alphabet in lowercase finds it between the 97 (a) and 122 (z), the logic will create an array with 123 items (from 0 to 122):

// 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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122
console.log(...Array(123).keys());

They will be converted to their string representation using fromCharCode, which would output the following text:


 !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz"

You can see the alphabet at the end of the string, right? Finally, the alphabet is extracted using slice, removing all the characters previous to #97.

Happy coding ❤️!