Advanced JavaScript Techniques: Closures, Prototypes, Async/Await | Live Q&A with Senior Developer

Key Takeaways

[Music] hello hearty people party JavaScript people maybe yes I hope so yeah um yeah well today is dedicated to JavaScript and that's because we're here to talk about Advanced JavaScript techniques with Syria developer Michael in the house yeah yes we're gonna be talking about all sorts of exciting things such as closures and scope my favorite [Laughter] prototypes I think away functional programming objects Maps classes the dark and yeah one JavaScript tooling such as transpilers bundlers and all the rest of it yes and answer your questions yes definitely any questions you may have on these topics or other JavaScript topics doesn't have to be limited to that drop them in the chat and we'll do our very best to answer a rep thank you all for coming along Josh snake has um dropped a lion into the chat that's because we'll run a weekly poll um which is if you're new here please put a party rabbit into the chat yeah and if you've been before hit me with that tiger it's like you may be thinking so what's with the line the lion is the regular attendee lion so there's no hard and fast rule for this if you just consider yourself a regular attendee that's right it's a third option and if you're from culture states of elephant yes you can put anything but let me know where you're tuning on in from someone some of you have already done that we have India violin India okay yes Iranian JavaScript community and who said hello to you all and Nigeria look at this Montreal bunny rabbits and tigers coming on into the chat wonderful and supposedly ought to mention just in case you haven't come across us before if you're one of those bunny rabbits indeed like yes we are Leanne and Michael from Scrapper yes oh my God she's learned just to clip yeah it's good to clear it up um scrimmer here's our tagline don't spend 15K on a coding boot camp that is because you can learn to code with us for much cheaper yes including with this JavaScript Deep dive course I wish we'll be looking at a little bit today includes some topics we are focusing on and ah front-end developer career path which aims to teach you everything you need to know to get hired as a junior developer so check that out after this stream should that interest you yes so oh and if you're looking for more assistance with studying we also run a bootcamp I think we do yes the scramble book which follows the career path but gives you all sorts of lovely perks such as building a network with your study groups collaborating on group projects which helps you learn about git and all the rest of it exclusive projects to beef up your portfolio and code reviews yes that's right we are close to uh reaching the 1000 code review Milestone nice all right exciting yes so ooh Mark is 77 done with the front end career path that's a good number yeah [Music] lots of people tuning on in from South Africa Nigeria other places all over the world yes and so like yes we want to talk about Apache yes let's start with your favorite Colossus and scope is this really your favorite uh yeah I kind of uh do like closures and stuff so I will um well let's basically have a look at uh so we need to re-share oh do you do we uh what is that not this I know that area yeah okay there we are perfect yeah so uh I think with uh with this course is pretty good because it indeeds it dies into all sorts of um topics and I think if you scroll to functions it's free by the way uh so this one is not free oh no it's not okay to leave the last 10 seconds this is part of our pro package yes um which is precious power parity and stuff like that so we can't tell you exactly how much it costs because it costs different places in different countries yes uh but yeah go ahead to the page and check out how much it is in your location um yeah both functions uh and then you will see closures and why it matters so uh the point so you're not logged in yeah it will tell you to unroll there you go uh so with closures you will have this kind of um the syntax where you have a function uh there's like an outer function which returns an inner function I think uh also do let me know if you want that zoomed out zoomed in zoomed out or is good enough that kind of thing uh but hopefully it's good uh anyway so yeah closure you have an outer function that returns an inner function as basically this construction is called closure um because it closes over and in a scope so this uh variable is scoped just to this kind of like post function over here and this function has access to it and it but it doesn't have access to any other things anything outside of the closure and it's quite useful because uh quite often in JavaScript when you start learning you end up writing a lot of uh variables and functions that you know mutate variables and stuff like that so quite often you just want something a little bit more certain that it will not update things that you don't not intend to update so that's what this provides and that's what that provides indeed so I can see that there is a question like what is Step good one so step here is a variable right uh those pastors that well it's basically an argument that it's past two closure so what you can do is you can create these uh like unique functions uh that have individual arguments so for example you can say const uh like which is on a light post and you can say you know what when you want to I have now created a function but basically increments by one like or increments by two likes right depending on how I pass that so I can say for example console log like on to log double Nike and console log double like again so you can probably try and see guess what's gonna happen right so one function and all of those have access to the same variable yeah right so it's basically you can create this um like combinations of different functions that all act on the same scope without worrying too much that something else is going to come into the mix and it's all going to mess it up like with global variables so you're effectively trying to narrow down the scope of the impact of your functions it's just for you know if you're particularly worried about messing something up closures is like a clean way of uh you know just wrapping in the closure is available here's your function I say a couple of arguments and it's nice and clean interface to work with um so if you want to guess how many likes we're going to have in the end I'm gonna go for six why because it's the bottom one in the concert I know but that's that's the old console log okay well go on then surprise me okay so that's okay so we have four where we have basically because we start with zero right we incubate it by one yeah then we have a double like two and then we have a double like which four one so that's one like yeah so this closure here has its own light count and these closures have their own light count right okay so let me also so I can do it with that I'll also uh show like count and I'll do it right so you start with zero and they both have a zero and then because they only run once you have that but if I also go and show here that's the function that gets executed because we return it that's the function I actually get to executed see so that part gets wrong at once it's like a setup uh right so we have had one one so they're separate variables this hopefully we'll clear up um JJ's question which I had the same question uh shouldn't it be five wow okay so two plus two yeah so the benefit of closures is because once you create because notice that here we say handle like pose that returns our function that has its own scope so that has its own light count separate from double like light count yeah so they live independently yeah and that's why closures will be super neat so would you say closures are something you're expected to use outstand it so that's where uh my next favorite bit comes in because yes once you get to react you will be using closures all the time and mainly uh there'll be rep hooks right so since you say something like uh uh use state that's effectively a closure that has its own that returns uh function which is set color and it returns a thing that you're setting so for example you know if I were to you can say something like you can say set state and it takes an argument state and you can say return so because you have also closure which is in a state you can say like yeah that's like you in neutral stuff right or like well it's yeah stage or it could be undefined and then you say return and then what you do is you can then return uh you have to return two items which is your color right and then the function yeah you know like what we did with handle likes uh and then effectively that kind of like you you return both the inner stage of the closure and the closure itself so you can reuse it all around wow yeah so um again you know I was not the first one to come up with it obviously um but react team came up with it as well I don't realize state is a closure so uh that kind of brings me to my next favorite uh I think there is an epic talk which basically does that uh uh so swix has gone to the conference and in half an hour he's basically recreating you know basic react um in a talk and from there you'll see not just the practical application of closures and why they're useful but also how would you how just how useful they are that you know you could have been using them for ages you just never realized that that's what they are yeah um and yeah it's something you use every day you probably don't write your own closures from scratch match right um sunless you know you need like a custom hook right so for example if you want to create a custom hook but it's for yourself there you go now you know how to do that because you know how to create hooks if you've been using reacts chances are you've been using closures but maybe not realizing yeah it's just that in react closures are called hooks so you know if they call it youth closure uh it probably would have been a bit more obvious this post in the way yeah well remember yeah okay collusions are hooks yes in react context yeah yeah okay um one question here from laughter why do some people hate JavaScript now maybe you in the chat can tell us why do some people hate JavaScript oh it's amazing maybe you don't hate JavaScript and you love it in which case tell us why too but Michael firstly what are your thoughts on JavaScript um I like it it's uh it's quirky I kind of uh I like to compare it to English language in general so if English is not your favorite is not your first language uh you know your other languages seem to be a little bit more uh you know precise or something or they do have a little bit more logical structure to it and there is a lot Michael's saying that because English isn't always personal right yeah uh yeah yeah and uh you know English can be a little bit quirky and there are some things that make no sense but you just have to roll with it and uh I guess that's why I like JavaScript because some things don't make sense um and you just have to roll with it yeah you just have to roll it like for example you know the most I think there is like a fair Fairly famous website which is like WTF JavaScript uh I don't know I think I've seen this before yeah like if you compare to a race if it's false uh and it doesn't make sense at first but once you look into the logic of it you go like actually yeah there is some logic to that it actually is a fairly fairly consistent and how illogical it sometimes can be um so yeah it's uh it's quite it's quite fun killing this all right sorry I didn't share my example right yeah I'm pretty sure you were sharing it no I think I canceled it yeah there you go so console log uh but for the closures yeah yeah no no I stopped it uh yeah so if you compare to your race then uh you would so the reason for that this might be completely wrong is that because they're saved in separate parts of the memory or something that's right yeah so they are not actually they're not actually this you're not comparing a raise by value you're comparing array addresses and they are indeed different so for that um to prevent a lot of languages do that kind of thing um but usually when you put like double equal sign like that you're kind of expecting to compare things by value because for example if you compare two shrinks uh they're not compared by aggressors right they're compared by values those of the climate card trips people are because you compare things by values here but not by values there so um Andrew is saying arrays are technically objects uh well we will get there once we go to uh prototypes okay yes which are different memory spots so you had two objects in there just now that's right so we according to this would expect it to be yeah yes very good uh oh I kind of like that one um no we hate to cause uh line plus 191 . uh but 91 minus one what is it yeah so what nine a string am I reading that right no no nine is a number one is a string all right that is 8091 yeah fair enough I kind of expect for that but copy it down and share it um next to each other yeah I did minus 91 minus string one so what's happened here in the first one it's converted the string one two ah right right okay it concatenated them because uh I think that would be easier to do it like that's like const I think I'll just be glad and then I will also look uh type of thought and uh yeah so how can I donate it into a string right right but that it uh it converts it to a number so with the Plus it's not converting it yeah because plus can be used as you can you can say like yeah with a plus you can say a plus b and they will put two letters together but if you say but with a minus what book does that mean like I mean can you do a B minus B no you can't there you go so again there is some kind of logic to that you know yeah because plus and minus are kind of the opposite mathematically but in terms of the JavaScript considering that you can do multiple things with Plus uh you kind of have to pick one or the other from time to time so minus is you know plus and minus are not direct opposite because they contextually can be different as Andrew puts it yeah it's concatenating the string because of the plus and doing the math on the minds exactly yeah yeah so you see content there are multiple contacts while there is only one context uh for minus and uh yeah that's it I think closest would be applied even if you declare uh with lab indeed yes in the world to be fair but you can use a bar you know this was um Jerry's question to which CJ yeah just answered so if I understand correctly the key for a closure is to store it in a const well you don't have to oh it doesn't matter because basically you the boiler for closure is that you can return function as a value that you can then do whatever you need to do with you can pass that value somewhere else you can invoke it with some arguments uh it's up to you um plus minus business nicely yes the class operator has meaning with respect to string types the minus operator does not that's why they're sticks yeah yeah good stuff indeed someone earlier said we have a lot of read about and we should consider a carpet I in fact have a carpet yes so but it's on the floor yes maybe we should do the walls as well yeah sorry if there is reason let us know um okay moving on where shall we go next I'll let you choose because you're the uh oh yeah yeah the next thing I think uh I'm also going to show is obviously one of my favorite resources uh and I'll be if you need a concept uh then you just go to this book on GitHub it's free uh it's available right there it's uh yeah you don't know JavaScript book on GitHub indeed how's that you can well you can buy it as well uh if you want to support the author uh but if you you know be a Pitch and you need to research something um then yeah you just go straight to the address you know uh you can actually just type y d and JS and Google directly to to the book that would make a good t-shirt there are t-shirts yes we should get some exactly uh although I would prefer you know you don't know CSS which indeed that that's true I don't know there's that one that CSS is awesome and it's going outside yes indeed anyway so uh yeah so the right chapters on scope enclosures and uh you can basically read through you know what is scope uh scope chain and the rest of it do you just click those and that's the chapter then indeed so for example using closures and then you can you can go into using closures with examples uh so Carl Simpson's book on JavaScript oh with all that Carl oh sorry uh is addressing me with his book titles uh I think actually the name for you don't know JavaScript goes because he was in one of the interviews and somebody told him you don't know JavaScript and he said okay well I'll write the book about it then you don't know JavaScript I kind of admire that level of pettiness brilliant yeah very good or maybe I just butchered that story completely so you know if I did let me know so this is a good resource to learn more about closures and JavaScript in general uh Joe says uh did he say he doesn't know CSS I think it was just me oh you you'll be surprised that there are way more people that don't know well they definitely are yeah yeah I still have it on my CD yeah so let's talk prototypes yes so uh obviously it's one of those so let's get uh I think that's actually a very good point to bring up that whether those you don't know JavaScript book uh if you so by default you will go to uh Second Edition there's a branch for second edition and some topics will not be covered in the second edition yet because it's kind of work in progress yes indeed you need to switch into uh first edition but also uh you know there are some translations yeah so you can actually have a look at uh yeah there are a couple of translation branches maybe you can create your own for example who is that and oh well that's uh there you go there's even a Ukrainian translation I was going to suggest you can translate it into Ukrainian no uh it's a really interesting someone's already beaten you yeah it sounds very beautiful okay so there you go uh and then there is uh first edition and the first edition will have uh prototypes and then you can just go straight to chapter on Frozen notes is this thing so yes prototype protection yes yes that is the that's the same thing yeah okay yeah and uh basically uh when the people say that JavaScript is a prototype-based language that's what they mean uh it's and well you know it's all based on the Prototype which is basically there is think about it like Lego bits you know there is like one Cube yeah and you can put them together to make you know a slightly bigger item and then you can combine those items into a bigger shape and then you can create stuff out of that uh so that's basically what JavaScript is mainly functioning so there is like an underlying structure and then people kind of add bits to it and usually by adding those bits people call the resulting prototype something else right so it starts with a prototype that can be used yeah exactly so it you know for example kind of what it says on the tin then really yes yeah it's it's quite a tricky to explain a very suffix monetary word in a way uh but there we are so for example you can start with an object you can add property to it and uh you can do that pretty much with any object uh you can create objects from other objects which then they kind of because they're all interlinked they will share properties like in that example and then you basically go ahead with the entirety of things so that's when when people say where does the Prototype chain because if you go to your browser for example yeah so let's just for example let's create const a and we'll make that uh an object right so if we say a DOT you would see that there are a loads of properties right and these are built-in properties they already exist so then if you go to this double underscore which sometimes people call dunda uh actually I've never understood why but just uh then you will see that there is that's what it's based on right so these are other subjects that people have yeah so a built in yeah so the Prototype of a object that I have created is this object so if I go a and then I can say you know what's what's the current object of that and it says no because that's it that's the top level yeah that's the top level it's object so that's when remember when people say ra is actually an object what they mean is if I create an array and I'd say array Dot uh Proto what's that and when I open it up it has all these different properties that it inherits from but that's like that's where the Arenas comes from you know all the methods like document reviews portion the rest of it but if I then go to the parent of it uh it will tell me that it doesn't really go anywhere but in the properties over here there should be like a construction uh is it yeah oh there prototype okay so that's a different Constructor yeah so and the Prototype of it will tell you it's an object so it inherits parts from an object the the most underlying structure and the rest of it so if you ever want to know something you can then just say const uh number equals three and you can say num uh sorry num Dot okay once again it will tell you oh there you go carries a number you then go into okay Constructor and then in the property prototype it will tell you object and the Primitive value is kind of like a default value if you don't sell it so it will tell you from there you can see that oh actually it's an object so whatever you pick everything ends up being an object so it's kind of like again with the the Legos where yeah you started with one bit and then you added a couple I mean I hope Lego makes sense but if you didn't play with Legos or something then maybe it doesn't I don't know oh look at that um I think somebody yeah double underscore I mean to be fair it was pretty obvious clarifying it thank you yeah well done um VJ that's a question is prototype just another name for parent class or the fundamentally different uh so if you're thinking like Java then it's kind of similar uh but kind of also different again like um yeah I feel like the stream is not long enough to go into that and also I don't think that I am academically educated enough to be very good at it but if we oversimplify it's the same but there are differences if we do not oversimplify to parent classes exist in JS then uh so again njs is a little bit tricky because it's prototypes and or actually I think that's that's a useful one to show as well so if we go to we say cons cion equals [Music] function um so when we say you funk we can probably just say no sorry uh right today finish that I'm very quite excited here and uh it's a native code yeah and that is actually different so different from what well it's not an object all right so with uh with JavaScript you know they're all like underlying building blocks which is actually a function so yes there are objects but objects are also functions so you may already be about to answer this when would you create prototypes of an object rather than classes so uh class is a way to create those functions so again uh because I don't know JavaScript there is a book that can tell me I can though uh let me just quickly so the way I also search this podcast let's go to function and yeah I think it's in Scopes and closures what do I have uh I wonder if I have bookmarks in somewhere no so types grammar this object it's scoping yeah it's probably into Google enclosures uh yeah they go function and then from function so he doesn't cover that in skips and closures let me see um I'm basically trying to find what is oh classes yeah there you go so I did I remember that I did bookmark it cool so with classes is effectively a wrapper around how functions are created and I hope that he kind of covers that somewhere where they call it okay maybe the best example is class and tactic sugar yes okay so hopefully if someone has an example of what it looks like so if you can do it through again uh prototype assignments so someone has a function vertebrate okay cool object assigned vertebrate and then you basically say prototype and you create a function to it which is walk and then you can have function bird function assign that's a very long answer okay going through the entire animal kingdom yes but I think eventually they do get to the point where Okay cool so vertebrate with a function creating so that's like manually created in all of this when what you can do instead is then use class based syntax that is kind of short focused and a lot of this prototypal boilerplate that you will need to write right so you say const function and then you like do some Reflections and pro assign them to prototypes and stuff and you add all of those um so instead JavaScript has just said you know what here is a class syntax so instead of you writing all of this just use this keyword Define your functions and we will do all of this annoying boilerplate for you so you don't have to do it so to ask you a question objects and classes usually you know if you have studied Java or in a CS class when you think about objects and classes you usually think that the object is derived from a class so when you create a class that's an object but it's kind of a little bit more nuanced than that in JavaScript kind of like with a plus and minus sign because they are lexically when we say class and object we mean ever so slightly different things in JavaScript and it can be a little bit confusing because if you come from java and somebody says you know should I use objects to all classes it doesn't quite make sense because they are not interchangeable the people said here JavaScript class prototypes yes so basically that's um what is syntactic sugar syntactic sugar is um software engineer way of saying an easier way to do something so instead of writing stuff it several writing a lot of code you have an easier way to do it yeah I learned it as class as being syntactic sugar a syntax that makes things easier but underneath it's all prototypes correct Ed said has always been to me yes that that's correct exactly which is why you know the objects are not not quite related to it but also coincidentally once you create the class an instance of a class is an object remember that so it's kind of yeah I do feel like I probably confuse people more than I am fine let's go oh which one functional programming functional programming let's go with this sure because I feel like at least from what I've seen it's much simpler than it appears so what is functional programming so there are a handful well a functional programming is uh like a term for a handful of ways to write code yeah which mainly uh uh you know all around functions uh so there are a couple of main principles that functional programming also does quite useful to know uh because usually it kind of helps you prevent a couple of bugs just if you are aware of doing things like that way uh so coincidentally the same author wrote the book called functional life JavaScript which is basically um yeah functional programming can be a little bit intense and there is a lot of terminology which is even more confusing than object-oriented programming and this is the light version yeah and basically it's kind of like the light so you don't have to worry too much um and you know how do you create functions uh managing outputs but the main the main bits about functional programming is like immutability which is you do not update inputs right so if your function receives inputs you don't mutate them like you just leave them be you return new outputs uh so that's what we mean by that is you know if you have a function and it takes an argument uh let's say you know an argument of name and you well let's say first name last name and the function it's like gets full name right yep what you want to do is you want to say return first name foreign space last name can you do that yeah plus okay no so with that it's not gonna work let's see the whole name hey obviously it will be a little bugger we can see if we've well actually no you should give us a number you should like but you know if if you name your child a number that's okay okay that has work good yeah but I think uh they even need to shut the first one the first name one yeah and then space yeah all that okay password yeah maybe anyway very good so if you if you create that but what uh functional programming doesn't want you to do is for example if you say then first name equals a B you know all trying to mutate it some way to do CD just to yeah yeah so what functional environment doesn't want you to do is basically try to mutate any of the inputs as you have already received them uh and I think uh that's like fairly mathematical way of pushing it uh so function of an function event I think it looks if anything in yes and I think uh Vijay basically yeah he says pure functions exactly isn't that no first name and last name oh yeah of course because it's the last all right yes good stuff thank you uh pure functions indeed so and also it's called reduced side effects yes so what you use yes so with all of it so this is a pure functional it's not now so right this uh is now not pure functions because you because it has side effects right right so if you change your inputs they call that side effects even if that's what you want it to do so when you're trying to write functional code you avoid it as much as possible the ways to like tell like there are lintest that's set up that will tell you that you update arguments you mutate functions or you basically you have a function that mutates them or you are mutating arguments there is a side effect don't do it so uh make it pure uh you basically try to avoid doing any of it and if you need to create some kind of uh update where you instead do is you return a new value so what would that look like here so this person a B has changed their first name to let's go with p so what you would do instead it so instead of mutating first name last name if you say you know what we're actually going to ignore their first name because it doesn't matter and they will always be uh you know I don't know foreign value instead of trying to update first name to your value that you want I suppose what I'm getting at is sometimes you do have to update things so how does that fit into functional programming right so that's why they say like for example if you have a you know some people say that it means not having any side effects but not having any side effects taken to the extreme means that you never update databases yes you know because then no updates can ever be made so there are obviously exceptions made for you know when updates need to be made but the main principle is um yeah this is a what Mac tooker says side effect is to change something unintentionally um something does an extra unwanted thing yes correct so how does this actually how do you apply functional programming then is it something you do via linters or just a force of habit that's kind of a lot well combination of everything yeah yeah uh there are also helping bits to it like for example uh JavaScript uh Mob function so uh one two three right so you can say map uh and mock function by definition returns new value so it doesn't actually do anything with this array that you give it yeah uh and that's one of the that's why people say you know functional programming whenever they teach you a functional program in JavaScript they always go to map filter reduce because it's built into those yeah functions and uh coincidentally mapping filtering reducing is like the three most basic functional program Paradigm paradigms so that's basically what we do you you take inputs you can map over them you either like remove certain from them or you combine them in certain way which is reducing so how does this um compare to oh I can't find it now oh okay object oriented program which is uh you create I think there was a question like what's I thought that objects uh Maverick mine all right Pete yeah and I think you can scroll down a couple there is one tagged yeah that one awesome so I thought obviously it's not crazy for classes yeah so they are instances or classes so class is like uh a drawing of a building yeah and once you apply that drawing you have a building so it sounds like what done in 64 said is right then correct but the term is instance uh okay don't ask me away um probably to do it yeah unique one thing from derived from something yeah yeah see what I mean English is quite a funny language it is yeah yeah so the difference between functional programming and op is that they're not I don't know it's kind of like comparing apples and oranges you know like uh you can say that you prefer one fruit to another but fundamentally they're just different fruits you know if you want to have an apple pie it would be very hard to make out in like orange so I it kind of depends what you're trying to do like if you're trying to write a piece of code that has very defined hierarchical structures then I feel like Ops kind of it kind of makes sense uh a lot of the time though hierarchies and structures are kind of a little bit fluid like they apply heaters on the play there you know um which is why a lot of oop examples are a little bit contrived you know like vertebrate bird parrot no it applies somewhere yeah exactly like if you're writing software for like a natural history Natural History Museum yeah like uh theory of evolution or something you know to illustrate the tree uh kind of makes sense um but sometimes you like when you actually write real life code you kind of realize that a lot of these structures are very hard to map one to another because there was always a bit of an exception so people might be wondering do I need to know exactly what an IP and functional programming are or so can I just learned Js I think you well okay so I would suggest you Andreas but you also read up a little bit about what therapy what's FP uh and how if you structured your code using FP practices what does that look like and if you structure your code using oop practices what does that look like you can ask chat GPT yeah so yeah exactly actually you can't uh but if you're looking for book recommendations then I really should um functional like JS previously and if you're looking for an OP book I think there is one like called 99 bottles of oop s yes there is there is a book about that and uh it's basically JS PHP and Ruby but again you're looking for GS so there is a book with GS examples of like how to structure your code in op money and they can basically basically Harper says you're like op NFP the more you learn to see us and make projects using both yeah pretty much and Michael I'm just throwing another one into the next imperative programming yeah so there are a lot of Parallax how to write your code you know and uh I feel like a lot of the time we as developers try to say you know which one is superior uh and is applied most of the time but you know it just really depends like sometimes you just need to write your code like if you're writing the script it would be declarative uh but like react is imperative is it I think so so it's I think it's my in might be declarative it says in our react course oh yeah in that case it is oh yeah sorry imperative imperative that's true imperative I always confuse them though so imperative is like writing a script because you tell it's exactly what to do at any given time so for example go to the dawn grab this element update this bit that's imperative but declarative is like I want this to happen and this is what's gonna happen yeah I think I was too busy Scotland group both slides well in this learn react course which is free somewhere near the beginning declarative Hopper says declarative is writing all the steps ah always get myself spin well basically one of them is that an aclerative versus imperative this is procedural I come in procedural dammit no imperative Vegas step by step instructions declarative ordering a pizza without being concerned about steps it takes to make it yeah exactly so there you go so there's a why react it's declarative yeah so I'm afraid I'm afraid Harper it's the opposite yeah imperative is given step by step and declarative I I may have a backwards yes and uh summarizing what you should do yes and a thought provoking question yeah thank you for this but yeah uh I think as you can see it's okay to sometimes have it backwards because yeah they are two very similar words can you tell us just to finish up a little bit about one JavaScript tooling trans Wireless and bundlers and the reason I asked this is sometimes the dev team talks about oh it's the bandler and I'm like oh the bundling yeah what is that so with uh when you're writing code especially in JavaScript quite often you do need some extra tooling to make sure that this code runs or just in general you know like how do English words get translated into something that computer can do so a lot of these tools is basically you know compilers interpreters uh and if you're going further the upper level you know certain syntax it's not um supported like for example they say es6 es5 uh and all that stuff so basically it's it's all about trying to either update existing code so for example if there are if there is no support for class like the browser does not understand what a class is then you need to have one old browser isn't it yeah like IE 11 for example didn't support class attacks hopefully that's gone yeah so you had to have a transpiler that would take the class syntax and convert it into that previously what we saw on the stream prototype syntax uh so it basically just does that automatic work for you uh and uh her bundler is just different type of tooling which uh so for example you write your code in typescript but you want to um for example those types they do nothing on um you know when you ship your JavaScript to the browser it does nothing so what you want to do is basically you want to take all of your code your all of your CSS which is probably written in something like Tailwind uh so you basically want to put all together bundle it all up um you know do whatever work like for example remove types from typescript uh convert it to whatever syntax needs to happen convert your Tailwind into proper CSS uh that the browser understands and then you basically bundle it all together and you have a final bundle which is HTML CSS JavaScript so there are there's a category of tools which does it for you so you don't have to do it yourself and they're like wet pack um feet uh snowpack uh you know plenty of them they all they all most of them have something to do with pack um and it's quite useful to learn how these tools work because for example if you use scrum you might want to run your script locally which means that you download the screen and you need to invoke a couple of commands we'll do stuff for you uh so it's all of these words are usually to do with tooling surrounding JavaScript ecosystem uh which is uh yeah unfortunately sometimes it does take more time to deal with than writing actual JavaScript but yeah in an interview I love feet the fastest way it's pretty good it's pretty good I I think a lot of people use Veep now it's uh very straightforward to use the doctor and the you know the config is not as um intense I suppose yeah but I think from scratch it would be quite useful you know if you have um well I mean now with veed react apps fairly straightforward but you know try to for example set up um react project with different bundlers try wet pack uh try and eat compare them you know try to add uh SAS to it or Tailwind uh and see what kind of config you need to change and then just go from there this serp says oh you will never die just like flight he wrote up Holly fails to help with Legacy browser support yes oh boy aren't those fun yeah remember having to write Charlie fills for I.E oh boy yes brilliant well thank you the Harper says never use oh never used webpack I mean give it a go um it's it's still out there so I know that most people use beat and most people try to migrate to read but there is a high chance that once you get a job you might have a webpack off it yeah Legacy card at least maybe not yeah it could be a very updated app or just developers are really quinoa webpack yeah kids well yeah so we have time for today thank you all for coming and asking your thought-provoking questions as usual very good we will be back in a couple of weeks yes I actually remember the topic let's go and have a look uh live stream calendar deploying front-end applications so that's something to look forward to it's not on our YouTube yet but it will be very soon hope to see you all right there yes drive one okay and yeah uh enjoy your weekend when it comes when it comes yeah not today tomorrow yes