Open the file troubleshooting example three. So here I've created an object called app. And this app object has two properties. The first one is a method called show delete selected. And that just shows the delete selected. button.

And the second method is called salespeople Li iterator. And that's used as an iterator for each salesperson, Li. So down here, we're calling the each method on salespeople Li. So this happens 10 times and each time it happens we're passing it app that salespeople iterator. So this is going to be executed 10 times and when it's executed. Each on each execution we're setting up a click event handler for that list items, select button.

So let's run example number three and see how we make out so troubleshooting. Example number three, okay, so ran the code, and then I'm going to select one of the buttons I get an error. Okay, so let's take a look at this error, type error this show delete selected is not a function. Well, what's the first question we want to ask ourselves when we troubleshoot? We want to ask ourselves, is it a scope problem? Or is it a context problem?

And I gotta say that whenever I see the JavaScript, this keyword in an error, I pretty much feel like it's a dead giveaway. It's, it's, it's very unlikely. It's not a context problem, because I see the word this. So you know, it could be scoped, but I'm gonna go with context on this one, because I see that this keyword. So um, as far as where to begin, I think I'll just copy this code. And then when I go to our code, I'll do a search for that exact piece of code and see where it takes us.

And it takes us to line 22. So I think that's where our problem it's at least starting there. So why don't I comment out that line of code prevent the problem from happening and Then what I'll do is I'll think, well, if the problem is this dot show, delete selected, we've got to know more about this. What is this on line 22? Well, I'm going to put it into a console dirt here. And we can inspect this just to sort of figure out is this really what we think it is?

And remember, when we see the keyword this we think context. So is the context what we think it is on line 22. So save that, and let's go back and refresh the page. And then I'll click this Select button, and I see something here in the console, I see button dot select. So this looks to me like a DOM element. I mean, I see properties like child nodes and children and class list and this style property.

So this is a DOM element. In fact, it's the element that was just clicked. So that means that I'm thinking on line 22, that this, the context is this app object and I can just call them This show delete selected, but it turns out that this on line 22 actually resolves to the button that was just clicked this button right here. And that makes perfect sense because this is the click event handler. And the click event handler is executed in the context of the moment that was clicked. So it turns out that this is not what we assumed it was the context is different than we thought it was.

And we found that out by doing console dirt, so we need to fix that. So let's take a look at troubleshooting example number four. First, let's run it and see how it works. So if you go down to troubleshooting example number four, run that code and we click Select. And in each case, when we click the Select button, the select button disappears, the Select shows and the element at the selected classes toggle so everything works as we expected. Let's figure out why.

Well what happened on line number on in troubleshooting example for is on line 22. Instead of saying this dot show, delete selected, we said actually Should not show delete selected. And the reason that works is because app is a global variable. And because of lexical scoping this function, this callback function has access to the variables defined outside of it, it can see outside of itself. So we just reference app instead of this. And we say app dot show, delete selected, and it works fine.

Now part of the way that we fix this is if you remember an example number three, we just pass a reference to App dot salespeople iterator to each iteration of salespeople Li but here example before one of the things we also did is that we we pass a callback function here. And then we execute at that salespeople iterator and that's also a way that we help solve the problem because now apt salespeople iterator is not being executed in the context of the button. It's just being executed. So I know that kind of sounds odd. I don't want to get too deep into that. But the point I'm making here Is that we change the context in which app that salespeople iterator is being executed.

And we also just simply reference the app global variable up here to solve our problem. Now, if you look, for example, in the five, there's another way we could do it, which is, we set a reference to this by creating a variable called me. And down here in line 21. We reference me so what happens is, once again, we change the context on which the app salespeople iterator is being executed. Now it's being executed in the context of app. So that means up here, we have reference to the app.

Variable, but we can reference it by this for example, if I were to do a console dare statement up here, on this line on line 17. We can see what this is on each execution of this function. So I'm going to go to troubleshooting example number five. execute that and I get 10 objects in my console. And each object is identical. It's the app object is going to show delete selected method and the salespeople iterator method.

They're the same object every time. And the reason we see that is because when we execute, they're trying to return this function gets executed. This on line 17, resolves to AP. And that's good. We like that, because then we can set a reference to this, which is me create a variable, and this function can see outside of itself because of lexical scoping. So we can say me dot show, delete selected.

Now, this is a little hacky. And if you have discovered ECMO script 2015, you may know by now that fat arrow functions essentially sought help solve this problem. So that's definitely a topic for a whole nother class we can get into fire functions. But for now, the point I'm trying to make is that we want to troubleshooting problems. We want to first determine if it's a scope problem or a context problem. And then once we know the answer to that question, we can kind of drill down and use different techniques to solve the problem.

But knowing what kind of problem it is really makes a big difference in terms of figuring out how are you going to go about finding out where the problem started and how to resolve it.