Top 5 Javascript Things You Should Know!

hello gorgeous people on the Internet in this episode we are gonna cover five JavaScript concepts that you should know so things like hosting things like scope async/await callbacks event queues call stacks oh no this is gonna be quite crazy but take a look I think you're gonna enjoy this one and maybe you're gonna learn something you maybe you know a few of these let me know what kind of feels weird for you in JavaScript what do you find the hardest about javascript let me know in the comments and I'll try to help you out so without further ado grab a coffee grab a Red Bull whatever floats your boat and let's get into this episode okay well the first one we're gonna talk about is hoisting which kind of sounds like moist but it's not something completely different I need to sure alright good start let's get going so I'm gonna throw up some code here and I'm gonna explain hosting while we go so let's start the bar and then we're gonna transition to constant n chilling so far I'm gonna create a name here and set that equal to Ed I'm gonna say console.log name alright so we know what's happening here if we console.log this now we're gonna get ed all right however what happens if we move this console on up here to the top we're gonna get a something else look we're gonna get undefined now why is that happening well before our JavaScript actually runs the compiler takes all the variable declarations and function declarations and moves them all the way to the top so that's all hoisting is takes your variable declarations and function declarations and just move them to the top so what's variable declaration well this is one of our name alright it can be another one for items so we just declare a variable bar items people all right so this is how we can declare a variable this when you set it equal to something that's an assignment already so I say items equal to ten all right so this is a variable assignment so so when we have a variable declaration decompiler before it runs our code takes this and moves it to the top so what's happening behind the scenes all right this is what actually goes on its gonna run through your code the compiler is gonna get here to the VAR name it's gonna see this and it's gonna take before name it's gonna plop it move it to the top and boom that's it and here we actually assign it so this is what happens actually behind the scenes so here we have it declared but when we console.log we're getting undefined because it doesn't have a value at this point if you just declare a variable the default value is gonna be undefined so when we cancel here we're gonna get that undefined and here we are and when it gets here we have access to the name so add so if we do down here then it works all right but I can I kind of wanted to show you what's happening behind the scenes so we should get undefined and add now okay well the same thing kind of happens with function declaration so if I say function say name okay and I just I'm just gonna console.log hello there here all right with this one as well take a look if I'm gonna say say name run this I'm gonna get hello there however take a look I can move this up here I'm gonna get rid of this and change it back or a name alright if I move this up here say name up here it's still gonna work well it doesn't work because I messed this one up but take a look we get hello there so we still get hello there so why is this happening well same thing kind of happens as with variable declaration so the function behind-the-scenes is gonna be taken and moved all the way to the top okay so same name is gonna work okay there's another way we can define functions though so if I say var say age and said that equal to a function and am I actually gonna get rid of these two all right just to simplify everything so we have say name here all right this one and we have say age however this is different and here I'm just gonna say console.log my age is 25 Oh No okay what happens if I call this here alright so obviously this is gonna work down here we know that take a look everything works however look if I move this to the top it's not gonna work boom error no say H is not a function so why is that happening well if you remember I told you that there are only two things happening the compiler takes a look at our function declarations and our variable declarations so this is a function declaration so this is gonna be plopped and moved to the top okay however this is a variable declaration that we eventually set equal to a function so since this is a variable declaration this is what happens this gets plopped move to the top and eventually we're gonna add say H down here so look at that it's not a function it's just the variable so when we call it that's why we get that error saying hey say H is not a function I'm losing my voice javascript is making me depressed okay so down here again if I just say age again it's gonna work just fine but here since it's just a variable it's gonna throw us that error so there we go run this boom boom boom everything works okay now the difference is if you're probably not gonna be worrying about the var anymore because we're modern people and we use constant let here it's I believe it's a bit difference if we declare and then add a name with add and we cancel log add so this works the same way hit save down here run this we get to add however if we move this to the top we're actually not gonna get undefined it's gonna throw us in nasty error and the console is gonna tell us that hey cannot access name before initializing it okay so it actually stops us from from doing anything stupid because it it probably assumes that you don't want to call something before it's declared then the sign okay so you're probably not gonna have them any problems with this number two is gonna be call stack and for this one I pulled up these slides because I think it's gonna be way easier to visualize let me just explaining it or showing you in the code so all the call stack is is just the data structure that kinda dictates the way our functions run the way our code gets executed okay so let's take a look here all I have is a function C hello and a say age and a say all that executes both of these up here and both of these just have a console log so nothing really interesting and then we finally invoke this say all which executes these two okay and then just the console log so let's take a look on how this code actually gets executed and what's happening here in the call stack so the first thing that happens is when our code actually runs to the whole file so the whole API yes is that this main thing gets created and all that is is just it just shows us that hey our file started running all right and the way this works is you can imagine it can execute like books like execute like books it just kind of stacks like books so your main function gets executed then after you invoke a function it gets added to the stack like this on top and once that function finishes it gets removed from the stack all right then we invoke another function gets added to the stack removed and once our code finishes even the main gets taken of the stack but that doesn't really make any sense so let me can show you here on the screen okay so we go through the code javascript checks all of our code nothing really happens here because they're just function declarations and then we get to say all again nothing happens just a function declaration and boom we have a function invocation year boy all it happens here is once we invoke a function it gets added to the stack so now rather than moving on to console.log final we move into this say all all right so we move from here not down here we move into the say all alright so as you can see it got added to the stack so this say all function is running all right and the main is running as well all right and let's move on so we are in the SE all here which has a say hello invocation so we move into the say hello boom that's again that gets added to the stack as well then what we do is just we have a simple console.log up here so we console.log that thing out and once that finishes it gets removed from the stack cool once it gets removed from the stack we can move on and since we don't have any else anything else here and the other code say hello finishes so that gets removed of the stack which means we can move on if whatever happens and say all which is say eight alright we finished to say hello we went from here to here to console.log it finished so we move on alright this kind of gives you a visual of what what is actually happening behind the scenes so say age what's happening it's gonna be added to the stack boom right on top being put on alright so we have the say age that's continuing and running then we just console.log that thing out once that finishes gets removed and say age gets removed as well because we don't have anything else so good now we've successfully finished these say oh we don't have anything else in here so what happens it gets removed from the stack boom so we can finally move on to the console log and all it does it says console log final so that gets put out finishes and then our code ends so the main gets removed as well alright so I hope this give you a better visual of what's going on behind the scenes and how our our code is actually being run so I think this call stack is very nice way you can visualize on where we are in the code and what's still running and what is finished so let me let me go back one more time really quickly to show you alright we go to all the code say say all gets invoked we move in to say all which invokes say hello that gets added to the stack console.log remove and we move on to say age console.log remove and then we finally console.log out final number tree is gonna be a short one by the sweet one it's gonna be if ease now you might have heard of this one or you saw and if you don't know what it means I'll sum it up in one minute so it's an immediate immediately invoked function expression all right take a take a deep breath I'm gonna write it down here for you and I'm gonna explain what's happening so this is how and if he looks function like that I'm gonna console.log Hey all right and then we invoke it in here well that looks weird and I'm gonna console.log final here so like that all right let's run this boom boom boom we can't hey and we get final alright so what is this thing well all it is is just a way to write a function and immediately invoke it that's the name immediately invoked function expression so the reason you would write this is so you could have data privacy and you're gonna see a lot of libraries use this I think Jake jQuery use this as well and and I'm gonna move on to scopes so this is gonna be perfectly line up with scopes but basically what happens check take a look here I can just declare any kind of variable I want i can say var they know var name and said that's equal to add alright and out here if I tried the console.log name it's not it's just not gonna work alright so this is a way that you can see yeah we get an error it's gonna say name is not defined so this is a way where where you're gonna run this function and you add all your data or whatever you're building and this way the function immediately runs and you also don't have any global variables going on here number four is gonna be scope so let's check it out scope we have two types of scopes we have global scope and we have function scope perfect okay so how does this work well we can declare a variable name set this equal to Ed and what you need to know is that basically we have access to this anywhere in our code so if I cancel logout to your name that's gonna work just fine so let me show you we get Edie and also if I just make a function here is a name what's gonna happen here if I can't so log out hello there my name is name alright so this is gonna work just fine as well we get Edie right wait we need to actually invoke this function I apologize say name that didn't run okay now it should run let's go there we go it works so what happens here is in the function the difference is that it actually checks to see if name is available inside here alright so function name checks if name is available in here and it's not so what it does it actually looks one level above and it goes into this context which it finds name so it's available there same thing happens if maybe you have multiple you can have multiple functions stacked here maybe say age or something inside this say name all right then I can consult log out my age is age all right which we don't have all right so if I declare an age here 25 what it does it basically looks where ages is it inside say age nope then it checks if it's inside say name which is not and then finally checks if it's outside which it is so it just adds 25 okay now let me also invoke this here as well so say age run this and we should get my age 25 now the interesting thing is if I declare that say that age inside here const age is 10 we're gonna get 10 as you can see because it's now going to go up here anymore what it does it checks if say age is available inside here and it is so it just uses that same thing goes here if i have this in here maybe yeah keep it 10 it checks if say age is inside this function if it's not it's not it moves up here to the same name so we're still gonna get 10 alright but if it's not declared either then it moves up to 25 so all the way outside so this way you can have variables that are only functionally scoped and that's kind of what i showed you here so if we remove this we can have function scoped variables function say full name heisenberg okay so here I can just have a column that's Jesse and I can have a Const age that's 30 all right now this has nothing to do with everything outside here because this is function scoped so if I just calls to log out name and age we're gonna see that if I run this a full name we're gonna get just heat and dirty so Jesse turkey as you can see okay so one thing you also need to remember is that all your variables that are functionally scoped so that are inside of a function they cannot be used outside so if you have a function and you have some variables declared in it you cannot use it so if I come here if I try the console.log name out here it's not gonna work as you can see it's gonna throw me an error however if I have it outside of a function if it's not inside the function then it works just fine I can console.log it here I can console.log it in here it doesn't matter because the function itself it's gonna keep looking until it finds it alright so hope that was a bit clearer and that scopes in general number five is gonna be a bonus for you because they love you guys so much I'm gonna cover callbacks promises and async/await all in one so this is gonna be fun okay so what is a callback let's start with the first one all a callback is is just a function that gets passed in to a parameter of another function okay and that callback is gonna run after your first function finishes so let me kind of show you what it does so I can just create a function say name and I can set that equal to and they can have multiple parameters let's say I'm gonna pass in a name and I can pass in a function that's called callback or any name I want to give but I'm gonna say CB here because it's a bit more clear alright so all it happens is that this runs after we finish all of our code in here so what we can do here is I can say console.log running some code alright so we can have a lot of different code running in here and then I can finally let's say I can even say my name is Edie my name is name I'm gonna pass in this and finally I can call the CB as well so we need to define this one the CB I'm gonna give it a name I'm gonna say function call back alright this is just another function I'm gonna console.log this ran at the end okay now what we need to do is we need to invoke the same name so I can say name first parameter I'm gonna pass in is the name so I'm gonna say head and the second one is gonna be this function that we defined down here so if I pass that in there that's gonna go in here and it's gonna run right after we finish everything else so hit save run this and take a look after our first function finished we run this callback to execute this one alright so that's what he call back is now one thing we need to remember is that this is a synchronous synchronous call back which means that it's gonna run line by line after it finishes it's gonna run this callback and we are done let me show you a nice tinkering this callback because that's probably what we're gonna use a lot of times with set timeout or you're gonna see when you're doing a adding a click listener or things of that sort so let me quickly show you watch this I'm gonna console.log first then I'm gonna add a console log last and finally in here in the middle I'm gonna add a set timeout so this is again just a function and take a look we're just executing another function so this is a callback function in here all right now it's anonymous so we didn't really give it a name we could we could just create the function down here if we want function hello or something and we can pass it in here so I can add hello here but we can also just add this arrow function and we can give it a time like mm so two seconds I'm gonna say console.log from callback all right let's run this and see what's happening so run this and we're gonna get first last and from callback so that's kind of strange so why is this happening okay let me show you kind of what's going on in here I found this cool visualizer where we can see what's happening behind the scenes so there's a lot of weird things here so we had call stack that we kind of talked about but we also have things like web api is callback use and event loops all right mind-blowing but don't worry we're gonna go through each line so basically what happens is you know we learned about the call stack well theoretically if we would add here we have a click listener right that would be added to the stack here all right that click listener and by that theory we wouldn't be able to move on because we would always have that running right and then we could have not move on to console block hi we need to finish that function it needs to pop up stack so we can add we can move on to the console.log so what's happening is that we have these web api it's like set timeout any listener a click listener scroll and things of that sort and what happens is that they kind of keep track of what's going on behind the scenes so the code can actually run so in this example what we had here is that all right so we cancel log first I'm going to remove this console log first this gets added to the stack it finishes it moves on to the next one set timeout gets added to the stack and then it moves on to the web api's and it keeps track of the 2,000 milliseconds it's going to disappear out of the stack and it's going to move on to the last here and once that finishes then it kind of comes back and executes so it kind of disappears off the stacks and comes back so in this example that this guy gave here is we just have a click listener here and every time we click we run a set timeout of 2,000 milliseconds okay and then we cancel logout high and then we have another set time out of here yeah that's it all right so let's run I'm gonna try to pause this fast no pause alright so we run this listener this gets added to the stack here alright and remember since this is one of those asynchronous types it gets moved on to the web api's alright so let's resume take a look it gets added here and this pops off the stack so now we can move on we can move on to console.log hi for some reason alright for some reason to disappear there and as you can see now we can move on to console walk hi which finishes so this gets popped off the stack and then we move on to the next one set timeout now again this gets moved to the web api's so our stack is gonna be cleared again so we can move on to welcome to Lupe here we don't have to wait five five seconds there all right set timeout five seconds gets added to the pipe as you can see it runs and once it finishes running from here it gets passed to this callback queue okay and it basically it just makes a queue of everything that's asynchronous it gets added to this queue and once your call stack is finished this is called the event loop and all it does it just takes everything from the call it takes the first item from the callback queue and it pushes it up to the call stack only if it's empty all right so if your call stack is empty and you have things stacked and your callback here then it gets pushed up and it gets executed so if we resume this the timeout is finished so resume it's not working there we go gets pushed and the console lock happens and we're done okay let's finally take a look at async await and all you can wait does it makes our code look synchronous without actually being synchronous it's gonna be still be acing but it's gonna be very easy to read and we don't have to add those dot bands and chain things together so it looks very simple so let me just give you a quick example we can create a function called get data from database or something okay I'm just gonna be like that for now function get data all right so here we would create a promise new promise and I'm gonna add an arrow function for now resolved I didn't know I didn't do this the first time but whatever I'm just gonna add a set timeout because this might take some time to get the data back from the database I'm gonna say resolve alright and I'm gonna say hey done we got our data back 3,000 seconds milliseconds good so that's our promise so we saw we would have to do like promise now then then we could get back the data and then we would blah blah blah well with this one it looks actually very simple so what we need to do the first thing is we need to add a sink here on the top to let JavaScript note that this is an async function and the second thing you would use is rather than adding that the the data that takes time to come back he would have to add a weight so I can see what result is gonna be equal to you I'm gonna say promise right but this wouldn't work so I will have to add a weight so when this finally finishes it actually adds it to my results so if I cancel log out result after three seconds I should get back that data so I'm gonna say get data run this let's take a look we get an error what does it say duplicate brand rename is not allowed so we name all right let's take a look all right so resolve resolve I should have named this reject not resolve okay sorry hit save let's run this one two three do we get back done there we go so take a look this way we don't have to add the dance everything looks very nice very simple we just write it the way we would normally would like to see it and yeah that's kind of the basics of it but we're gonna get more into these when we're actually building out real projects because the that's where I think you can actually see how we use these rather than having these weird abstract kind of example so that's it thank you again very much for being here with me again and don't worry if you didn't get all the concepts straight at once these take some time to learn so don't stress out but I kind of wanted to show you all of these to let you know they're there but yeah that's it I'm leaving now so I can finally go rest because it's been rainy and sunny at the same time and it's driving me absolutely crazy so I'll see you next time

Channel: Dev Ed

Views: 320,855

Keywords: javascript tutorial, web development, javascript tutorial for beginners, top 5 javascript, top 5 javascript interview questions, javascript topics, javascript iife, javascript call stack, javascript scope, javascript event loop, javascript async await, async await, javascript callbacks, javascript behind the scenes, javascript advanced tutorial

Id: v0QTqHXiVNw

Length: 28min 18sec (1698 seconds)

Published: Wed Jul 03 2019