[Music] what's up people it's dev sage here and in this video i'm going to be teaching you about polyfills in javascript so what is a polyfill a polyfill is a piece of javascript code that is used to provide or fill in some functionality that one browser might support but another browser might not support so let's take a look for a second at the mdn web docs this is mozilla's documentation for web technologies and this is the doc page for arrow functions now you might be familiar with javascript arrow functions already they're basically just javascript's shorthand for functions but you may not know that all browsers don't necessarily support arrow functions in the same way so if we go to this uh browser compatibility link here we're brought to this table of browsers and their support for arrow functions you can see that arrow functions are largely supported by most browsers except for ie internet explorer does not natively support arrow functions so let's take a look at another page so if we go over here to the promis documentation of course if you're dealing with asynchronous javascript you've probably encountered promises let's take a look at its browser compatibility as you can see promises are also largely supported by a lot of browsers except here's ie is not natively supported by internet explorer so where polyfill is coming to this is a developer might write a piece of polyfill code in order to fill the gap here for ie so it's a it won't be the original promise implementation but it'll be a piece of code that can basically simulate the promise behavior in order for ie to support it and to understand it so now that we kind of got an idea of what a polyfill is let's uh go and write our own polyfill so let's open up our editor and we're going to be writing a polyfill for the for each array method so uh let's uh let's get some some code here so let's create an array so let's say const r equals array of one to five and let's see what the original implementation of for each looks like so let's say r.4 each for each takes in a callback function which has a value parameter and in this callback function let's print out two times the original value in the array so let's say console.log val times two let's save that and let's run it as you can see we have 2 4 6 8 10. so for each takes in a callback function calls that callback function for each element in the array and just does whatever that is simple enough so let's pretend that we didn't have support for for each so let's let's kind of simulate that so let's let's say array dot prototype dot for each equals null so this is basically just erasing for each from the array prototype so we're effectively eliminating the support for four each so what i mean is let's say i ran this again beginning error r.4 each is not a function so this is basically just erasing the for each method from the array prototype so let's say let's add a comment here so simulate browser incompatibility so yeah so normally you know for each is actually supported by all browsers and doesn't need to be polyfilled at all but this is just for testing and demonstration purposes so now that we kind of simulated browser incompatibility for for each we need to write our own polyfill for it so how do we do that so let's go down here the first thing you're going to want to do when you're writing a polyfill for something is you need to check for compatibility in the first place so we might write something like if array.prototype.4h and then inside of here or i'm sorry if not array.prototype.4h then we have our polyfill code so this is checking does the array prototype chain contain the for each method if it doesn't then this browser doesn't support it and it needs to be polyfilled if it already has the for each support then this just gets skipped over and your the rest of your code runs like normal so in this case we are we don't have support because we're kind of simulating that here so we need to polyfill it so what does that look like so basically we need to set array dot prototype dot 4 each to equal some function so this is our new for each polyfill this is our polyfill for the for each method so i guess this is a good time to point out that whenever you're going to polyfill something you're going to need to have some kind of intimate understanding of the internals of whatever you're trying to polyfill so for example we need to actually know what for each is doing under the hood in this case it's kind of simple to see like i explained for each takes in a callback function so i guess we can go ahead and add that part in so let's say callback function as a parameter here to this function so this is the callback function that for each takes in and what for each does is it calls this callback for each of the elements in the original array so how do we get access to this original array here so what we can do is we can use we can just call this so this is actually a reference to the original array that you're calling for each on so what do we need to do with this we like we said we need to loop through all the elements in this array and then call the callback function passing in that value so we can actually use a regular for loop for this so we can say something like uh for let val of this which represents the original array and then we need to call the callback function that we passed in so remember this is just this is a function signature that we're passing in kind of how we're doing here this is what this maps to but this can actually be called here and we can pass in val and then that way we're going to loop through all the elements in the array and apply that callback function whatever it is to that value so let's uh let's go back and let's run this again so let's see what it does and boom you can see that we have two four six eight ten we've created a very very rough poly fill for the for each method so kind of going back starting from the top we have our right here our original array then on line four we have our radar prototype for each equals null this is basically erasing the support for for each and then on line six is where we actually have our official i guess polyfill check if for each is not supported then we need to polyfill it so we do that by setting array.prototype.4 each equals some function this is where the actual specifics of the thing you're trying to polyfill come in so we know that for each takes in a callback function like we have here and that callback function is applied to every element in the array so we loop through all the elements in the original array this and we call that callback function with that value this is our polyfill so hopefully by now you have a better understanding of what a polyfill is polyfill is a piece of code that is used to fill in support for browsers that may not support some piece of functionality i hope that makes sense if you like this video leave a like subscribe if you want more content but other than that peace [Music]