Why Array.prototype.slice.call() is helpful when working with both arrays and objects

This algorithm is actually called Seek and Destroy.

This algorithm challenge was a bit confusing at first, but I did have an idea about how I wanted to approach it. The challenge was to put the pieces together in the most concise way possible. Interestingly enough, I had attended a workshop over the weekend called JavaScript Fundamentals: Higher Order Functions, Scopes, Closures, and Callbacks through the New York JavaScript Meetup, and it was very good. It was hosted by instructors from dev bootcamp MakerSquare at Grind near Battery Park City, and we worked on various algorithms related to High Order Functions, Scopes, Closures, and Callbacks all day. The workshop was helpful in finding the solution to this challenge. I did, however, have to dig deep to get there and really understand how to get my solution to pass.

Challenge:

Helpful links:

• Arguments object
• Array.filter()

You know your code has passed when:

When initially unsure, I always visit the helpful links I am provided to help me reach a solution. I knew that filtering an array was part of the solution, so I checked out the Array.filter() link first.

According to MDN‘s article, the .filter() method creates a new array with all the elements that pass the test implemented by the provided function:

Let’s break this method down a bit. First to discuss is the meaning of “callback” and its role in arr.filter():

The callback: is a function to test each element of an array. It is invoked with arguments (element, index, array). It is returned true to keep the element, and returned false to discard it.

thisArg: Optional. Value to use as “this” when executing the callback. To learn more about “this”, please visit:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

On the first go around, arr.filter() just didn’t seem to provide me with obvious answers on its own. I also wasn’t quite sure how I was going to deal with an array and one or more arguments at the same time, so I checked out the second “helpful link”, Arguments object:

The Arguments object: is an array-like object corresponding to the arguments passed to a function.

arguments object: is a (built-in) local variable available within all functions. You can refer to a function’s arguments within the function by using the arguments object. This object contains an entry for each argument passed to the function. This object contains an entry for each argument passed to the function, the first entry’s index starting at 0. For example, if a function is passed three arguments, you can refer to them as follows:

The arguments can also be set:

Contrary to appearances, the arguments object is NOT an Array. It is similar to an array, but it doesn’t have any Array properties except .length. For example, it doesn’t have the pop() method. It also doesn’t have the .shift() method, etc. However, it can be converted to a real Array:

You can also use the Array.from() method to convert arguments to a real Array:

So now it’s time to apply what we have gone over so far with how it applies to my solution to the challenge:
First of all, we were initially provided with the following:

The first thing I did was to implement

because I knew that I would have to transform my argument objects into an array in order for my initial array (arr) and the provided arguments that follow the array to be able to interact with each other. After that, at first I just tried out

because I remembered from a previous challenge that this filtered out duplicate elements, and that was what I was partially trying to achieve. So this is what I first came up with:

It returned “true”. Of course, because there are elements in the original array that are not present in the new arguments array. But that is only part of what I am trying to achieve. I want to only return what is unique to the original array (arr). The next step was a bit trickier. I had to revisit arr.filter(). What confused me the most was “Return true to keep the element, false otherwise.” Where and what exactly was I going to return, and how was I going to position arr.filter() to achieve this?:

filter(): calls a provided callback function once for each element in an array, and constructs a new array of all the values for which callback returns a true value or a value that coerces to true. callback is invoked only for indexes of the array which have assigned values. It is not invoked for indexes which have been deleted or never been assigned values. Array elements which do not pass the callback test are skipped, and are not included in the new array.

There is one last piece of the puzzle that needs explaining: the .indexOf() method:

.indexOf(): returns the first index at which a given element can be found in an array, else -1 if it is not present.

So function destroyer(arr) {} has

1. one parameter called arr, and the arguments passed to function destroyer()within the [], make up the elements of arr.

2. The two numbers which follow the array are the argument objects.

3. args is a variable which I created to store the values of the arguments object. At the same time, I am converting the arguments into a real array with Array.prototype.slice.call(arguments). Now there are two array arguments present instead of one.

4. args.splice(0,1); splices the first (original) array (arr) away from the new arguments array stored in the args variable and returns it in the form of arr.filter();

5. The (original) array (arr), which is the first argument passed to the destroyer() function, is returned in the form of return arr.filter(), and its elements are filtered against the elements in the new args array.

6. The two steps described in #5 are represented by return arr.filter(function(element) { return args.indexOf(element) === -1; }); } What this means is that whichever elements are present in the first argument (the original array arr) but are not present in the arguments array are the only elements returned. In the case below, it is [1,1]. That is all that is left of the original array, and all that was unique to the array (arr).

Solution in ES5:

Solution in ES6:

This was first published here on May 4, 2016 @ 14:49. It was part of freecodecamp.org’s Basic JavaScript Algorithm Scripting for the Front End Development certification.

Related articles

• Insert, Remove, and Replace elements with Array.splice()