I’ve Cracked the Code, Please Call Tech Support- Episode 15, The $Git Clone Wars. (I’m determined to keep this titling scheme going).

Aaaaaand that’s 211 done! Learning JavaScript has been a tough road, and I still have a lot of techniques to pick up, but I’m feeling good about it. And I’ve got a week to keep learning at a bit of a jogging pace. All in all, good times.

1. Talk about something that you learned this week.

Recursion has been something that we’ve been striving to wrap our brains around this week . The idea is that you have a condition you want to meet, and you have a function that calls itself over and over again, progressively getting closer to the condition, then stopping when it is met.

To quote the King from Lewis Carroll’s Alice in Wonderland, “Begin at the beginning, and go on till you come to the end: then stop”.

Finding uses for recursion is a little more tricky. We can come up with many math problems where recursion can be used, but we have other, faster, easier to understand methods to solve those problems as well. But, given the current pandemic that we’re seeing, using recursion for things like contact tracing could be very useful. It’s specific, but it’s good to know.

2. Explain Function.prototype.bind()

This one’s tough, but important.

Let’s say that you’ve got an object called “Scooby-Doo-Crew”, which has values that you wanted associated with it, such as: “scoobySnacks: yes”.

Now let’s say that our code looks something like this:

this.scoobySnacks=no;
const Scooby-Doo-Crew = {
scoobySnacks: yes
getScoobySnacks: function() {return this.scoobySnacks}
};

Up at the top we have the this value of scoobySnacks for everybody (the global object), and in the Scooby-Doo-Crew object we have the value for that object, specifically.

If we call the function within the Scooby-Doo-Crew, it looks like this:

Scooby-Doo-Crew.getScoobySnacks();
//returns yes

So yes! We know if they have Scooby Snacks. But what if we wanted to know this by using a function that wasn’t built into the object? Let’s try it:

const retrieveScoobySnacks = Scooby-Doo-Crew.getScoobySnacks;
retrieveScoobySnacks();
//returns no

What just happened? Well, since it’s outside of the object, our function called the ‘this’ value of the global object that we declared at the top (this.scoobySnacks= no;). How can we fix this?

We use bind() !

const boundGetScoobySnacks = retrieveScoobySnacks.bind(Scooby-Doo-Crew);
boundGetScoobySnacks();
//returns yes

Hooray! Now that the function knows where to point to, it can retrieve the correct value. And their Scooby Snacks.

3. Describe Event Bubbling.

Event Bubbling can be a little confusing as well, but I believe that can do it. The idea with Event Bubbling is that an event that triggers on an innermost element works it way out to the outermost element.

So, if you’ve got something like this:

<section id="Mystery-Machine" onclick="event1()">
   <span id="box-of-Scooby-Snacks" onclick="event2()">
      <button id="Scooby-Snack" onclick="event3()">
      </button>
   </span>
</section>

This means that when the Scooby-Snack button is clicked, it triggers the event3 for it first, then the event2 on the box-of-Scooby-Snacks, then the event1 on the Mystery-Machine.

4. What’s the difference between the window load event and the DOMContentLoaded event?

Load events tell the JavaScript in our code when to display. The DomContentLoaded event goes when the parsing for our current page is complete. The window load event, however, goes when all files have finished loading from all resources. This includes ads, pictures, everything.

5. Describe the call stack.

So I’m going to refer back to one of by previous posts for this one.

In that article we were discussing event loops, which are related. JavaScript can only really run one piece of code at a time. In order for it to do this correctly, and not have the site crash all the time, we need our Call Stack.

This stack tracks to order of when functions are being executed. So it knows when to handle each line of code so everything makes sense.