Day 7: Polyfill — Friendly Ghost 👻
What is this Polyfill? and Why are you calling it friendly ghost?
😁 because it is!! It scares new people but people who know it loves it.🤕 As far as I know, Only interviewers loves Polyfill. They ask lot of questions on that..
😅 What can i say now!!😛 Tell me what is this Polyfill?
Okay, First of all, Polyfill is a code which provides support for non supported features.🙄 You are again talking alien language, I am a simple person, simplify it please.
Okay, Let's imagine in the future, instead of doing `console.log()`, what if we can just call `log` function directly.What do you think the current browsers we have, will they work as expected?
Obviously, Why they will work!! They don’t have that functionality. Only latest browsers of that future time will have those functionality.
Exactly !! Hey 😈 why not develop polyfill right now.Okay, I watching…
If i use `log` function right now, It gives me below output.`log is not defined` and obviously it is not defined.
Let's write a polyfill for `log` function.
Setup looks like this.- index.html
==> Basic html with two script tags
==> First script tag is for `polyfill-log.js`
==> Second script tag is for `index.js` where you write code.- index.js
==> Here we call `log` function and pass our message as parameter.
- polyfill-log.jsIn this file, we give support to older browsers, Let's check how!!On the line number 5, we first check on the window object, do we have log function available?Here we have two cases, In new browsers it will already have `log` function on window object, so it never enter in this if statement but on the other hand. If we don't have `log` function available then we attach a `log` function on window object by implementing a code which is supported by all browsers. That `console.log` and anonymous function is supported for all browsers right?In short our own implementation of that future log function.and because this script is loaded first in HTMLso we always have `log` function available in our code in `index.js` either the future version of `log` or our own implementation.This piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it, is called Polyfill.
Hey.. It is quite useful.. 😱
Yep, jQuery became famous because of this only thing. Because if you use jQuery, It just works either you use internet explorer, chrome, firefox or safari. It has polyfill for everything.
😵 Ohhhh, Its quite famous thing from long time, I just now got to know about it why.
Yeah, Actually polyfill is not specific to Javascript, In many languages polyfill are used to support newer functionalities with older version platforms/systems.Okay, but interviewer asks about polyfill for bind, filter , foreach , map etc functions.
Yep, Writing polyfill for such functions requires knowledge of prototyping. I wanted you to understand concept clearly first, so i spent some time in thinking easy, simple and relatable example for you. I hope you understand it.
It was quite easy 🥳, Show me the output.
sure
You have your own log function.. Hurrayy!! 🥳Hey, But what is this Prototyping?
Actually, right now I don't have easy way to tell you about prototyping. I am thinking about some example, May be tomorrow I will tell you about Prototyping in detail.
Okay, I will also check it and will also try to create my own polyfill for bind , filter , map , foreach etc etc..
Sounds like a good deal !!See you tomorrow 👋 and don't forget to join me on Twitter, LinkedIn and Github.I share lot of cool tips and tricks regarding PHP, Laravel, Javascript, Vuejs, Nuxtjs, Reactjs, databases, workflows, productivity etc etc. https://twitter.com/rckstrbhushanhttps://www.linkedin.com/in/rckstrbhushanhttps://github.com/bhushanTake care and stay safe. Cheers 🥂
Bye bye 🤓
