Suppose you’re creating a glossary or an alphabetically sorted navigation menu for your web app, and you want an English alphabet array in JavaScript to help you get the job done.
What’s the best way to achieve this?
There are two ways to go about this. You can either hardcode the list of letters in the English alphabet in an array and store it in a constant, or you can write a function that generates it dynamically.
The simplest and most direct approach is to list the letters individually in an array, store them in a constant, and use that constant as a parameter whenever and wherever you need it.
I usually try to avoid hardcoding things in my code. Yes, it allows shortcuts and helps you get the job done quickly, no doubt. But, like most other shortcuts in life, you end up paying a heavy price for it as your app evolves.
The alphabet, however, is different. You can count on it being a strict list of values that doesn’t change all that often. 🙂
Hardcoding the Alphabet
As an Argument
The first way to do this is to hardcode the alphabet as an argument for your method or function.
For example:
console.log("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");The problem here is reusability. Since you haven’t stored the list of letters in a constant, you can’t reference it in another method or function elsewhere in your app.
In a Constant
A sleeker approach, is storing an array of the letters in a constant. Not only does doing so allow you to reference this array in more than one method or function in your app, but you can easily reference individual letters as needed by their indices (remember, the first index is always 0).
For example:
// Store the letters as an array in a constant
const alphabet = ["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"];
// Output the letters in the console
console.log(alphabet);If need be, you could also store an array of uppercase letters. However, I wouldn’t really recommend this. If the UX requirement is to have uppercase letters on the screen, you could always transform them with the text-transform: uppercase CSS property.
With that being said, if you do want to hardcode uppercase letters in an array, here they are:
// Store the letters as an array in a constant
const alphabet = ["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"];
// Output the letters in the console
console.log(alphabet);Note that my code examples above use double quotes; find-and-replace them to single quotes if that’s what your code style guide prescribes.
Convert the Array to a String
If, for one reason or another, you had to convert the list of letters from an array to a string, you can do so using the array.join() method.
This method takes the array in as a parameter, then concatenates the items in it and returns a new string:
// Store the letters as an array in a constant
const alphabet = ["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"];
// Outputs 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
console.log(alphabet.join());By default, the array.join() method returns a string with comma-separated values from the array items.
However, it has an optional parameter that lets you specify a string to separate each pair of adjacent elements in the array. For example, if you wanted them separated by a comma and whitespace, you’d do the following:
// Store the letters as an array in a constant
const alphabet = ["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"];
// Outputs 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
console.log(alphabet.join(", "));Along the way, you can also convert the letters in the string to uppercase using the string.toUpperCase() method:
// Store the letters as an array in a constant
const alphabet = ["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"];
// Outputs 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
console.log(alphabet.join(", ").toUpperCase());All in all, a hardcoded array of lowercase letters is an economic solution to the problem that you can use and transform in various ways with JavaScript’s built-in capabilities. Simply put, it’s “good enough” to get the job done while (a) eliminating redundancies and (b) not leading to overengineering.
Generate an Alphabet Array
To generate an array of the letters of the English alphabet in JavaScript without hardcoding the values, we’ll create an empty array with as many items as there are letters in the alphabet (hint: it’s twenty-six).
Then, we’re going to use the array.map() method, which creates a new array populated with the results of the String.fromCharCode() method. The first method iterates on the array 26 times, and the second returns a value from the UTF-8 C0 controls and basic latin characters charset.
The decimal reference for the letter “a” in UTF-8 C0 is 97, so this is where we need to start. Otherwise, our array will output values from it, but they won’t necessarily be the letters (or even symbols) we need.
Here’s how our code looks like:
// Generates an alphabet array
let alphabet = [...Array(26)].map((_, i) => String.fromCharCode(i + 97));
// Outputs ['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']
console.log(alphabet);This is an unsophisticated, one-line solution that generates the desired result in 58 characters (when you exclude the let alphabet = definition).