Wherefore Art Thou Challenge in JavaScript

Introduction

Wherefore art thou is a coding challenge in which we have to filter elements from an array based on a given value. It is a bit complex, but we will be provided with a function that takes two arguments: an array (e.g., [{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }]) where each object has one or more key-value pairs and a second argument which is an object (e.g., { last: "Capulet" }). We need to filter the objects in the array based on the second argument. An object is included in the final array only if every key-value pair specified in the second argument matches the corresponding key-value pair in that object. For instance, if our first argument is [{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }] and the second argument is { last: "Capulet" }, the correct output will be [{first: "Tybalt", last: "Capulet"}]. Let’s understand this in an easier way:

Examples:

First Argument = [{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }]

Second Argument = { last: "Capulet" }

Output = [ { first: "Tybalt", last: "Capulet" } ]

We start with the first object of the first argument:

First Element of First Argument

First Argument = { first: "Romeo", last: "Montague" }

Second Argument = { last: "Capulet" }

In this case, the first argument object { first: "Romeo", last: "Montague" } does not match the second argument { last: "Capulet" } because none of the values in the object match. Therefore, this object will not be included in the final array.

Third Element of First Argument

First Argument = { first: "Tybalt", last: "Capulet" }

Second Argument = { last: "Capulet" }

Here, the value for the last key in the first argument object matches the second argument, so this object will be included in the final array. Hence, our output will be [ { first: "Tybalt", last: "Capulet" } ].

Theoretically solve

Step 1: Determine if the object from the first argument contains all key-value pairs found in the second argument.

Step 2: Include the object if all key-value pairs match exactly.

Step 3: Exclude the object if any key-value pair does not match.

Step 4: Return an empty array if no object meets all the criteria..

First Argument: [{"a": 1, "b": 2, "c": 3}]

Second Argument: {"a": 1, "b": 9999, "c": 3}

Output: [].

As you can see in the given example above, the object in the first argument does not match the second argument.

Note: An object from the first argument is included only if every key and value in the object exactly match the keys and values in the second argument.

Practically Solve:

So far, we have spent our time understanding this problem, and hopefully, you have understood everything since I used very clear examples to teach you. Now, let’s start working on this practically.

 function whatIsInAName(collection, source) {
 // Get the keys of the source object
 let sourceKeys = Object.keys(source);


 // Filter the collection based on whether each object matches the source object
 return collection.filter(item => {
   // Check if the object in the collection contains all key-value pairs from the source
   return sourceKeys.every(key => item[key] === source[key]);
 });
}

whatIsInAName([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" });

Let’s break down this solution for better understanding.

Breaking Down the Solution:

We have a function named whatIsInAName with two arguments: the first one is collection (an array that may contain one or more objects), and the second is source (a single object). It is a simple function, so there is no need to delve further.

 let sourceKeys = Object.keys(source);

Within this function, we declare a variable named sourceKeys where we assign the keys of our source object.

More Info: An object looks like this: { name: 'John' }, where name is the key used to store values in the object, and John is the value assigned to the key name.

In the case of the source argument { last: "Capulet" }, using Object.keys(source) will give us ['last'] because last is the key in the source object. Object.keys() is a built-in JavaScript method used to retrieve the keys of an object.

After that, we used the filter() method to filter out the matching elements for the final output. We used the return keyword to specify that this is the final return for the function. Then, we applied the filter() method to our first argument to filter the elements. Within the filter() method, we used another JavaScript built-in method, every(), which checks whether all elements in the array meet the condition specified within the every() method.

 return collection.filter(item => {
   // Check if the object in the collection contains all key-value pairs from the source
   return sourceKeys.every(key => item[key] === source[key]);
 });

While the filter() method is clear and straightforward, we need to emphasize the every() method. We used the return keyword within this filter() method to return the method's final output. After the return keyword, we used the every() method to check whether all elements of sourceKeys match with the keys of the first argument.