How to Traverse an Object of Arbitrary Depth in JavaScript
Nick Scialli
September 21, 2020
New — Check out my free newsletter on how the web works!
Sometimes we find that we need to traverse an object and perform some operation on it at some arbitrary depth. While this seems like a tough challenge, we can make use of recursion, mutability, object references to get the job done in short order.
Our Example Challenge: Deep Word Replacement
Let’s say we have an object that all the text fields of a dog adoption application our user has provided us. However, the user entered [tbd]
in the places where the dog’s name should be—picking a dog’s name is hard. Alas, our user has finally selected the name Daffodil
for his puppy, and we must now replace all the [tbd]
strings in our object.
Unfortunately, our object is complex and of arbitrary depth. We must make this string replacement anywhere in our object!
Here’s our object:
const application = {
section1: {
question1: {
text: "What will your pet's name be?",
response: '[tbd]',
},
question2: {
text: 'What will the names of all the pets in your house be?',
response: ['Fred', 'Whiskers', '[tbd]'],
subquestion2: {
text: 'How will you take care of your new pet?',
response: 'I will feed [tbd] three times a day and pat her head.',
},
},
},
};
Let’s think about this problem in steps before we write our solution. Here’s what we need to do:
- Create a function that takes an object as an argument.
- For each key in that object, if that key is a
string
, do our word replace. (mutation!) - If the key is an
object
, send that key back through the initial function (recursion!)
We can see how this looks in JavaScript:
function replaceTbd(obj) {
for (let key in obj) {
if (typeof obj[key] === 'string') {
obj[key] = obj[key].replace('[tbd]', 'Daffodil');
}
if (typeof obj[key] === 'object') {
replaceTbd(obj[key]);
}
}
}
Kind of simple actually! Let’s see if that works on our object.
replaceTbd(application);
console.log(application);
/*
{
section1: {
question1: {
text: "What will your pet's name be?",
response: 'Daffodil',
},
question2: {
text: 'What will the names of all the pets in your house be?',
response: ['Fred', 'Whiskers', 'Daffodil'],
subquestion2: {
text: 'How will you take care of your new pet?',
response: 'I will feed Daffodil three times a day and pat her head.',
},
},
},
};
*/
Success! Do note that we didn’t return anthing from our replaceTbd
function—it’s mutating our input object as it dives down the tree! If this isn’t desired behavior, you could consider looking into a deep clone library to first clone your object and then mutate the clone.
Conclusion
Working with deep objects can be intimidating, but it gets much easier when you master the concepts of recursion, mutability, and object references.
🎓 Learn how the web works
Over my 20 year career in tech, I have noticed that an often-neglected part of interview prep is learning to explain technical concepts clearly. In my free newsletter, How the Web Works, I provide simple, bite-sized explanations for various web topics that you can use in your interview prep (or just to gain a better understanding of the web).
Enter your email below to get started. It's free and you can unsubscribe at any time. You won't regret it!
Nick Scialli is a senior UI engineer at Microsoft.