So let's find out what it means to switch context in JavaScript. Earlier, we learned that context refers to the object to which a method belongs. But sometimes, we may want to make a method think it belongs to a different object. For example, on the left side of the screen, I have an object called foo. On the right side of the screen, I have an object called bar. Each one of these objects has a greeting property.
And each one of these objects also has a Greek property. Now once again, in JavaScript when a property is a function, it's called a method. So in each case, the greet method returns this greeting. So if I were to execute, food dot greet, I would get I am foo and if I were to get execute bar dot greet, I would get I am bar and in each case, the greet method interacts directly with the greeting property of that object. Each greet method is executed in the context of its Object through Deke read is executed in the context of foo. And bar duck rate is executed in the context of bar.
Well, there's a way that we can jump in and we can change the context of each method. It's called context switching. So we can make the food greet method think it belongs to bar, and we can make the bar greet method think it belongs to foo. So as you can see here, food dot greet is now on the right it has that blue box and when execute, food creed, I get I am bar when I execute bar dot greet, I get I am foo. This may seem a little confusing, a little odd. So let's jump into some code and we can see how this really works.
In your examples folder, open up the context of folder and then open the file context call and apply to. So I've got two objects here, foo and bar. And both objects have a greeting property. And both objects have a greet method. In both cases, the greet method returns the value of that objects greeting property. So if I were to execute food dot greet, I should get Iam foo.
And if I were to execute bar dot greet, I should get I am bar. Let's make sure this works as we expect. So copy both of those objects, paste some new JavaScript console. And now I'll execute food dot greet. And I get I am foo. And if I execute, execute, bar dot greet, I get I am bars.
That's pretty much what we expect to happen down here on line 17, copy this code and execute this in your JavaScript console. So something pretty weird happens here. I executed food dot greet and I got I am bar which doesn't really make sense. But there's a little more going on here. I said foo dot greet call bar. What's happening is I'm using the call method to switch the context of the food greet method.
So the syntax is its object. method call new context. So foo dot greet call but do it in the, in the context of bar. And if I were to say bar dot greet dot call foo. I would get I am foo. I'm executing bar Creek, but I'm getting on food because I'm saying bar Dockery call in the context of foo.
So what happens with the call method is you temporarily take a method and move it into the context of another object. It's not literally what's happening, but it's effectively what's happening. So when I say food, cat food, greet call bar, I'm executing this method, but I'm making it think it belongs to this object. And when I'm saying bar greet call foo. I'm executing bar duck. But I'm making it think it belongs to foo just for the moment.
So if you copy this line 20 here, it's actually line 18. If I reopen this file, so line 18. And I run that I get the same thing as if I execute foo dot greet, apply. And bar, I get Im bar, because I switched the context of food agree to bar. Now the call and apply methods do the exact same thing. The only difference is passing arguments.
Let's say that the food greet method expected two arguments A and B and I want to pass those. Well, if I wanted to do that with call, I would pass the arguments in a comma separated list. And if I wanted to do that with apply, I pass the arguments as an array. So with food or greed call, I pass it the context of new contact which is bought comma and then all my arguments. And with food agree that apply I pass a bar and then an array of any arguments but in both cases the call and apply methods allow you to switch the context in which a method is executed.