Traverse an Object of Arbitrary Depth in JavaScript

Traverse an Object of Arbitrary Depth in JavaScript:

 

https://ift.tt/2UgvLrq

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 recursionmutability, and object references to get the job done in short order.

https://ift.tt/2UgvLrq

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.',
      },
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

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]);
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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.',
},
},
},
};
*/
Enter fullscreen mode Exit fullscreen mode

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 recursionmutability, and object references.

https://ift.tt/2UgvLrq

from Tumblr https://generouspiratequeen.tumblr.com/post/633433613025902592

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s