Building a Word Unscrambler with JavaScript (part 2)

In my last article, I was stuck on a little bug. I thought I had fixed it, but well... let's just say I had an "oops" moment. All that was missing was the logical NOT operator “!” in the if condition like this:

if (!uniquePermutations.includes(newPermutation)) { uniquePermutations.push(newPermutation); } 

I added it and now, we move on to the next problem.

The Length Issue

After generating all the permutations, I noticed something else. My word unscrambler was only giving me permutations that were exactly the length of the input word. So if I typed in "wood," I got permutations like "doow" and "odwo" but never shorter words like "wo" or "ow." That's not what I wanted.

I needed to find a way to generate all possible combinations, not just those of the same length as the input word.

So, here’s what I did:

function generatePermutations(inputString) { const uniquePermutations = []; function generateUniquePermutations(arr, currentIndex, length) { if (currentIndex === arr.length - 1) { const newPermutation = arr.slice(0, length).join(""); if (!uniquePermutations.includes(newPermutation)) { uniquePermutations.push(newPermutation); } } else { for (let i = currentIndex; i < arr.length; i++) { [arr[currentIndex], arr[i]] = [arr[i], arr[currentIndex]]; generateUniquePermutations([...arr], currentIndex + 1, length); } } } for (let length = 2; length <= inputString.length; length++) { generateUniquePermutations(inputString.split(""), 0, length); } return uniquePermutations; } console.log(generatePermutations('wood')); 

Breaking It Down:

I modified the generateUniquePermutations function to accept a length argument, which slices the array and ensures it generates permutations of different lengths. I also added a loop that starts at 2 and goes up to the full length of the input word.

Categorizing by Length

Once I had all my word permutations, I thought it would be much nicer (and way easier on the eyes) if I could categorize them by word length. So here’s how I broke them down:

function categorizeByLength(combinations) { const categorized = {}; combinations.forEach(word => { const length = word.length; if (!categorized[length]) { categorized[length] = []; } categorized[length].push(word); }); return categorized; } 

This function takes the list of permutations, groups them by their length, and returns an object where each key is a word length (2, 3, 4, etc.), and each value is an array of words of that length.

Displaying the Results

Next up, I wanted these categorized results to actually show up nicely in the browser. I wrote a function that dynamically creates sections in the HTML for each word length, then lists all the words under those sections.

function displayResults(categorizedWords) { const resultsContainer = document.getElementById('resultsContainer'); resultsContainer.innerHTML = ''; for (const [length, words] of Object.entries(categorizedWords)) { const section = document.createElement('div'); section.className = 'result-section'; const header = document.createElement('h2'); header.textContent = `${length}-Letter Words`; section.appendChild(header); const wordList = document.createElement('ul'); words.forEach(word => { const listItem = document.createElement('li'); listItem.textContent = word; wordList.appendChild(listItem); }); section.appendChild(wordList); resultsContainer.appendChild(section); } } 

This is what we have

Next up? I need to work on filtering out the invalid words. Right now, I’m getting all sorts of gibberish, and I only want real, meaningful words. Still stick around 🙃