In your examples folder, open up the planning sub folder. And let's take a look at planning example one. So here I've got some code that should look familiar to you. I'm iterating over the salespeople. And I've set up a bunch of click event handlers. You'll notice I'm saying that I've got some repeated code.

So let's do a search for the code that i'm saying is repeated to this two instances of it. So there are two places in my code here on line 27, and line 47, where I want the length of all these selected salespeople. So what that means is that if you go to run the example, method chaining that's just where the app all the all the code is working. So when I select salespeople, when I go here and click the delete selected button that deletes all the LM all the salespeople who are selected and I know that because When I inspect any one of those particular lines, you can see it has the the class selected, this one has the class selected. And if I would remove that class, it would no longer appear selected. So here we're saying salespeople Li selected length, the length of all those elements.

So there's two cases where I want to know the length of the Li selected elements or how many Li selected elements there are. But the problem here is we've got repeated code. I'm literally typing in quotes, pound salespeople space Li selected twice. And what happens if I change the salesperson element salespeople ID to you know, salespeople all let's say, let's just you know, I'm going to for some reason, I'm changing the name of that ID. So that means I have to go to each one of these and I have to go like that. And that is messy business.

We don't want to do stuff like that. It's extremely hard to manage Imagine there could be 10s, or hundreds of files in our code where that's where that the literal ID has been said, we don't want that. So another way to approach this would be to if you look at explaining example two, we set a variable to salespeople. So this variable dollar sign salespeople represents the live dom dom element, this element, this variable right here represents this element right here, the ID of salespeople. So, now we have a reference to that element. So we don't have to constantly keep retyping this and if we rename this, this ID in our markup to, you know, salespeople, hyphen, all, then we could just make that change here once, and it'll cascade to our code.

So that's working out better because now we're just saying dollar sign salespeople. dot find Li selected. And same thing here. That's a little bit more efficient. But we've still got some repeated code. We're still literally typing out.

Li dot selected, and Li dot selected. And what if we make those allies Dibs are what if we change the selected class to I am selected? So that's more retyping. Yeah, I am selected, and I've got to take that change, and I've got to make it down here. And that's once again, messy business. We don't want to do stuff like that.

So I think there's a better way to do that. So if we go to planning example three, you can see that what we've done here is we've got our dollar sign very salespeople variable, and then we've got a method function called get salespeople length and that returns the length of all the selected salespeople. So we're saying style science. People dot find we're using the find method of this object passing an Li. And I should throw this is getting all salespeople don't like so how many salespeople there are. And then we want to find out the number of selected salespeople that are.

So we're saying salespeople dot find Li dot selected. So here it's just find Li dot length here, it's find Li dot selected length. But in both cases, we're executing a function. And that way, when we want to know the number of salespeople, we just call the function, get salespeople length. It's just that simple. And then we want to know the number of currently selected salespeople.

We just call the function, get selected salespeople length, we do that twice. And that way if anything changes in our code, if we change this ID to salespeople all It doesn't matter. We make that change right there. And that's it. We don't worry about it. And if we were to change the the lies that had the salespeople To Dibs, we could make this change there.

And we don't have to make it anyplace else. Or if we named, if we renamed the the, if we renamed the class that indicates something is selected to I am selected, we just make this change here. And that's it. Everybody's just calling this function. They're not worrying about this or calling this function, this function is taking care of how that set. So you could refactor all day long.

And we can really get rid of all these string literals that we're using our code because we've got a whole bunch of them. And this is all again, kind of messy business. Because this is these are strings that we'd have to change by hand if any of these definitions change. So the main point I'm making here is that we want to now that we understand the difference in scope and context. We can do things like creating a variable scope, that we can use throughout our code, or we can do things like create a leveraging methods on objects context. to refactor our code or plan our code in a way that's smarter and easier to manage