JavaScript ES6 for Beginners

Key Takeaways

if you're trying to be up-to-date with always coming new features of JavaScript you came to the right place in this video we are going to go through all of the new things that es6 has provided us with javascript es6 brings new syntax and new as awesome features to make your code more modern and more readable it allows you to write less code and do more our script is a language that evolves really fast and the new features are coming in every year if you learn JavaScript a year ago this syntax can look much different that were to what you're used to but I'm here to help let's dive right in first there are new variable declarations Const and let var is basically not in use anymore because Const and let provide us with more meaning Const is a signal that identifier won't be reassigned while lat is a signal that the variable may be reassigned such a counter in a loop or a reduce WAP in an algorithm so let's see it in action our age is always changing we grow older every year so we'll have a let variable for it let's age is equal to let's say 20 now we can console that lock at age and as you're expected we'll get 20 back now we can set age to age plus 1 since we grew older one year and then console backlog aged one more time and we got exactly what we expected 20 and 21 now we know the plat can be we assign that is important to know and our name isn't changing I know our name is let's say John John and will be John basically for our entire life unless you change that name so if we want to reassign a red to our name and say well that name is equal to let's say Jane and then we try to console that log that name and we run it we get an error assignment to a constant variable so it means the name cannot be changed it is set install cannot be real side okay now you know know about the use of constant let's let's move to arrow functions es6 has introduced arrow functions these functions have several advantages there are much more concise they have implicit returns but they do not rebind the value of this here we will discuss what all of this means so let's write a normal function that will only add two numbers together a and B which are four parameters and it will simply call that log a plus B sorry now if we call add with two and two we will get exactly what you expect for but we can see this is much code for a simple function we will remove this and will write it in an arrow functions way so it is a Const we can call functions as constants so Const add will be equal to and arrow function and this is a syntax of an arrow function so parenthesis and here are all the parameters so parameters here and then this is a function and we can simply console that log a plus B and you should get the same thing back yes we get four but as you can see this doesn't have much more or less cold than what we had before that is because when we only have one statement here one return basically we can we can write this also this way return consulate lock we can do it even more concisely we can remove these braces here and if you remove the braces thing here will automatically be returned it will automatically get console dot back of that as you can see we get for now this is a simple and concise one-line function that is much more clean and much more readable that what we had first so now you know how to write arrow functions and let's have one more real-world example with the arrow functions just to show how good they are so let's say let's say we have an array which has three numbers 1 2 & 3 now we want to convert log every single one of those numbers we can do math on that so we can map every value of that array and now inside that array we can use an arrow functions so as you can see here we will have a number since map of this array will return first one then two and thirdly three so we have a number and then we can return or rather console dot log now since we are on we only have one value here in error functions you can also remove the parentheses since it is only one it is only one value and let's write it shorter let's say and for a number and now as we learn before there is no need to write this this way we can simply write write an arrow function and then if you only have one return statement we can do it in one line now we can see how easy it is to put an arrow function inside that map or something like that and now we can constant water and we get one two three five here in the console okay great now we can move on to template width template literals or template strings this is a much simpler way to write strings in a new es6 syntax so what we had before was also simple enough but when we needed to do variable changes inside of strings it would get messy so let's let me show you that with an functioning example so we'll use an arrow function set syntax we just learned and we'll create a function called breathing that function is going to taking one parameter called name and then you're going to have a string shape Const string that will be equal to hello and then name and then exclamation back so here with plus signs the added name into the string and finally we will console dot log that string now if you call the function reading I'll just remove this so we don't have any console box in our console and if we call our function with the name John and run it we should get hello John and it's nice but you can see if you have more changes here and more variable changes you'll need to take care of this empty spaces and new lines and how to concatenate that and stuff like that we can write it in easy array so we'll have template string and we'll write the same thing we have here but in the template string fashion if you use backticks they heard the backticks you can see here this are normal clicks and they serve backticks you can find them uh next to your next to one on your keyboard so we use backticks for template strings and then we'll write we write everything as we normally would and when we have a variable we just put dollar sign dollar sign and then braces as you can see this just becomes a variable and here we can do any JavaScript project logic so we can just put name here and write everything else as we would we don't need to take care of empty spaces here or how to concatenate things we can just write it normally as we would we can put spaces here and they will they would be in the string also so if we cancel that log template string now we expect the same result and we get back so as you can see interplan strings you write everything as you normally would but when you want to do some logic or some changes you just put it in dollar sign braces and everything here everything here can be JavaScript logic can be used in here so if you write 2+2 in here it should be we should get hello for and not hello 2+2 so that's that's good to know we can do logic here and changes so these are the these are the template strings now we can move on further to default parameters default parameters are ok so first water parameters parameters are this this name here parameters are what you provide to a function so when you call a function we think you provide parameters here a first parameter or argument is a name so John here is parameter yeah we know that if you didn't know so what our default parameters let's say we have a function at an arrow punch it has two parameters and it's simply console that blocks 1 plus 2 so first parameter plus second parameter and if we call it with one to play expect to get 3 right yes we get three back back to the console now what if user doesn't provide us with a second second parameter what will happen we get not enum that is not good that's ruining user experience or yeah so that's bad but we have a way to resolve this let's say now with default parameters we can simply type equal and then the value we want it we want B to be if the user doesn't put any parameters in so we can say B will be equal to zero if B isn't reassigned with here when we are calling the function so you can type 2 2 is the first parameter a and then V is going to be 0 and then if you run it again we get on like 2 because 2 plus 0 is 2 and we do not get not a number okay now if you provide let's say 2 2 a and 2 2 B we don't need to provide any parameters here to add we are simply the function is simply going to be run with default parameters and we get 4 but if they write let's say 3 3 provide both parameters default parameters will be overwritten and we'll have 6 instead so yeah now you know how to use default parameters let's move on to array destructuring already structure the structuring is really useful thing here and it is used every day in real JavaScript applications so let's say we have a simple array with 3 numbers 1 2 & 3 and let's say we want to get values of 1 & 3 we can do that by typing cons first is equal to array 0 & Const let's say 30 is equal to 4ei 2 and we can call some hot wok first and third and we should be fine we should get ok I it looks like we had right here this is also cool see if we had the variable here array and if we assign it as a var here and here ah maybe it would it would break our code because I hit array here and then I changed it here and it is a good it isn't good that we change our code without knowing that we change something this why constants are good thing because I had declared a ray earlier before and now I didn't notice it gave me an error that I cannot read Eclair all right so I'll just remove this so I can continue showing you examples okay now I get one and three as I said because we here declared first from Ray from first part of the Ray but we can see that we needed two more lines to do this we can do it in simpler fashion with a ready structure structure we just type cons then an array sign and then we type first or whatever the name of our first part is going to be and then second and then third is equal to RA and that is the array we want to use it from and now if you consider block second and third we get one two three all in one line otherwise we would need to have three lines now what it's also cool about the ready structuring this is that you do not have to have all barometers if you only need to console that log first and third for example like we did before here you just need to have second you don't need to have second parameter here because then it is just it isn't necessary you can simply remove it and add a white space here so afterwards only the first and the third will be there and we can check that fit running the function again we get one and three and if we type second here also which now doesn't exist and there on the function we get second is not defined so those are some cool things about about a ready structuring now let's move on to object the structuring let's have let's say we have an object called object and it is going to have a let's say it's about a YouTube channel so let's say channel name is equal to JavaScript mastery and let's say the number of views is around 1000 and 500 okay have an object and now if you want to catch this channel name and only have channel name display we cannot just say console a blog channel name because now it is in the object so we do have say object that channel name we can clear the console and run it again and we get JavaScript mastery now if you want to only if we want to call it like this we can do this Const channel name is equal to object at all night now we can call it like this we can also get views and then change this to use and now both views and channel length but again here we can see that we needed all this code just to call the parts of this object with object destructuring it is much easier we can simply do cons and then like with array structuring you put object sign here and names of the variables you are going to extract from that object so we want to extract channel name and views from the object called object sorry misspelled here constant and now we can console the flog both channel name and views and we should get the same thing as we do we can see here we did it all in one line great now we can move on to rest and spread operators the rest operators operator allows us to not implicitly specify how many arguments will our function have earlier we mentioned parameters or arguments so let's have let's say we have a function that is going to add all numbers let's say three for four beginning together we can add all numbers you can console console dot log result of that numbers we can call numbers that reduce so a B and C that reduce and then with an arrow function will return a plus B and then a zero because we start from zero let's now I will explain all of this code so we are cons on console logic here we have an array of a B and C and we are running that's reduced a built in array method this array let's reduce simply that's the same thing for all for all parts of an array so firstly we have a and B and it adds a and B to this to this final result so first result is 0 and a and B are equal to a and B and we add them together and then the result is being added this number afterwards a and B move on to the next parts of your array so it is going to be B and C and it's going to add B plus C and it is going to add it to the final result so if we have if we call add it one two and three we should get 1 plus 2 is 3 3 plus 3 is 6 so let's let's see if we get six hmm okay just as before I had add previously mentioned here so I'm going to remove it and run the function again and as we see we get six that is good but what if we output a fourth parameter or here we have D and E so we miss fifth parameter how are we going to know how much numbers do we need to add maybe user wants to add like five or seven different numbers we cannot know that is where the rest operator comes rescued we can use rest rest syntax three dots it looked a bit different and strange to me at first maybe look strange to you two trees three dots is a syntax for rest and spread operator so three dots and then numbers so it is going to rest all numbers here and that is that is an array of numbers so if now we have only numbers here and we leave this the same run the function again we get 23 so as you can see one simple change putting the rest operator here and then not implicitly saying which of how many parameters we have and do we want to reduce to a single result we can now add as much numbers as we want and it is going to rest them all here and simply output the result we can call that long and see that now we do not have to worry about how many parameters we have and what this block is a spread operator let's say we have an array right here so we have array which we numbers 1 2 & 3 and we want to get every single number oh that's right so array to 0 and then right 1 and then right and we should get one - it's right right when we run it okay ray specified somewhere here also and when we run it we get one two and three as we can see now this is much work only to get parts of the array there has to be a simpler way and spread operator provides us with a simpler way spread operator uses the same syntax three dots as rest operators that's why they're mentioned together a lot rest needs further bridges they have the same syntax but do a bit different things so when we write data dot and then array it simply spreads all the values of that array and if you can select log again we get one two three with much much less worrying about what every consulate log so this are all the are all the new features so this are all the new features es6 has provided us with we can see that here we have constant lat and in all throughout this course we used Const and lat we can see how how strong they are they are and how strong es6 is in use also which we here introduced arrow functions and all throughout the course and all throughout normal days of JavaScript developers they use the features they learned in es6 that have been added in es6 so we used an arrow function here and we used it here and all the features of es6 are in use every day more and more we have template strings here we learned how to write a string so that we don't do not have to worry about empty spaces we just put backticks here and here and then dollar sign and braces so we can call variables there we also learned about default parameters now we do not have to specify parameters when calling the array we can simply add an equal sign when we are writing the function with a default value we learn about array destructuring how can we destructor array easier faster and more concise we can just call Const and then array sign so create array and then inside put the name of all the variables we want to extract value from that array so first is going to be first we can even write empty space so it will skip the second value and then we assign third and we can simply console that lock that object structuring is the same thing we call Const and then write an object sign and in in there we write all the keys we want to extract from that object channel name and views here and rest and spread operators are really great things rest operators enables us to have a function that doesn't have to implicitly say how many parameters it is going to have we can simply rest them all here and no matter how many parameters a function has it will rest them all here and then do what it to do with them spread operator allows us to lay down single values from an array more much more easily so data that and then array is a syntax for spread and rest operators and we can counter that log all the single values that this array has in an easy way if you think this video was helpful and you learned something I would really appreciate that you leave me a like and subscribe because I just started this YouTube channel and I'm trying to get it to grow so thank you for watching and see you in the next video [Music]