ES6 Javascript Tutorial For Beginners | ES6 Crash Course

hello there are my lovely people on the Internet's how you guys doin' in this video we're gonna cover a es6 I know a lot of you guys were super excited for this one so let's get going and what I'm actually gonna do is we're gonna do the old way of writing JavaScript and then we're gonna take that and we're gonna modify it and we're gonna do it in es6 just so you can see the differences of how the language evolved and how it actually got simpler in a lot of ways so let's get going open up your BS code and let's do the es6 wah-bah okay so the first thing we're gonna cover is variables now the old way we used to write variables is like this we write war and then when you give it a name let's say we have a a names list and let's say this is an array so we have let's go ahead and John and I don't know let's go Mike okay now we can create different kind of variables and the problems we used to have with this - just to show you one let's do a counter or something okay we can set it to ten for example however we can also modify it by just writing counter is equal to five or something that's gonna work just fine so if I console.log counter now everything is still gonna work here as you can see down here I get five so I just opened up this in node man just so we can see the results so we can easily modify it now the problems we also used to have with this is that we could really declare this variable so rather than just changing the value we could read eclair it like this and as you can see it still works but this could give us a lot of trouble because you never really want to read the clear a variable especially if you do somewhere in a function or whatever and then it just resets the whole entire variable so this is a very big no-no the JavaScript really messed up so okay so this is like one of the first problems we have with this now let's talk a bit about scoping scoping basically means where this variable is available so with var all you have is the global variable which is if I just write it here counter is 5 this is the global variable and with this I have access everywhere in my JavaScript however if we create a function called say name or something like that okay I can use this counter here and it will work just fine however if I create a variable here let's say name is equal to e D and then we just do a console log and we're gonna say name okay I just want to console log my name so here if I can't if I just call this function and then say same name alright this works we have Edie however this name variable is not available outside this function so basically what we had is everything that's outside of functions so this counter is available in here we can use the counter in function however any func any variable that's inside a function we cannot use it outside so if I console.log name here this is not gonna be available and as you can see we have a crash and it's gonna say name is not defined okay so this is what we basically had an old JavaScript alright let's take a look at the new JavaScript so what we have here is let and Const these are the two new ways we can write variables now let's start with Const it to do list okay and let's say we have milk and cow why would you buy a cow anyway it's okay let's just leave these two now what we had here with cons the differences that we cannot read Eclair this what we have in here we cannot modify it so if I want to say to do list is equal to just say milk or something if we hit save we're gonna get a crash let me just remove this so I don't call it so we can see everything more clearly as you can see we still have a crash that's gonna say assignment constant variable so this is gonna give us an error because with the cost you cannot reassign the data in it so and what we also have is the let and let's just do another counter in here let me just remove this one so we don't have any issues and let's say we have ten here again and if I change the counter here to five or something like that this is gonna work just fine it's not gonna give us error so the general rule of thumb is I'll always use Const and whenever you want to reassign a value of a variable then you can change it to let but generally you're gonna use Const way more than let now another difference that applies to both let and cons is that and we also have this thing this applies to both that we cannot declare the whole variable like this this is gonna give us an error and it's just gonna prevent us from stupid stupid things identify eric cantor has already been declared okay so it's gonna be like yo i know you you're doing stupid things sometime but let me just help you out here okay so doesn't let us do that which is really good okay now you remember how we said that we have a global scope here and a function scope with let it's actually a bit better because it's still the same we have global and and functional scoping however we also have block scoping which basically means if we have these brackets the variable is only gonna be available in these brackets now what are some examples of that well what if we just do a for loop so if we use a for loop and again say let i equals 0 and then i can say let's just make a list so we can loop through something I'm gonna create a Const list and I can just say 1 2 3 4 5 ok and if I see that the list dot length that high is smaller than the list dot length then I'm gonna increment this I okay and here we can just console.log I okay we run this so it's just gonna loop through everything just like that now the wonderful thing about this is that we don't really want to use this let anywhere outside here right we just want to use it to just loop over something okay so if a console.log I outside here it's gonna give us an error and it's because let and cost our block scope so everywhere where you have these curly braces then it's only gonna be available in there and this is so good because when you had var in here so let's do VAR I and then we increment it well look at that if we console.log outside here it kind of bled out of this and now it's available in the global scope and this can give us a lot of trouble because maybe you want to do another for loop and if you use I again well that's just gonna override this so it's gonna cause a lot of issues okay so this is gonna be bracket scoped and as you can see the kids understand error and yeah that's about it it's really nice I highly recommend you using these because it's gonna make you just write better code and it's gonna catch a lot of errors especially if you're just beginning with JavaScript alright let's talk about concatenation so the old way we used to do things is let's just say we have a name variable with Edie and let's see I just want to console.log a string and then I want to attach the variable a name to it so I would do something like this hello my name is and then we would leave a space and we have a plus and then we just add the variable name and that's gonna console.log everything for us just right okay so you just add quotes to whatever you want the string and then to concatenate a variable you just you just add the plus and the variable name we can just create a constant let's say add and we can set this to actually name we're gonna say this to add and what we can do is we can just console.log and we can use backticks so the thing next year one and we can just write whatever we want we can say hello my name is and to add the variable in here we don't have to do the plus and the other things anymore we can just do the dollar sign and we can do just curly braces and here we can just say name it's safe and as you can see we have the same result however here we can add it's it's not gonna break we can add quotation marks hello and everything is just gonna work just the way you expect it and again if you want to continue this so let's just say we have an age of 25 you can easily just continue it everything is done basically inside these these backticks it's hard to remember backticks oh and my age is just two dollar sign and curly braces age and everything is it's magical so that's string concatenation with backticks it's short one I kind of want to show you is called object literals so let's create a function called look and what we have here is just say show book okay and let's add a title and an author okay and what I kind of want to do here is I just kind of want to return an object okay and what I want to do is I want to have a title of title okay so whatever I insert it in here and I also want to have a author of author author of utter okay and now when I call a let's do get book get book and when I call this let's create the another let's do variable because this is the old way we're doing here let's just create a book here and we're gonna call get book and we are gonna add a title of Harry Potter and we're gonna add the author of JK okay and when we take a look here call so log book okay we're just gonna get an object with the things that we called in okay super simple the only difference that we have here let me copy and paste it in the es6 way is if you have the title the same as the title in the parameter you can just get rid of this and keep it short like so okay you don't need to repeat yourself and you can just do title and author it's same and that's basically gonna work the same way so the properties if they're the same you can get rid of it and just keep it simple like that alrighty so the next one is gonna be object deconstruction Wow sounds so cool what is it that well we can have a object we can say user it's gonna be equal to again I'm gonna use this example 10,000 times we have ads and we have age of 25 okay let's just leave it at these two now how do I get the user dot name well let's say I want to use this multiple times so I kind of want to store it in a variable so we can say var and I say my name is gonna be equal to user dot name okay and now we have access to that user dot name hit save and it's gonna give us an error because I wrote my name and this one is with uppercase had saved and as you can see we have add so this is how we would deconstruction and Deconstructor a a property from an object now in the new ESX it's way simpler so we can have a Const list and we can set this equal to and we have an object I'm gonna say name it's gonna be a shopping list and let's just say we have items and we just have an array here of the different items milk can add cow again oh god okay so this is what we used to just a normal object like up here now how do we these the constructor and get these different values from here well we can do something like this we can just take on and we can do curly braces and we can just add the different things we want from this list so we can say I want the name and I want the items and what do we set this equal to well we're gonna set it equal to you from the place we basically want to extract these things so I'm going to get the name items from the list we just add the list again after the equal you just add the object and here you just add the different things you wanna extract and now if we console.log name and items as you can see we can get both of them separately so now I can just easily use name and items wherever I want in my code so that's object big construction alright let's cover arrow functions because this is I know it's a big thing and a lot of people confuse it and they they're not sure what's different about it so the old way we could write functions is like so we can write this function let's just say same name and we can just say console.log hello I am Edie and another way we can do it is we could write a variable and we can say we can just create a variable let's say say age and we can set this equal to a function like so and we can say console.log my age is well I don't want to tell you okay and let's see let's console.log these let's call them so we're gonna invoke both of these functions say age and they are gonna work just fine okay now the new way of writing it would be like so we can write Const and we can say say location and we can set this equal to and what we're gonna do is just take everything we have up there so we have a function like so console.log my location is unknown and what we can do is we can just get rid of the word function here we can just leave these parameters the normal parentheses and we can add an equal sign and a bigger than science so we make this arrow basically ohara functions who had a thought okay so this is how we can create an arrow function if we save this and we call this say location then it's gonna work the same way my location is unknown okay another thing we can do is let's say we have a parameter in here so let's say we have a I don't know Paris or something in here okay a Paris let's do location and then we're gonna add Paris down here okay so let's do Paris and then we can change this as to a backtick and we can do my location is and we can just do the other side curly braces location okay so we are pretty much giving Paris this is gonna go in here and it's gonna be inserted in here so if we had saved my location his Paris and as you can see when you only have one parameter and here you can also get rid of the parentheses like so very nice now if you have two in here then you will need the parentheses you cannot get rid of it only if you have one and even if you have none you will still need the parentheses so that applies only if you have one to remove them okay now another thing that you can do is you can get rid of these curly braces if you if you're only returning one single thing okay so we can get rid of this and we can use set it equal like so and this is only gonna work if I only want to return one single thing so if we hit save as you can see this works just fine now if you have multiple lines of code in here this is not one this is not gonna work again you will need to have it's only gonna work if you have one single thing that's gonna return and what this also is gonna do is it's gonna implicitly return this line of code so you can imagine it basically gives you return a console.log my location is whatever okay so that's the difference there another difference between the old way and the new way is the way this one assigns the keyword this so let's also take a look at that we're gonna delete everything in here and let's just create an object we're gonna say variable user it's gonna be equal to I'm gonna give myself a name edie and we're gonna give an age of 25 and let's just say say name okay we're gonna create a same name and I'm gonna add colon and we're gonna call a function in here and if I write console log my name is and we can do plus and we can say this got name if I call user dot say name this is gonna give me my name is Edie now what is this dot name again all you have to do is wherever you call the function you just take a look at what's on the left side of the dot which is user and then kind of user this this keyword basically means user okay so wherever you call the function take a look what's on your left hey it's user okay well this that means user so we go we located this so basically this means user dot name okay you can basically replace this with user dot name okay so that's how it used to work now the problem is here I'm gonna give you an example is what if inside this function I want to call it call another function so let's do any other functions let's do a variable full name in here and this is just a normal function and what I want to do is I want to console.log my name is I'm gonna add a plus and we're gonna say name plus and my age is plus age like so hit save and I'm also gonna call this function right inside the same name function so I'm gonna call full name and let's also add the dis keyword because it's important so we refer to this object this age and as you can see here now we're gonna get my name is undefined and my age is undefined that's because the context here is not the object anymore so we're not calling user dot full name right because we have it inside the same name function so it's not gonna work and what we used to do to get around this problem is in the same name function we would actually save our that is equal to this so now that is gonna be the new context so here we can do that dot name and that the age and now it works as you can see because here again it loses the context now I don't know about you but this is just overly complicated and I feel like nobody should do this and what we have here okay so let's so screw this we don't want to we don't want to do these things so let's get rid of this just so I don't have a ton of console logs as we can superbly simplify everything here so we can say Const user it's gonna be equal to we can just say name and we're gonna say adds and we're gonna say age again let's do 25 and let's do say name and we can just set a and just set a normal function for now and I'm gonna console.log as do backticks my name is this dot name so this is gonna work just fine however in here let's say I want to do another function but I want to maintain like the dis dot name and this dot age I still want to refer to the user okay because again when you stack it inside the functions it's not gonna be user anymore it's not gonna reference to that anymore so what arrow functions basically do they are smart enough to let you know that hey I know what you're referring to I know you want the user reference and not the window that it's gonna jump to so we can do full name again here and now if I just set this to an arrow function like so and I just console.log my name is this dot name and my age is this dot age hit save and when we call this user dot same name hit save and let's also call this function in here so we're gonna save full name as you can see now everything is gonna work just fine just how you expect it so basically we can get rid of that variable that is equal to this kind of nonsense like that so remember a practical example I can give you it's probably when you do a let's say you have a element on your page so you have a button and then hole then you add an event event listener and then you add a click and then when you run a function in here okay so in this scenario this would basically mean the button so again you take a look what where your function is run and then you just take a look at what's on your left side on the dot and its button so this would be button however if we another function in here let's do variable they fade or something to my page and we can run another function here and maybe I want to get rid of the button or something in here if I say like this dot style dot display is equal to none or something like that this is not gonna work because this is not gonna reference to the button anymore okay so what you would do here is you would use an arrow function in here and then you would still have the button reference up here okay and again normally if you would have it like this you would have to say variable that is equal to this and then you can add these does that and here okay but everything is way simpler now you just add an arrow function and it's gonna solve all your problems okay so those are arrow functions okay let's take a look at default parameters so when some what is default parameters well let me show you so we would have something like a function and maybe I want to multiply two numbers I'm gonna call multiply in here and I'm gonna multiply x and y okay so again I don't know these values but when we call the function we're gonna add them to it so basically what you want to do is I'm gonna console.log x times y where is my x why I wrote x there did you see I'm going full-on stupid okay if I call multiply here and I'm gonna add 5 and 10 well it's kind of just gone so like these two numbers hit save we get 50 look at that super simple okay now the problem is here if I don't add anything in here like that then it's gonna give me not any number because we didn't add anything to these parameters so we kind of want to make this bug-free so we don't encounter these issues so what we can do actually is we can create declare a variable called a and we can set this to X or and we can set a default value that we want to use just in case people don't add something in this parameter so I can do one and VAR b is equal to y and again this is the or symbol that we're using in here and I missed one up here so if this is not declared then it's just gonna jump to one that's basically what's happening we can add one here so rather than doing console.log x and y we can do console.log a times B so again if we leave this empty then it's just gonna jump to one that's all it's doing so when we hit save now we get one so we're not encountering any errors and this still works the same so if we had 10 and 20 it's gonna give us 200 okay so it's not gonna error out I don't know about you again I'm super stupid and this seems overly complicated for something so simple so what es6 is doing for us is this we can do a let's do a modern way of writing it we're gonna do Const add and we're gonna set this equal to we're just gonna do an arrow function in here and we're gonna console.log let's do C plus C okay and in here we can do again C and D so when we call add let's add 20 and 50 okay we get 70 so that works if we add nothing it's gonna error out again but the nice thing is we don't have to do all this banana banana banana Nana jumbo we can just go up here and set the default parameter by writing C equals to 1 and D equals to 1 and just like that when we hit save everything just works nicely so this is the new way we can declare a default parameter alright let's also take a look at some new array functions that are available for us in es6 one of them is let's just create an array here I'm gonna use the shopping list again hopping list and we're gonna set this equal to milk we're gonna add the cow again let's do eggs and bananas and chocolate choco okay there we go so we have a list in here and one of the first ones that we can use is something called for each which kind of acts like a loop so we can just call shopping list dot and we can see for each function on top of it okay like this and we can add the parentheses and what we have here is basically another function that we can call however since we learned the new arrow function way we can just get rid of this and we can just add we can just add in normal parenthesis and use it like this okay and what we have available here is each individual item and this array so I'm gonna add item okay you can name this whatever you want but this is his single product actually that's good product if we name this product from this shopping list so if I cancel log product then it's gonna basically loop over each of these properties and remember since we only have one parameter here we can get rid of the parentheses as well so as you can see it's just gonna loop over each of the items in the array okay and now if we wanna want we can also add a plus in here and say ice or something as you can see after each item in here it's just gonna take it and add be nice to it milk nice cow nice it's nice okay now another thing that we have access here is if we take the parentheses back we can add in comma and index so we can also get the different numbers of these elements okay so let's say let's add backticks and I'm gonna say two index and X and the product is product it's safe as you can see we get a return of the different positions of each item inside this array nice alright so this is for each another thing we have is something called map let's get rid of this and what map allows us to do is we can get this array and we can kind of make a copy of it and modify it okay so what that's gonna do is we can make a new list let's say Const new list and we can set this equal to shopping list so basically the D list or array that we want to modify and we can add that map to this and again we are gonna be able to access each individual item in here like so item plus new or something it's safe and if we console.log new list in here we're gonna get undefined because we need to return this so what map is basically gonna do let's return item plus new as you can see it basically makes a copy of the right above and we declare a new array and we're gonna insert this copy but we can modify it however we want it doesn't work with for each for each basically just loops through everything but it doesn't actually return anything to us map on the other hand is used to actually take the right above and just make a copy of it and modify it however we want and again remember that if we just have one short line of code we can actually get rid of the brackets here and we can get rid of the return key as well like so and hit save and as you can see everything still works just fine because if we don't have the brackets it implicitly returns this for us okay super another thing we have is filter and what filter is gonna do is basically what it says it's gonna take an array and we can filter out individual items that we want so maybe I want to search and filter out and only get one item from this shopping list so maybe I just want eggs okay so I'm gonna say Const and I'm gonna say filter list and here I just want the eggs so we can say shopping list well what was that shopping list dot filter and here we have again access to the item so to the each individual item in this array and here what I can say is I can return and all I want is the item that is equal to eggs hit save and it might console.log filter list let's get rid of these console logs it's safe and now I just get back in the ray with eggs again we can modify this and just make it get rid of the curly braces like so and look at that we just have everything we just have eggs and what I can also do is I can return everything that is not eggs just by adding a knot symbol here an exclamation point and that's just gonna return me the list everything that doesn't involve eggs all right the next topic is going to be constructor functions and classes so the old way we used to do is constructor functions and now we are going to glasses so what is a constructor I cannot even say it like a constructor function basically it's a blueprints that it's it's a function that basically lets us create an object so when we call that function it creates us an object okay so we can have something like a person so we can say function we have a person and normally a constructor function is used with a upper case when you start it's upper case just to signify that hey we're actually gonna use this to create an object and what we can have in this parameter is basically the different kind of values that we want to have in this object so maybe I want to have a name an age and a hair color okay and what we will do here is we would call something like this dot name is equal to this parameter name now this dot name means nothing right now and I'm gonna show you when this is actually gonna get its value so this basically means nothing now it's the window object okay we can say age dot this dot age is equal to H and this thought hair color is equal to hair color okay perfect now what we can do is we can create a new person we can say variable add is equal to new person and one we call this new keyword it actually creates us an object so now this is gonna refer the DES keyword is gonna refer to add and here we can just add the different parameters that we want to use so a head is the name the age is gonna be 25 I'm getting old and the hair color is not nice okay hit save and when we console.log add now we are gonna get the new object that we just created cool now how can we also add different functionality to this well we could do it in here but actually the correct way of doing things without getting too much in depth is by getting the person and adding onto the prototype a specific function same name is gonna be equal to a function that's gonna say console.log my name is I'm just gonna add the old way this dot name and right now if we go down here we can just say add dot say name and my name is Ed as you can see this works just fine so we would have to add the different the different functions on the prototype of this person now let's take a look at something else maybe I want to create another constructor functions I'm going to delete everything in here and I want to have so we have a person here but let's say I want to create a constructor function that defines specifically me okay so the person usually has name age and hair color but maybe if we create a function add this is only gonna refer to a lot of things that I specifically have okay not just a normal person so maybe what I'm doing what things I like and and things like that so let's say occupation occupation can be one thing things I like and hobbies okay so this kind of only involves me however besides these different things so we would call this not occupation is equals to occupation and this thought hobbies equals hobbies let's get rid of this like because it makes no sense okay but besides these things what if I kind of want to also inherit the functionality of the person because I'm a person I don't know about you but I think I'm a person hopefully and I kind of want to have a name age and hair color as well besides these things so what you would have to do is basically add the different parameters in here so we have occupation hobbies you would just copy and paste from up here down here like so we can get the context of this my writing person person dot call and we can just bind the keyword this in this context and we can just add name age and hair color name age and hair color and now we can call all these parameters and this is gonna give us an error because I don't have a comma here we can just kind of get the functionality from up here down here hit save and now if I call add so I'm gonna create a new object cons you a let's just say new person it's gonna be me so I'm gonna call a new add and we can just add the occupation dev hobbies dancing it's not true but every one is gonna be the name 25 I'm getting old hair color not nice and now when we call so log the person you're gonna see that we got all of the functionality from up here however one thing that we didn't get is this we didn't get the function we only only got these different properties so how can we get the functions in here now the only thing that we didn't have so far is the functionality up here so what if I want to use all the functionality of the person in my add function here so I want to attach even the functionality to this well what we needed to do basically I'm moving this a bit smaller we would go down here so right above this and what we would have to do is say e d dot prototype is gonna be equal to object dot create and we're gonna say person dot prototype so basically if we're gonna just get the prototype of the person from up here and one with hit save now on the person we can actually call say name this one here hit save and let's see if we get the con so long as you can see here so what it's gonna do is it's gonna search for say name on on the prototype and it's not gonna find it so it's gonna search for the one above and the person okay so this is kind of super complicated and yeah it's a bit messy in my opinion so let's take a look at the es6 way of doing all of these different things so rather than creating a constructor function like so I have a hard time saying that where it were some reason we can just create a class and then we can give it the name we want so we can have a shopping list thanks oh and we can do curly braces like so and in here we can actually call something called constructor okay constructor constructor function so this would be our constructor function and then here we can kind of just do the same things we can do the names and we can do the names let's do items and we can do the number of items and yeah that's it let's just have two and we can call this dot items it's gonna be equal to items and we can also call this dot number it's gonna be equal to your number so the number of items we have okay and that's that's all we need if we want to add a function all we have to do is go outside the constructor function and just say let's just do one say list and we just say say list we can do parentheses and curly braces and we can just say console.log this thought items like so super so let's create an object from this so we can say Const and we're gonna say my list it's gonna be equal to you knew shopping list and then here let's just add in the of different items milk choco chocolate redbull for a short and the number of items we have is tree ok console.log my list and everything should work just fine as you can see we have the shopping list with the different items and the number ok let's see if this works if we call my list dot and we can just call say list so everything should work just fine ok here we go we have milk choco and Red Bull ok perfect so let's take a look of creating another class and let's inherit all the functionality from the shopping list so maybe I have one item that I want to describe more so we can do a class of item or product should be a better name and here again we have a constructor and maybe we can say the amount and the cost ok so this dot amount is gonna be equal to amount and the stock cost is going to be equal to cost ok but we also want to inherit everything from up here so the items and the number for example so how do we get that down here well what we can do is just call the keyword extends and then we just give it the name we want to extend from so the shopping list just like that so we extend the shopping list so now we have the constructor and we just add everything from up here again the way we used to do it up here and the more complex kind of way so we just add them everything here at a comma good and now to bind it to this product like we did up here with the person called this and we add these things it's kind of bit complicated but what we can do here is just call the super keyword and just add items and number here ok and that's all we need and now if we call a Const product is going to be equal to new product like so we can just add the items the number amount and cost and here we can add the red ball the chocolate and candy and then we can also do the number it's going to be three we can do the amount I'll add the mountain this is the number okay so the amount of this specific product let's say two and the cost is gonna be let's see 20 dollars or something like that okay then we can console.log products and everything is gonna work just fine as you can see down here good and what we can also do is we can say product dot say list and that's just gonna work just fine as you can see here we can inherit everything just by using the keyword extends shopping list and adding this super and just adding the parameters that you're extending from okay so I think classes is way better everything makes it super simple but I want to let you know that when you're writing this class product what it's actually doing behind the scenes it's actually just gonna create you a constructor function so so yeah it's basically the same thing it's just written in a nicer way all right the last important thing I want to cover today is promises now before this we used to do callbacks so we would use callbacks when we don't necessarily want to call a function right away okay we want to wait for something to happen now a good example of this that everybody uses is maybe a click event right a click event takes a function right and it only executes when you click on something and then it runs the function same thing can happen when we let's say we get a user from a database we don't necessarily get that information all of a sudden so we use a callback to run when we get back the actual information so let me show you quickly like how how this would work so we can have a function let's say we can get data okay let's say we get data from a database so this would be the actual data and the second argument would be the callback so this would only run when we actually get back the information now to do a fake simulation of this we can use something called set timeout and this is gonna run after a certain amount of seconds so I'm gonna just do an arrow function here and what I can do is I can console.log let's say reading data reading from the database like so and here I can actually add a time so if I add a comma let's say two seconds okay and I and in here I can call this callback function from the parameter and I can get back some data like so so I can say data is gonna be data so down here what we can do is we can actually get this get data function we can call it like so we can add the data that's coming back from the database let's say we get back I don't know a number five just to keep it simple and here the callback is gonna be the function that's gonna execute after the data is back so in this function here we can actually access the data that's coming back okay so I can add data here again and if I console.log data this is gonna return the moment when this two seconds expire so when we had saved one two and look at that we get back the data from the database so the way this would work usually is you would add the callback and then you call the callback here and here is where you actually have the data available for you okay and this is asynchronous so if I just add a console.log start and console.log finish down here console.log finish you're gonna see that these two codes are gonna run first and then this is gonna run hit save start finish as you can see and after two seconds we get this back so this is not gonna block so it's not gonna say start and then we have to wait two seconds for this to come up and then we get the data and then the finish ones so that's not how it works because this is an asynchronous operation okay okay let's take a look on how we can take this and make it into es6 i'm gonna delete the code up here just so we have more space and down here what we can do is can create this new promise so I'm gonna call Const prom like this so short for promise and I got a promise is just an operand operation that's gonna finish in the future okay so here I can call new promise prom Pro promise like so and this one takes two arguments here we can add a resolve and a reject like so and we can just create a arrow function here and everything that we do in here is asynchronous okay async code get perfect so now we can just simulate the thing that we did up there so we can say set timeout it's basically the same thing we did I'm just gonna call an empty arrow function here and I'm gonna add two seconds like so and what we can do here is we can either resolve or reject with the actual data so if I call resolve here and I'll pass a data like the data we had up there I had five or let's just say 200 so I'm getting back the data 200 and that's all I have to do here okay so down here I can call prom this promise and the way we can access it we don't need any callback functions or anything like that we can just say dot then and here I have access to that data like so we can do console log result hit save we're going to wait one and two seconds we're gonna get an error so let's let's make sure what's wrong here we're gonna say result is not defined okay because I used result and not data so this is act the actual thing that comes back from all of this thing hit save let's see one two and there we go we get back the actual data so 200 and again to be more realistic you're probably gonna have an object of things here like user had passwords and this should be encrypted this so it should look something like that hit save and one two and look at that we get back the object so this is way way simpler to do it's way cleaner and you know in the the previous versions when you have with the callbacks you could you would need sometimes to stack multiple callbacks and it would just look messy but here we can do something like dot then again and then you can do multiple operations okay so that's then and if you want to use reject let me show you that as well that's in case you have an error you can do reject like so and we can throw a new error like by writing new error and we can just leave a message something went wrong thanks so and rather than doing dot then I mean we can do that then and at the end we can attach a dot catch so if this dot then is not gonna run then it's automatically gonna go to this catch and here we can access the error by writing error or error or whatever we want again everything we define in here and in here we can use whatever we want okay we can give it any name we want so I'm just gonna say error here I'm gonna console.log this error hit save and as you can see here now after two seconds it's gonna just show me the error something went wrong as you can see so there we go those are promises I'm not gonna go super super in-depth in in them we're gonna cover it more when we are working with nodejs in the future and that databases and things like that it's gonna come super super in handy right there so hopefully you enjoy this one yeah i'm sorry if i blabbered around a bit sometimes but this took a bit longer than I expected it to take but anyways thank you again so much so much for watching and for the sport I wholeheartedly appreciate and we reach 3000 subs in like two weeks we can we got like a thousand sunsets absolutely insane so thank you again so so much for the support take care [Music]

Channel: Dev Ed

Views: 226,558

Keywords: javascript course, javascript tutorial for beginners, javascript es6, es6 javascript, es6, arrow functions, es6 course, es6 crash course, es6 classes, const let, const let var javascript, es6 promises, es6 array methods, foreach javascript, web development, javascript classes es6, dev ed, vanilla javascript, javascript project

Id: WZQc7RUAg18

Length: 56min 7sec (3367 seconds)

Published: Sat Mar 16 2019