Functional Programming: Implement the filter Method on a Prototype | Logic Problem

JavaScript
1

This works. But I really don’t understand WHY it works.

var s = [23, 65, 98, 5];

Array.prototype.myFilter = function(callback){
  var newArray = [];
  // Add your code below this line
  this.forEach(function(item){
    if(callback(item) == true){
      newArray.push(item);
    }
  })
  // Add your code above this line
  return newArray;

};

var new_s = s.myFilter(function(item){
  return item % 2 === 1;
});

Trying to work through the logic, emojis for placeholders below:
new_s is created
new_s is set equal to s.myfilter
s.myfilter(takes a function (which takes “item”) )
.myfilter = is a function (which takes “callback”)
make newArray
this (which is accessing s), for each item(apply a given function :dizzy_face: (which takes “item”) )
if :open_mouth:callback (evaluated on “item”) evaluates to true add “item” to newArray

:dizzy_face: I’m assuming the function inside s.myFilter? Where was it passed to this? How did we get here?
:open_mouth: What actually is callback? Where is it defined? How did it get here?

I feel like I missed something somewhere with these challenges. I was doing ok and all of a sudden it made a leap of logic that I can’t seem to get my head around. I just don’t understand the flow of how these functions are being passed from place to place.

1 Like
2

Here you are creating the method, which takes one parameter called callback

And here a function is passed as argument inside myFilter(), when you are creating the method you are just using callback and this, in this specific call this is s and callback is function(item){ return item % 2 === 1; }

3 Likes
3

Hey @shawnmuzick,

I know I had a really hard time wrapping my head around some of these concepts. One of the things that really helped me was having a good visualization to step through.

All of which is to say that you might find it useful to step through [RIGHT-CLICK & explicitly open the link in a new tab] your example on PythonTutor (yes, Python tutor — they also support a few other languages, including JS :smiley:).

I’m not sure why, but PythonTutor defaults their interactive links to a completed running of the code, so the first thing you’ll want to do is click the “< < First” button, and then you’ll just step through each step of the program with the “Forward >” button and examine the state of the program at that step on the right hand side of the screen.

1 Like
4

Your link to the python tutor gives a few syntax errors, maybe fix those before linking it? And it is trying to run things in Python, not JS

It seems you are missing part of the code

1 Like
5

@ilenia - Interesting. If I right-click on the link and explicitly open it in a new tab, everything works fine. However, if I just click on it like normal, FCC opens it in a new tab and I get a SyntaxError: invalid syntax (<string>, line 1). Unfortunately, I don’t think I can do anything about the link, the way FCC is opening it, or PythonTutor is interpreting it at that point.

The previous link is to a “Live Programming Mode” version. I’m wondering if the “Visualize Execution” version will play nicer. So this is a test of that:

Looks like both versions have problems when simply clicked, but work happily when right-clicked and explicitly opened in a new tab. But, I have no idea why :man_shrugging:

6

You are right, weird

1 Like
7

@metasean This tool is really awesome, thank you for sharing!
@ilenia Thank you for taking the time to helping walk me through this!

1 Like
8

@shawnmuzick - fwiw, when you “outgrow” PythonTutor, you should check out browser debugger tools and watch Philip Roberts’ “What the heck is the event loop anyway?” video.

The debugger will let you move through much more code, and dig into it much more precisely. But until you know more about what’s going on and what you need to be looking for when you’re debugging it is seriously overwhelming and hard to understand.

Part of knowing what’s going on and what you should be looking for, is understanding the “event loop” and Philip’s video is a classic on the topic, and it is a classic for a reason. :smiley:

1 Like