FreeCodeCamp and JavaScript: Using splice(), a filter() function and the arguments object to solve a problem

Okay, time to tie it all together. Here’s our exercise, know as Seek & Destroy in the FreeCodeCamp curriculum.

NOTE: IF YOU HAVEN’T COMPLETED THIS — Go and try it first. If you just copy my solution, you won’t learn anything, and when it comes time to interview, you won’t pass the coding test.

“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.”

Useful links that FreeCodeCamp provides take you to the arguments object page on MDN, and the filter function page on MDN. Here’s the code that they give you to start with:

function destroyer(arr) {

// Remove all the values

return arr;

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

The last line is a call to the destroyer function with an array. They’ll also be testing several other arrays to make sure you wrote it correctly. Now, we know that arr is going to contain the arguments we are sending to the destroyer function, namely [1, 2, 3, 1, 2, 3], 2, 3. We know that we’ll use the arguments object to refer to them. We also know that we’re writing a filter() function with the name “destroyer”. We’re going to return a modified arr as the result. And that’s what we’re given to play with! Let’s get started…

Well, let’s see. We want to compare the elements in the array with the elements that follow it in arr. We don’t know ahead of time how many arguments will be sent to the destroyer function (there are other tests on the FreeCodeCamp page with different arguments than the one above, and some have two and some have three arguments). How to do this?

Well, we can create a second array with the elements that aren’t in the array we sent to destroyer, and then compare the two arrays, removing the elements in the first array that match the ones in the second array. This is our filter. Let’s create the array, which we’ll call args:

var args = [];

Now, we’ll populate it, by starting at element[1] of the arguments object (because element[0] is the array we want to which we want to compare args).

for (var y = 1; y < arguments.length; y++) {

args.push(arguments[y]);

We are “pushing” each element after element[0] into the args array. Note that the push() method is a way to put items into an array. This is a loop, using y as the counter and working through the length of the arguments object to the end. So, in our example above ([1, 2, 3, 1, 2, 3], 2, 3) we will end up with args = [2, 3].

Now, we want to actually compare the two arrays. We’re gonna need a loop. Actually, we’re going to need TWO loops, one for the elements in the first array, and one for the elements in the second array.

for (var i = 0; i < arr.length; i++) {

for (var x = in args) {

if (arr[i] === args[x]) arr.splice(i, 1);

return arr;

Nope, not quite. We need to test element[0] against args, not arr, which is the array AND the elements we want to test it against. Let’s modify our program and assign element[0] (the array) to a separate variable:

function destroyer(arr) {

// Remove all the values

var args = [];

var compare = arguments[0];

for (var y = 1; y < arguments.length; y++)

args.push(arguments[y]);

for (var i = 0; i < arr.length; i++) {

for (var x = in compare) {

if (arr[i] === compare[x]) compare.splice(i, 1);

return compare;

Well, we passed three out of five tests! Getting closer. Let’s see why it’s not working. Using the console, we see that for the two cases that don’t pass, it’s the last number in the array that’s getting skipped! For example, one of the arrays is:

[2, 3, 2, 3]

and we’re comparing it to

[2, 3]

This means we should get back an empty array, []. But instead, we get back a [3]. Ack! What’s going on???

This one is tricky. When we delete items from the array, it changes the length of the array. The program thinks it has already looked at the last item because our counter variables (1 and x) have reached the end of the array. How can we change that?

Well, we can start at the END and work back to the BEGINNING. Let’s modify the program again:

function destroyer(arr) {

// Remove all the values

var args = [];

var compare = arguments[0];

for (var y = 1; y < arguments.length; y++)

args.push(arguments[y]);

for (var i = 0; i < args.length; i++) {

for (var x = compare.length; x >= 0; x–) {

if (args[i] === compare[x]) compare.splice(x, 1);

return compare;

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

As expected, we get back an empty array!

Like this:

Like Loading…


Originally published at macengr.wordpress.com on March 24, 2016.

Show your support

Clapping shows how much you appreciated Scott McWilliams’s story.