Transcripts
1. Class introduction: this'd yet another bonus nature. I'm just feeling generous today. Don't know why, but now we're gonna be talking in this bonus nature about Polly Force. And please don't feel other addictive. It is gonna be hard. And there's a reason of specifically inserted the poly falls here and not later. I want you to get a feel for drama school. So when we get to the more complicated sections, you'll be like, Oh, I remember we did that in the political section. So sit back and enjoy this later it's gonna be forced. But what is a plentiful Just take a stick back. Remember that each browser provider crimes foreign exit, Brexit thes air just cos. And all these companies are trying to compete with each other and gain market share. Because of that, they used the own rules. Not all the browsers follow one set of standards because student companies think that they know better because of this. When new features come out and code John a script in a HTML five, it isn't always supported by a particular browser. So what does this mean? Does this mean we're in trouble? We'll face within reality that you can't use all modern code on a browsers. You have one of two choices. One only used language features that are available in their browser. It's not quite a solution, is it? No, This second solution is way right, our modern code. But then we adept to work in older Brazil's. Okay, cool. It sounds like a great solution. But how do we do this? Well, that's the point of this entire stations. Just sit back, grab a coffee. I've got one here and just learn about particles. Enjoy it, but quickie. What is plentiful? Well, let's just look at the dictionary definition. A party full is the plug in and provides the functionality of new browsers, but to older versions. And that's it you can kind of. Your policy for was kind of a patch where you just taking code new code and you patch it so it can work in an older brother, and that's all there is to it. Don't be intimidated. And if you very sneaky, you might be thinking applied. Isn't this very similar to transpiring? Trance Pilot takes your syntax and converted to machine code. Now trance pilot can go further transpired, can take new modern code like the concept, you would like losses, and it can transponder code into things that older browsers can understand my fall like functions. But unfortunately, Trans pilots can only take us so before they can transfer pile everything. For example, they can't trance pile member functions on arrays and their contracts pile things like promises and is the whole birth, or of other things. They can't drones and full these situations. We need a plentiful. So how do we know whether we should be using a party full or a trance pilot? Well, he's very broadly to kind of high level rules. One if its new Syntex in you could probably use a transponder. But if it's a new method or a new object, we should probably be using a plentiful who, enough rambling Grab a coffee and I'll see you in the ledgers. Let's learn about Polly Force
2. What is a browser: I guess there's no better place to start than with the browser. And as I'm sure you know, a Prowse is just the program used to display files and never get the whip. We know that I used chrome all the time on my iPhone. I use safari. These are browsers, and the browsers main functionality is to present a resource that we choose. And it does this by requesting a from the server and displaying it in the browser window. And if, why, I? This process has to be done super duper quick. Because, yes, you and I are very impatient when it comes to Google when it comes to voting way pages on the Web and half fosters fast. Were we going to get into that later? But for now, just know that Google researchers have suggested that page load times off less than 100 milliseconds. Not that we can achieve this. I'm just saying, if we can, that gives us the illusion of instantaneous website responses because our visual sensory memory process inside our brain works in bursts off 100 milliseconds. Anyway, that's just a bit of why I So we know that Brazil's main functionality is to present a resource that we choose to us. But what resources am I talking about? Warm of the most obvious one is HTML. Every website that you load has to begin with this far, but they also other resources. We may want to load like images. PDFs XML, Jason seizes JavaScript and so on and so forth. But that's all well and good. So we know that we need to get a resource. The next question is, well, readers, the browser find this resource we doesn't go. And the answer to this is that the location of the resource specified by the U. R I the uniformed resource identify Okay, already. You just want to see an example. Well, let's just come up with a fictitious Web site, my site dot com, And once you enter this, you're all that you're seeing on the screen into your dress line. The browser will break this down into three distinct parts. Can you guess what parts they are? Well, you can kind of even case intuitively. What would be the 1st 1 will be http. And this is the protocol. This is the set of rules that govern how browsers speak to service, we're going to get into the soon so that's the first aspect of breaks it down into. Secondly, it breaks down your service name. This is the site you wanting to go visit, and in order for your browser to actually connect to the whips over in this case my site dot com. To retrieve the information we've requested, it has to communicate with the name server that translates the server name into an I. P address. An I P address is literally that it's an address. It's a place where your browser can go and teach. That file from your Web browser is then able to connect to the Web server at the resolved I p address, usually on Port 80. So that's a second item. We've got a protocol, got the server name, and lastly, we've got the actual resource we want to collect. So once you browse is connected to the Web server using the http protocol in this example, the browser will then read the hypertext markup language that indexed off html far, and this is the altering language used to great documents on the World Wide Web. And then, of course, what happens next? The daughters display to you on the screen so they have a very, very high level view off the process your brother go through in order to serve a file to your webpage.
3. Do browsers follow a set of standards: seen that browses main function is to present results to us and in many instances that Diesel starts with. But now you might be asking yourself how browses right is this Someone who watches over this is This is rules and standards that, and that's a good question. And the answer. Debt yes, is a consortium, a large organization called W, and it just stands for World Wide Web Consortium. And this is just an organization is defined specifications as to how browses function. In theory, every one set of rules sounds great, but in practice we live in a capitalist wall, and what that means is that every company wants to better the other so historic browsers, and it's only pick and choose what rules they want to follow. And this is you guessed that it's called serious compatibility issues when it comes to coding the some browsers except and this caused problems for Web authors and by way, both is. All I mean is someone who puts on content on the Web page so you'll see a lot of older code that we have to redefine code for different browsers. Now, the good news said, this is kind of falling away. Now a lot of browses are starting to comport. I'll show you examples, then seek. But what's interesting is that these specifications defined by the W three c they don't define you are they don't define user interface. But over the years, through lots of trial and error out of the EU, I elements have started to conform with each other. All these browsers have started imitating. They've learned that using speak certain elemental week page to be in certain places. And with that same, let me just show you a very quick example. By comparing to browses Well, let's start with the most popular browse on the wall and they described You can see one greaseball. We've got a refresh ball got forward and back buttons. We've got a two. Well, they came in your item. That's pretty standard. Now, if we compare this to Mazzella so that on the refresh for the back button, that's possible, too. And the point I'm trying to make with all of this is that you will come across when you coding in your career. You gonna come across a lot of old code that has compatibility issues with different browsers. And for that reason you're gonna see codes but up to cater for different version brothers. But the good news is that this is starting to fall away for reasons we've just discussed. So without further ado, let's get into some meat stuff.
4. What is a polyfill: consider this a bonus nature because we're going to go on a bit of attention. But I think it's very important to understand it is a very good example of what we've been talking about. So taking a stick back, we've seen that for many years. Different browsers have only followed a small part off the East specifications set by the W three C. And this means that browses had different rules and some browsers followed certain HTML and CSS code and others didn't. That's the first problem. The second problem is, we've also got other standards, like Sigma script script. And of course, the problem again is twofold. One certain browsers don't follow all of Sigma Scripts recommendations and Two Sigma script gets updated. Same with the W three C specifications. So over time, new functions and new methods get created. So what does this mean? Well, this means older browsers don't understand the code off. The new rules make sense, right, and this is why we mentioned party falls in the previous lecture. So what is a poly fall? Well, at its very core, it's very simple. Upali falls just a piece of code that provides a fallback if certain features don't exist within that browsers engine in Java Script land. This will be a Net Browsers JavaScript engine, but it doesn't have to be John Streets, and this is important. Many people think of Polly Falls just for JavaScript, but you also get Polly Falls for HTML and CSS code, which will also get into tiny but more later. But we are going to focus on the strongest piece because this is what's interesting, and this is what's more complicated when it comes to Dave. Now Polly Falls usually follow a pattern, and the pattern starts with a simple question. Does the future exist within the browser? And if the answer is yes, well, then we don't need a pol If all we can just resort to the browsers engine to handle debt, certain html CSS JavaScript. That gets more interesting off course if the feature doesn't exist within the brother, and this is where we have to use a poly fall keeping track of the ever evolving HTML five in CSS three support in today's Web browsers can be an overwhelming task, and it could be pretty daunting. Sure, we can all use all some CSS animations to create. Some was banging fix. But should we? And which browsers support that certain feature? And what do we do about all the browsers that don't understand that code? And, of course, this is we, Polly Falls come into the picture and the website, then this is just one of many html five, please. It's useful for finding Polly Falls that do a particular job. Html five, please. There was a whole list of HTML five elements and see is his three rules with an overview of browsers support in any Polly Falls for each element's distance. Before we move on, I just want to say we did mention Babel as an example of a poly fall. Now Babel was Mawr targeted at Java script to remind you it. My script Version six was a major update of JavaScript. They brought new features and lot of syntactical additions, but here six was later renamed Two years 2015 in this was to stand to reflect the changes in the release cycle. So when will be used? Babel. If you want to support Internet Explorer, for example, or you'd like to use the latest script features in a browser that doesn't support it yet. Thing we used Babel, who I know we're going through a lot. But nothing is better than with an example. So why don't we build our own party fall, and that will help you understand how these things work. And today, let's implement our own Polly Fall for the year raise for each method. This was introduced in Java Strip 1.6 or a conscript for tradition in reality, for each is a very well supported featured today. But I've chosen it more for the fact that it's fairly simple to reconstruct. And I can walk you through building this party full step by step. But I should note at this point that this implementation is by no means going to be fully fledged, comprehensive one. That's just gonna be a way for you to really solidify understanding of what a poly feliz. So if you really wanted to get into the nitty gritty of certain Polly Falls for certain functions, I recommend visiting Mozilla Documentation Network or Indian are put a link at the end of this lecture. Okay, so we just said we're gonna be bowling our own for each party full. And remember what the first tip Waas What is the first question of Polly for has to ask in order for it to be implemented? That's right. Does the browser support let feature? So the first step is let's check to see whether four each method is natively supported by our browser. Let's go have a look.
5. Testing to see whether forEach() is supported by our browser: to determine whether the four each method exists on our browser. We can use the console, weaken right, a bit of JavaScript. So let's open up chrome, which is what I'm doing here. And now Let's access the console. And very few people are gonna know this. So called this a prototype. They are two different places. We can write Java script within chrome, the first and most obvious places in the console. For example, we can console log Hi, honey, and, as we would expect, that would return high one into the console. This is where most people go to write Java script, but it can be cumbersome because we have to execute each line of code line by line. There's a bit away, um, or fun and intuitive and just a bit away. Where do we go? Well, on the sources tape and within the sources, Ted, we can create what they call and new snippet, and we can call our file anything. Let's call it native support Taste because that's what we doing now. How do we taste with her before each method exists? Well, the first thing you need to know is that the four each method exists on the prototype of every single array. What this means is that when we create an array automatically has access to all the methods and properties attest that prototype off which one of them should be the four each method. So let's just taste whether the four each returns under find because of a does return undefined, it means that it doesn't have support for it up. Browser doesn't know what it is. So one way to do this. And in many ways I understand that I'm just doing a quick and dirty method. We exist the array object. We access its prototype and only prototype. It should be a four inch method if it is natively supported, and that should not return under fire. And if it does return undefined, we know that it doesn't exist. Now there's two ways we can run this Java script. You can push control, enter on your keyboard or we can click the place on. So I'm just gonna click the place and here we go. It returns. True. It means that the four each is not equal to undefined. And there you have it that we've just confirmed that the four each is natively supported on my current version off crime. Okay, so we've seen our baraza does support before each method. It's on every single array that we create. And it's on the prototype off theory that in order to illustrate what a political is, let's just pretend that our browser is sold that it doesn't know before each function. So going forward, just put that at the back of your mind. Let's just pretend that it actually is under fired before each myth it's doesn't exist on our brother. Cool. I think that's enough of this lecture. We've gone through a lot in a short space of time. In the next nature, let's start building this powerful.
6. What is the forEach() method: just before we start building our Polly fall, you need to understand what it is rebuilding and in order to understand what it is rebuilding. Obviously we need to understand what the four each method is mean to accomplish at its core before each method is just a way to loop through your array and use. Six introduced the array for each method. What you do is you call this myth it on your A and when you do have to pass in a callback function to run on each iteration off the loop. And just in case you're wondering, a callback is just a function that is only executed offed. Another function ist finished executed. Hence the word call back. Okay, so we know the four. Each method requires us to pass in a callback function in this callback function accepts two main arguments. Well, actually, it accepts three arguments, but the third argument is an array that you wanting to trade through. I've never had to use it, so I'm just gonna concentrate on the two main arguments that you pass into this callback function. The first is the value of the current item in the loop and the second is the index off that item. And you can name these variables anything you want. That is what the callback function is gonna take. And we're gonna have to boldest dynamically from the beginning, which you'll see in a moment and just taking a step back. Just remember that the four each method is a method applied to the array prototype. We saw this when we had to see whether it's natively supported. We exit the array prototype for each method and for each is just a way for us to group through an array. And JavaScript is a very curious beast because they are so many different ways to accomplish the same task. And it's also awesome like that because as developers, it gives us a lot of flexibility to use what we think is best. What this means is that before each method is not just the only method we can use to group through a rate, we've also got the four method we've got four in, we've got four off and we've even got others. But the four each method does come with a little cave, Yet that only works on a raise. So if you actually want to count or you wanting to excess loops on an object, then before each probably isn't going to be your friend. And the other thing with four each is, is that some developers argue that it suffers performance issues. Take a slow, and if this is a concern to you, then you can get around that. You can use libraries like Loaded and I don't want us to get into Lodish now. But it's basically just a utility library and drove a script that leads us to a lot of common things, such as looping through a raise and the codes written in a way that's very, very efficient. Performance efficient, very fast. Okay, well, if you're anything like me, reading a bunch of words on a screen isn't really helping to understand what a four each is . So before we start building our party full, let me just show you what a four each is by showing you an example and then weaken dive straight into it by pulling up very own party full. Let's just look at a quick example
7. Practical example of forEach(): Okay, so let's start by showing you what before each method does too. Let's open up crime again and you can see we've even got out previous examples on the screen. I'm gonna be cutting this in real time with you. And to prove that, let me just magically show myself just second to second. Just give me a second on. There we go. All right, so here I am with you coding in real time, and I just want to show you what the four each method is mean to do. And I want to give you an example that isn't so easy. You know, I can just use an array and we just loop through the rand console of those items. But I always try, and I mean, I think you at the point now, especially with this course that you understand at a high level job script is so let's let's create two arrays and we take all the elements in the wind or rain. We pushed him into the secondary least. It's something about more different. So first it is. That's credit on the file, another snippet, and it's just call that for each. Now the first thing I want to do is create an array. It's just cool. Lift array one. And let's just have this full of food. Let's just say milk, honey and I don't know should create an array to, And at this stage, it's just an empty array. The next step is you guessed it. Let's create our for each loop. Let's do it. So let's access array one. And on this array one, we should have access to the four each method natively because we know that every array on our Baraza has a prototype and their prototype has the four each minute. And remember what the four each method took? What was the argument went to provide in it? That's right. Callback function. So let's provided a callback function. The callback function took two arguments. Will actually took three, Remember, But the 3rd 1 I just wanted nor file purposes. It takes two, and the first argument is the actual item in the ray. And for argument's sake, let's you and I just call that item. We can call it whatever we want. And the second item we passing this function is the index and again for simplicity. Let's just call it in days. Now. What this allows us to do is that this for each method is gonna iterating over array one and each time it it rates over the array one. It's gonna take each item in that array, and it's gonna throw us back and item in it endings. What do we want to do with that? Well, let's push the item into the new array array to So let's excess array to Let's push each item into the Saray another's push me that is very similar to the four each in debt it on the array prototype meaning we have access to it natively straight out of the box. We're going to use Template Little's here and we're gonna exist. The item Lucia say, has been added his number and they will say excess the Indies And in the last thing I want to do is I want to show you what this array looks like. So let's run this function by pushing control. Enter and there we go. We can see what the result is on the screen. Milk has been editors number zero on he's been ever as number one and should has been editors number two. And of course, we can even improve on this coat. We know that the new and improved way of doing things is the Aris in Texas. You can get rid of the keyword function and we can put a Paris in Texas. Yeah, and we can run it again. Sorry, we have to refresh to refresh our co. Let's clear the console and let's run it. Here we go get exactly the same result. But now, using the new and improved Aero Syntex before we move on this one more thing, I need to mention what this four each method and that is What is this? Referring to 11 way of tasting. What this refers to is, let's just console, log it out console, log this and a game. It's just do re fresh. It's clear the console and it's running. What this tells us is that the this keyword is currently referring to the window object. This makes sense, and we're going to get into this in more detail later, so don't want to hop on why this happens Now. I'm going to be talking about that, so just hang on for that bats with us for each method. It actually takes two arguments. The first argument was the callback function, which we've done. But the second argument over here it's also interesting that lets us define what we want this to point it. So, for example, if you wanted this to point to Ray one, we could just pass array one into the second argument. Okay, let's refresh. It's clear this console in this run this again. Look still referring to window object. This is a new ones off arrow. Syntex. If we fall back to our old function, he would and we get rid of the error. Now we do exactly the same thing. We run this again. There we go. We get this referring to the actual array. Okay, so just bear that in mind with the heiress Syntex. It really does handle the word this differently. But as the four each method is to show only two arguments, first argument is a cool way pension. The second argument is what you want this to refer to. But if you are using that, you have to fall back to the old way off writing a function who I know that's a lot, but you're doing so let's continue and get into writing our very own powerful
8. Building our custom forEach() polyfill: great. We know what a four each does. Now what? I want you to do this. Assume our browser has no idea what a four inches say that it's not natively supported by our brother. So therefore, we wanna build a powerful on our array prototype. The First Deep is going to be actually writing out the beginning of our code. And I was gonna look something like this. Okay, let me just point out it is on the prototype off our array object. Then we wanted to find the four each method. We can call us whatever we want, but for our purposes, I want us to call it for each and we putting it on the prototype off the JavaScript array. Global object we know for each is a method. That's why we've got the function, keyword and neck for each method takes two arguments. The first argument it takes is a callback. And remember that Colback that takes three arguments, that text item, that index and they're right. I don't often use their ray. That's why we're only concentrating on the item and index. But it does actually take three arguments and the first thing that we need to test for our Polly Fall in our custom code is that callback has to be a function has to be a function that takes thes items as its inputs. So let's switch over to the console and let's start righting out first, but of coat.
9. Check whether the callback is a function: as mentioned. First part building our Polly Fall is gonna have to be to determine whether that callback function is that is the function. So let's get into it. Let's start pulling up, Polly. Fall. So what I'm gonna do here's I'm going to create a new file and I'm just gonna call that plentiful and what we want. This Polly full two DUIs. We wanted to be on the prototype of every erect. So we want to access the ray object in JavaScript on its prototype. We wanting to define a new function called for each. Now, in this instance, you and I know that our browser need to be supported. But because I'm doing it this way, I'm actually gonna be overriding the normal functionality for each. So, in effect, we're gonna be creating a brand new Polly for brand new function. We know that this four each isn't method and this myth that takes two arguments, the first argument is a callback function in our case. Let's just call it call back. We can call it whatever we want. And remember, the second argument was what we want to define. This s this. Just called us that this argument. Ogg this and there you have it. This is how we started building our party fall. Now the first thing we want to do is we want to check whether the cool back is a function. And we do this by using Java scripts in bolt method called type off. That's an operator. So what we want to do is we want to taste if type of the cool deck. If there is not a function, then what do we want to happen? Well, we wanna stop our code because it has to be a function. So what we want to do is we want to throw and you type era, and what we want to do is you want to throw back at call back, and we want to say is not a function just so the user has some feedback about what it is that a drunk. And we know if this doesn't throw type era, they're not code can continue. We can continue our code here. So there you have it. Let's test whether this code works or whether we've done anything wrong. First thing I can actually spot you haven't even tasted it yet. it is. I should have actually had to equal sounds here. I'm actually wanting to be of the same. Top is function. Let's see if this works. It's clear our console and let's run. Of course, I haven't actually executed the function for each function. So what I must do hear this little to find a new array lit array equals smoke, honey and sugar and now leads. Exits are for each method. We've just bolt for each and let's just execute. Let's not pass in a function. What do you think will happen? Well, let's try and run it court type era Undefined is not a function. This is exactly the era that we've thrown here. That's why we actually throw an era. I mean, even if you put in something that's not a function like on that note, let's do console log A. For example, that's right now, So we've actually defined already. Let's refurbish clear the console and run it. Here we go. Console log is not a function, so this just shows you why we actually throw an era, because we're giving feedback to the user saying, Hey, guys, you have to actually pass a function in the four each method. So let's do that. Let me show you is what does that mean? All right, well, let's throw function. So let's pass it a function you go In this instance, the function is completely empty. So let's refresh the page. Clear the console. It's run this function and the you go. We haven't head and era and we even t stop code by saying cool often. Era hasn't been thrown. Let's just go console log. Yea, we can continue Today you go. Let's see if this works. It's run our function and you can see love to the screen as yea we can continue. And this proves that our core beck is actually a function awesome. Right? So this is the first part to building our own Polly fall back. You can see we not done by any means because we haven't even got into what the callback function should do. And that is it right throughout array and then allow us to manipulate and work with the item and the index. They'd see how to do that trophy
10. Writing our callback function: Okay, Be with me. Be with me. Because now we're gonna actually finish writing our callback function. And before we do, we gotta know what it is we want to do again. And remember how before each is a loop, Meaning we need to know how much we need to loop otherwise is just gonna go indefinitely. In our example, we've defined an array with three items smoke, honey and sugar. So the first thing is, why do we access this? And the most obvious Anta used to use the this keyword. But what will this refer to? Easiest way again. It's just to console market out. I'll show you a few ways to taste what this is. But this is the most intuitive way and let's see what it is. It's clear the console and it's right. We've consul long, this to the screen, and this is theory. We can see that milk, honey and sugar, and it contains three items. So that's cool. We know that another way to check what this is and this define it in a variable. Let's say lit. Let's just call it length. Lane for length equals this think and what we can do especially. And this is what's fun when working in the sources tab with our own file, we can put a break point here, and what you can do then is you can run this function. So let's run it. Sorry, let's refresh first here the console. And now let's put a break point here in this running. What is going to do is going to stop up code at this point. And what's interesting here and where you want to look at is the scope section within Dave tools, and you can see that Lane is currently under find right because we pause that affords executed this line. But as soon as we step over and we execute this line, eager Len is equal to three so we can see here that this is pointing to the Iran even for hover over it. This is our call, Dave Tools is It shows you what this is referring to. So that's why we can access the in bolt length method on this array. Awesome, right. Okay, so we've established that we've got the length property. Let's remove that break point and it's just continue. Teoh, execute our code and we all done in dusted final league is too. Look through power, right? And of course, we can just use the traditional fallen variable. I started Zira, and we're gonna apply this loop as long as I is less than length. And each time it iterated through this function, we're gonna increase. I've I want we know this This is the standard for group that we all know and love. And now what we're wanting to do is to find our callback function, goes here and remember what arguments are callback function took. Try to take three arguments. So we're gonna call our callback function, and we're going to give it three arguments. Three arguments are the item, which is the array, and we're gonna exists the actual item. So we have to pass in the index number. The second argument is the index itself and the food argument. Remember heart? See, we don't really need it, but we can, in this instance just to for completeness sake, we have to add this. We have to actually pass in there Ray itself. How cool is this? We pretty much done now. So what happens is we can use this for each method. We remember that the function takes three arguments. The item that index and we just called it argument this and all, we can do things with them as we please. In our instance, let's just console bug item in days in all this just so you can see that it is working as expected, that's run this function. You go have just created our own Polly full. And it's working as expected. How awesome is this? But there's one more thing we have to do, isn't it? Remember when we looked at this was it was in one of these tears. Wasn't a native support for each. Remember this. We had that this keyword in this coat this is the standard in bold four inch meeting and that this referred to the window object. But we could posit a second argument in that example, we looked at, we passed in the array one and we used that for the rescuers. Well, how would we do that here? I want you to think about us, and then I'll show you in the next lecture. How to do that
11. What does THIS mean: let's finish off with the final part of our plentiful, and that is to fix this this issue. So to make things easier, let me just delete previous console log. And I just want to show you. If we cancel loving this to the screen, what would you expect to happen? What what do you think it's gonna be shown on the console? Well, let's have a look. It's run the function and then you go to the window object. Why is this and what's even more weird? This just kills console again. What's even more weird as we put a break here and we start executing this, Let's run the function and look at these local variables again. Okay, scope. I'm gonna stick throughout code we get to the array. Now we get to the four each function, so it's gonna hop into our custom chick. It's gonna check with the callbacks, not a function. It's gonna pass that. And this is what's interesting, right? That this I hover over that when I used this keyword with in the court that refers to the ray. But when we get outside with when we get to this console log it actually refers to the window object. If I continue to execute this, we going we're stepping through now we at this console lock we outside side off the four each function and now we know hover over that. You can see that this refers to the window object. How we it is us doesn't make sense. At least you know Java script, because it does make sense and I'll show you why in a second. But before show you why and get into the nitty gritty of it. Just take a step back and look at the different ways we've just executed functions. When we executed for each, we did that as a method core. We executed it as a method. That's when we actually execute the function callback function. Look how we do it. That's right. It's a regular function. We not exist. Zika method before we call it, we just executing their function. And it may seem on the surface that that's a very subtle difference. But it turns out the subtle difference causes profound of fix. But let me show you why. Let me just jump to the other screen quickly and show you why this happens I feel your pain . I know it can be difficult to get your head around this and what it should refer to different areas of your code. But this is just a very quick, high level overview of this and why it's doing what it's doing. This has taken a rare example, and it's creating array with three values in a dog, a cat and mouse. And let's just sit out our code. Yeah, one that we've been working with without political, and you'll notice when we go and execute that for each method. As Actress said previously, that function is being called us a method. So we know this in this instance confusing. But we'll know that this were referred to the array in this instance. But when we get our callback function, this is where things get very interesting, because Java script handles this very specifically when it comes to calling functions in Harley of court. When we pass a function to the four each method off the array, the value of this is the global object window. In other words, that sanction will be a method off the object window, and this is just the way that JavaScript works when you have a function that's not being called as a method, then by default, that function is actually omitted off the window object. Whatever the global object is, depending on your Java script environment. For example, if you're running and node, the global object isn't the window object. It's called, ironically, global. So we can say that it's kind of like the four each call back method is calling window cool big. And that's why when you use this, it's referring to whatever called a callback in this case, the window, the window object. Who? Her case. That's at a very high level, what's going on in the background? But the question you're probably asking now is okay. Cool, I understand. But how do we fix the problem? How do we define what this should refer? T. What about if I wanted this to refer to my array, not the winner object? And as it turns out, there's a very simple solution to that. Let's check it out
12. Finishing off our custom polyfill: it feels like this Polly for will never end. Trust me, it will. I'm sick of it. So we're gonna make it in a fully functional political. So we've seen this refers to the global object. But how do we define what it is that we wanted to be? Well, a simple solution to this is using the cool method. What is the call method will again its in built into JavaScript. And it just allows us to call the function, call the method and define what we want this to refer to. And that's what we wanting here. So let me just show you quickly what it is before we go and execute it again. Let's create a new snippet, and it's just called us all method and let me show you what this calm if it does. Firstly, let's define a function called food. And if I I mean you to Java script, I don't know why, but often when you're doing test code, you define food and you define bar, so you'll see a lot of that going around. So that's why I just decided to call it food. There's no special meaning or value behind that would, and all we want dysfunction to do is we want this function to console log this. And what do you think's gonna happen when we execute food? Is this a function being called on a method? Where is this irregular function? Of course, this is a regular function, so the value of this should be the window object. And let's run this code. There you go. We can see it's the window object, and I want to show you how the core method works. And to do that, it's just to find an object. It's a lit bar equal an empty object. Now let's execute the food function again. But let's do it with the core method. So we access the function. We access the negatively bolt call method, and the first argument is what we want this to refer to in this case bar. Now, if they were arguments in the food function, we could parcels along here, but they're not. So it's a very simple example. But now what do you think's gonna happen? Well, it's clear the console and that's run out code. And there you go. It's not the window object in your because we've told the engine when we use this that we wanting to refer to bar in this case the anti object court. So that is exactly what the calm if it does, it's now implement it in our beautiful to solve our problems. So the first thing we have to do is we have do allow for us putting in a second argument into the four each function call you can see at the very top We've defined that the two arguments, a callback and an argument this now when we don't put in ogg this, it's just gonna return under find it's gonna treat debt argument is undefined, and in this case, we've never used it anyway, so it hasn't really met, But now we actually going to be using it. So this and now the next thing we have to do is just change our callbacks. Likely, because now we're not just wanting to execute the function directly, are we? We wanted to exit via the call method, and remember, the first argument is what we want this to refer to, and that's what we're gonna pause in Dhakal everything else. Instead, the same calls us and remember what I said, if it's not defined, meaning if we don't pass in an argument, it's just going to result as undefined. And this, in that instance, would just refer to the global object, which is what we want anyway, So it solves up from and to prove it to you. Let's just make sure you're working. It's just save here are console and run our code. We don't want break points. Let me remove the break point. Continue to run up code. Sorry. Are get this that sees you. And this is the nice thing about working in the console. We get all these zeros thrown back at us and we know exactly I fix it. Sorry, I put all of this is a second argument, but this actually has to refer to something. In this instance, we want our array to be this not the global objects I couldn't put off this. So let's just clear the console again and try and run it and you go. This now refers to our array slow in your mind as much as mine and to prove it to you. If we remove array, we should get the globe object again. So Let's delete that. Not passing anything. Killer console, Clear The console and Mrs surround the function. And we get back to our window object we have just created our party for And I know this was a bit of a tangent troopers of a sidestep And I just thought, You know what? If you don't understand what a beautiful is always gonna frustrate you So let me just being a few lectures going over it. I hope you've enjoyed it. But let's get onto what this course is really, really about. That coming ages hope you've enjoyed Savona section. It's continued.
13. Outro: you know, you've mastered it so well down. And like I mentioned, I hope you weren't feeling intimidated by it and know it has been a bit hard. We've got into a lot of functionality we haven't yet discussed. In the course of don't worry if you're a bit lost on, but a wall makes sense by the end of its course, the one thing I just wanna mention is a closing point is that Java script is the language used to write honey for bats. The Poly full itself doesn't have to be used $4 script. In fact, you can create a pontiff all to implement various browser features other than jobless. Well, what other features and talking about? What other features can we create? A plentiful, well, pretty much anything you want things like SPG canvas, Web storage, local and session storage videos. HTML five elements. Sees is responsive design with sockets. Geolocation Is that enough? As you can tell, there's a lot we can do. So it was a very important lesson for you to go through. Glad you soldiered on with me and I'll see you in the next section. Enjoy it
CM Code_Zone, !false | funny, because its true
