Iterating through words
In working on my final project for the Javascript phase of my coding boot camp, I decided to make an app to help with the currently-hot word game, Wordle. I started out writing naive code, but eventually started to realize that I was not keeping things DRY (don’t repeat yourself), particularly when it came to updating the data based on user input. For instance, there were many situations when I needed to check the current state of many fields (letter boxes a la Wordle) and update the background data according to any changes.
To help with this, I built a helper function that would iterate over all of the letters that had been input so far:
// Iterates a function over the entire word grid
const slots = function(pass) {
for (let i=0; i<=currentWord; i++) {
for (let j=0; j<5; j++) {
let button = document.getElementById(`slot-${i}-${j}`);
pass(button, j);
}}}
For the above, currentWord is a global variable keeping track of how many lines of entry the user has thus far entered. I made use of the i and j variables to both iterate the for function and also to select the appropriate button in the DOM. I made a similar function for rows:
// Iterates a function over the current word row
const row = function(pass, thru, check) {
for (let i=0; i<5; i++) {
let button = document.getElementById(`slot-${currentWord}-${i}`);
if (check) {
if (pass(button, check) === true) {
return i;}};
pass(button, thru);}}
However, in the case of the row iterator function, I discovered that I sometimes needed more information than just a passthrough function. For instance, to enable or disable all of the buttons in a row, I need to also know what function to either attach to or remove from the event listener. Thus I added an argument (thru) to fill this need.
Get Jarod Wilson’s stories in your inbox
Join Medium for free to get updates from this writer.
I also found that sometimes I wanted to check for whether the row contained a specific letter, and if so, in which slot. I put this functionality inside of the row iterator function as a third argument, and the pertinent code only fires if a third argument is entered.
The final major iteration need that I discovered was for the storage of data related to each letter in the alphabet. In order to “hold on” to what information the user was inputting, I decided to create an array of letter objects that stored information like whether that letter had been previously input by the user, what color designation it was given, and what position. The following code was my iterator to create the initial array, and then also to check data in that array and pull from it:
// Iterates a function over the entire keyboard
const keys = function(pass) {
for (let i=0; i<26; i++) {
let letter = String.fromCharCode(97 + i);
let key = document.getElementById(`key-${letter}`);
pass(letter, key);}}
I suppose, on reflection, that I expected this to be more useful in iterating over the actual keyboard buttons in the interface, but it turned out that I needed it more for background data. Hence its name of “keys.”
In any case, it was helpful to more fully appreciate how nested functions can be used to clean up the code, and keep from writing too many unnecessary copies of the same basic idea!
