Group Anagrams in Javascript

Given an array of strings, return a new array containing all the strings with any anagrams collected together.

When I saw this challenge, I thought it might be a good application for one of my favorite problem-solving data structures: the lowly hash table.

In JavaScript, hash tables can be used through objects (not this type of JavaScript Objects) where key-value pairs, or properties, are enclosed by curly braces (i.e. {these guys}) and can be accessed via each other.

For example:

“color”: “green” would be a property, or key-value pair. This makes the stored data accessible in a new way. If I wanted to look up “green”, for example, I wouldn’t need to iterate through, searching for a match for “green. I could go straight to apple.color or apple[“color”], and find the string I wanted.

If we put the object we just made into the console, we can pull out bits of stored data quite efficiently using this approach.

Whenever a challenge requires organizing and/or comparing arrays of strings, I like using objects in this way. It saves a lot of nested iterative loops & computing time that would otherwise be used to compare & sort all those strings!

So, let’s get to it:

Our collectAnagrams function will take in an array of words. Of those words, our goal is to collect together any anagrams, then return a new array that contains all the same words, now collected into subarrays containing any anagrams.

I’ve pseudocoded out the basic steps we’ll take, and created an empty object and an empty array that we’ll use to organize, collect, and ultimately return our anagrams.

First, we’ll need to iterate through our array of words — I’m using a for/of loop to iterate over the array values.

First, we want to make the key of our key-value pair.

For each word, I want an alphabetized string of all the letters which I can compare against other possible anagrams. Object keys need to be strings, so I’m going to split the string into an array, sort it (which will alphabetize an array of characters, as letters found earlier in the alphabet register as smaller), then join it to put it back into string form.

So, if our current word were “bag”, this would give us “abg”.

So, now we have our desired alphabetized string, we need to make it into an object key.

However, maybe “gab” was earlier in our words array, and our anagrams object already has a key of “abg”. We need to check to see if a matching key already exists, then, if not, create it.

A nice thing about working with object keys is that, using square brackets, you can look them up by variable name. So if the current word were “gab”, and the variable letters, by extension, was assigned the value “abg”, then looking up anagram[letters] would give us the same data as anagram.agb or anagram[“agb”]. This will allow us to get the value “gab” by looking up any of the above three references.

My favorite way to do this is to say that anagrams[letters] is equal either to itself (if it already exists) or to an empty array. Creating an empty array where we can store our anagrams right off the bat can save some irritating bugs caused by accidentally storing values as the wrong data type (say, by saving a word as a string, then trying to add another anagram to that string later).

Okay, now we have an alphabetized list of letters and an array waiting to be filled with anagrams. So, we push our current word into that array, and continue on to the next iterative loop. If the next word is not an anagram of any previous words, a new key-value pair will be created. If it is, it will be pushed into the value array paired with the key which matches its alphabetized list of letters.

Now, hopefully, when this loop resolves we’ll have a hash full of nicely organized anagrams.

Now, according to our pseucode, we want to push the arrays of anagrams into our collectedAnagrams container array.

This requires us to iterate through our anagrams object.

To do that, I prefer to use a for/in loop, which allows us to iterate over each key in the object.

By placing the variable we assign the value of the current key in square brackets, we can look up the value paired with it, and push that array of anagrams into the collectedAnagrams array.

Finally, we can return our collection of anagrams.

Let’s throw this into the console and see what it returns:

🌟 Great! It’s tackled a nice array of possible anagrams, and returned us an array containing all the original strings, now collected into subarrays of anagrams.

I’ve seen some variations of this challenge that ask the programmer to identify and remove any anagrams from an array of strings, purportedly in the interest of removing superfluous data. If you wished to do so, you could remove all the subarrays with length > 1, thereby effectively removing all anagrams from the original array.

If you’d like to see more solutions using this approach, you might enjoy Solving the Two-Sum Problem in Javascript, Three Ways, where you can explore the relative efficiency of a hash-based solution compared to its alternatives!

N.B. — I’ve been in Covid-19 quarantine in NYC, so I’ve kept things a bit more brief than usual this week. I did still enjoyed working out a solution to this challenge, and look forward to diving deeper into other challenges in the future.

--

--

--

NYC based Elixir + Graphql + React engineer. When I was a beginner programmer, I was frustrated by the lack of JS algo solutions, so I wrote these. [they/them]

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Using Apollo to Query GraphQL from Node.js

Learn to Create a “fetch” API with the Node Core API

How to create a loading screen for any SwiftUI app with just two modifiers — Redacted and Shimmer

Experimenting with Javascript ORMs

HOW TO ENSURE ORGANIC TRAFFIC SUSTAINABILITY DURING A MAJOR WEBSITE TECHNOLOGY MIGRATION

Undo and Redo with Orbit.js (Ember Example)

React Serverless Authentication System: Part 1- Netlify Function

10 little tips for a ReactJS Beginner

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
noam sauer-utley

noam sauer-utley

NYC based Elixir + Graphql + React engineer. When I was a beginner programmer, I was frustrated by the lack of JS algo solutions, so I wrote these. [they/them]

More from Medium

JavaScript Series (03) — handle the undefined

JavaScript Algorithm: Looping A Triangle

Understanding Selection Sort Algorithm (in JavaScript!)

Two Sum Problem (JavaScript)