Seek and Destroy - JavaScript Solution and Walkthrough

03/21 Seek and Destroy

You will be provided with an initial array (the first argument in the destroyer function), followed by one or more arguments. Remove all elements from the initial array that are of the same value as these arguments.

Note: You have to use the arguments object.

function destroyer(arr) {
  return arr;
}

destroyer([1, 2, 3, 1, 2, 3], 2, 3);

Source: freeCodeCamp.org

Before we walkthrough this challenge and solve it, I will encourage you to at least attempt to solve it on your own first. If you've already done that, then let's get straight to it.

Understanding the challenge

Before we write our first line of code, let's try to understand the challenge.

In this challenge, we know the function will be passed some arguments. We don't know how many. What we know is that the first argument will be an array (let's call it firstArray). Now, let's also refer to the remaining arguments collectively as otherArguments

So we know the destroyer function will be passed a firstArray and otherArguments.

Our task is to remove from firstArray any element that has the same value as any of the elements in otherArguments.

We then return an array (let's call it finalArray) which will contain the remaining elements left in firstArray after the removal has taken place.

In other words, finalArray will contain all the elements in firstArray that are not of the same value as any of the elements in otherArguments.

Note: If you need to, take your time to read through the explanation above again before moving on. If you understood the challenge, we can move on.

Pseudocode for the challenge

Now that we understand the challenge and what is expected of us. Let us write some pseudocode that will guide us in writing the actual code.

// Using arguments object, create an array of all given arguments
// Declare a variable to hold the first element of the array (which is the first argument).
// Create a new array which will contain the other arguments.
// Check the values of the elements in the first array
       // if an element has the same value as any of the other argument
       // remove that element from the first array
// Return a final array that contains only the unremoved elements.

Solving the Challenge

Using the arguments object

We are given a note to use the arguments object. So how do we use the arguments object? As we shall see, we use it by simply typing the keyword arguments.

In JavaScript, it is possible for a function that has only one parameter to be passed two or more arguments (just like the function below).

function destroyer(arr) {
// Write your code here

  return arr
}
destroyer([ 1, 2, 3, 1, 2, 3], 2, 3);

In the challenge we're working on, the destroyer function has only one parameter arr as we can see in the code snippet above. However, when it was called, it was passed 3 arguments.

When we do a console.log of arr, we will get only the first argument. However, with the arguments object, we can access all the arguments passed. This can be seen with the second console.log

console.log(arr) // [ 1, 2, 3, 1, 2, 3 ]
console.log(arguments) // { '0': [ 1, 2, 3, 1, 2, 3 ], '1': 2, '2': 3 }

This arguments object is accessible inside non-arrow functions. It is an object that contains all that the values of the arguments that was passed when the function was called.

Remember the first line of our pseudocode.

// Using arguments object, create an array of all given arguments

With ES2017, we can easily convert objects into arrays with the following syntax

const myObject = { one: 1, two: 2:, three: 3  }

Object.entries(myObject) // returns [['one', 1], ['two', 2], ['three', 3]]
Object.keys(myObject) // returns ['one', 'two', 'three']
Object.values(myObject) // returns [ 1, 2, 3 ]

In the seek and destroy challenge, we are interested in the values of the arguments object so will create an array of those values. And we will asign it to a variable called argumentArray

 const argumentArray = Object.values(arguments);

Next on our pseudocode is declare a variable to hold the first argument which is an array. So let's go ahead and do that.

const argumentArray = Object.values(arguments);
const firstArgument = argumentArray[0];

Still following our pseudocode, we will create a new array to hold the other arguments. We will do that with the .filter() method.

When the filter method is applied on an array, it returns a new array with elements that fulfills a given condition.

In our case, we will apply the filter method on the argumentArray and our condition will be to return all elements that has an index greater than zero.

const argumentArray = Object.values(arguments);
const firstArgument = argumentArray[0];

const otherArguments = argumentArray.filter(element => {
    return (argumentArray.indexOf(element) > 0);
})

This will return all arguments except the first one which has an index of zero.

Finally, we apply the .filter() method again. This time on the firstArgument

And using .includes(), we will return all elements in the firstArgument which are not present (or included) in the otherArguments array.

const argumentArray = Object.values(arguments);
const firstArgument = argumentArray[0];

const otherArguments = argumentArray.filter(element => {
    return (argumentArray.indexOf(element) > 0);
})

const finalArray = firstArgument.filter(element => {
    return !otherArguments.includes(element)
});

Now we can return finalArray. And that solves the challenge.

Final Solution

The code snippet is a recap of what we've done so far.

function destroyer(arr) {

    const argumentArray = Object.values(arguments);
    const firstArgument = argumentArray[0];

    const otherArguments = argumentArray.filter(element => {
        return (argumentArray.indexOf(element) > 0);
    })

    const finalArray = firstArgument.filter(element => {
        return !otherArguments.includes(element)
    });

    return finalArray;
}

Congratulations! You just cracked the "Seek and Destroy" algorithm challenge. Cheers and happy coding!

Let's connect on Twitter 😎

---

Useful Links

Article on the arguments object on educative.io

Video tutorial on .filter() method by Florin Pop