ES6 JavaScript Tutorial for Beginners - Getting Started

hi everyone you probably already noticed that JavaScript is rather important as a web development language nowadays that's why I decided to make the first module of my JavaScript bootcamp as well as my es6 bootcamp available for free on this channel that should give you the very basics or changes with es6 you will need to well work with javascript if you then want to dive into javascript deeper feel free to take the full courses I've been very happy to welcome you there but if you don't want you that's fine these free videos or this free video here should get you started and give you the very basics you need what is es5 or es6 well if you're watching this course you probably do note it but just to give you a quick refresher es stands for ACMA script which kind of is the language in the end though of course we say JavaScript all the time but theoretically ACMA script is T language and JavaScript was more like a dialect which follows ACMA script but of course javascript is the most popular language using ACMA script and therefore you can kind of think of es6 just being the next chava script version but what are is five years six to begin with well is five is the version which currently runs in a browser and es6 is the next-gen version so what new features and so on yes five has just mentioned the support for all browsers but for es6 you will need some poly Falls or transpilers which basically takes your es6 code and rewrites it in a TS v styled way which kind of sounds strange but it allows you to use es6 features today and kind of does what you would have to do in the past to do the same in years five it does that for you and so you are able to run es6 code today even though browsers don't fully support it yet this course of course will focus on es6 throughout the course this is what you will see most of the time jsbin calm it's a great website which allows you to if you just check javascript and console up here write JavaScript code on the left and then if you lock something to the console and hit run you'll see it show up on the right and I will use this format throughout the course since it allows me to really focus on individual topics and show how they work and quickly play around with them without having to mess around with HTML and changing something in on the HTML page which you then would not see and so on so really I will get them come back to using HTML and actually showing something on the page but most of the time I will just stick javascript in the console now and if you rightfully say well my application won't just lock things to the console well it isn't really that hard a step from logging into the console to altering something in your HTML document and indeed in the final project of this course people of course do that so this is the format I will use most of the time and it should allow me to really give you a lot of tiny examples which should allow you to quickly understand all the new things being added with es6 Hey in the last lecture you saw the format I'll use throughout this course so I will use J has been a webpage to show all these six features and how it works and I explain why I do it like this in the last video however if you build your own applications and you want to use es6 you'll probably do that on your local machine right so you need to know how to set this up how to set up a development environment which allows you to use es6 on your local machine because remember browsers don't support all the es6 features right now so therefore you need a way to run it on your machine on bless and code or work with es6 code in order to do this you basically need three things the first thing is a package or a tool which compiles your es6 code to es5 now you might say how does that work well basically it find some hacks some more difficult ways to achieve certain es6 behaviors with es5 code and keep in mind that is only a temporary solution until es6 is natively supported but all browsers that's the first thing a compiler the second thing is a module loader you will see us later on in the modules module or sections course that if you're working with modules so you have a lot of JavaScript files you want to load dynamically you need a package to do that because this behavior also isn't supported natively by browsers yet so you need a module loader to and lastly you need a little server serving your application because even though it is static since you're working with modules those modules need to be served dynamically and therefore a little lightweight server is needed for it while development - now you can't install all these things with multiple options for example as a compiler you might use Babel as a much loader you might ever use webpack kind of or system chess as a pure module loader and for servers there are tons of options attached to this video you will find a document leading to some example setups or boilerplates on github which you can simply clone to get started and where you can dive into to learn more about how they are set up and which compiler and so on they use for example here I have this vanilla es6 JSP m package open which always uses che SPM javascript package manager to load all those packages needed to work with the es6 and you can simply follow the instructions on this page to set up a local es6 development environment quickly of course you will find a link to that repository in the video or in the document attached to this video hi an important thing to realize is you're learning es6 but it's not natively supported by all browsers or all the features are not natively supported by all browsers yet so that means you can't use es6 in browsers right now there are some features you might be able to use but for most of them you will need some kind of compiler compiling your es6 code to es5 and you will see this in a later lecture where i talk about a local set up on your machine to use es6 today nonetheless if you want to find out which browser supports which feature and so on you should visit this get up page here to which you will find a link in the attached document in a document attached to this video and there you will see all the important new features on the left here and then on the right you can see which browser versions alike Internet Explorer Firefox Chrome and so on and which compiler possible compiler is compiling your code to es5 support which feature so for example if you're interested in four off loops you would see that the most recent versions of chrome support is for example and that's an important chart you should have a look at regularly if you're working with your six applications since it will tell you if you need a compiler or if you for example only target the latest versions of Chrome if you don't need a compiler because all the features you need are already supported which might be possible too so definitely check out this compatibility chart here to find out which features you can use natively today and for which features you will need a compiler in order to use them hi welcome to you the first content module in this course on es6 in this module I want to have a look at the most important syntax changes in addition cs6 broad and there are quite a lot of them so let's dive right into it some insight J has been here to type my typescript code here on the left and then see it see the output in the console right here on the right and the thing I want to start with is lat and Const so lats and cons are new keywords added by es6 and they allow us to change the way we work with variables or like the name constant eyes use constants so before I come to the question why we need that let me first show you how it works imagine we have the variable name and the past would have said name equals max for example and this will still work if I print this name to the console will of course see max soul are still exists with Year six and of course that will always be the case since we need it for backward compatibility however es6 also offers a different way to create a variable we can use lat now with lat what do you think will happen if I hit run we still see max so it seems like it's doing the exact same thing just a different syntax right so why would we use lat instead of war well if you maybe remember my Chaves trip boot camp course or are a general familiar with JavaScript you'll probably know that we have the global scope and the function scope or local scope but JavaScript doesn't really have any block scoping and block scoping of course refers to the fact that a variable is contained between quale braces like in an if statement for example so in the past if we had something like this if true and then between the curly braces so in the body of the safe statement we would have a variable named named name which would be max and if we hit run this would work now with let this variable is now contained inside this block so what do you think will happen if I hit run now I'm referring to the name of my window object and it becomes much clearer if I use another name like age for example so if I now print out age will even get an error that age is not defined so let allows us to use blocks goping which means contain the variable in the body like here in the truth in the if statement where it is defined so if I define it outside of their tool let's say I also have age of 30 what do you think will now happen if I hit run well now I see 40 because again depart inside the if statement inside this block that's why it's called block scoping isn't touched it isn't accessible outside of this statement therefore if I lock the age inside of this if statement I'll of course see 27 and 30 it's all first print 27 inside your statement and then 3 outside of it and that is why lat is really useful and powerful it allows us to finally use block scoping in JavaScript - which of course is an important addition clearing many of the confusions that mind for reason if you used variables in let's say for loops and you were able to access them from outside or even the value might have changed inside of that due to some external value being said or anything like that with lat you can make sure that the variable you use inside of a block stays inside of that block and isn't touched from outside and it's next and accessible outside of it so that is why lat is really powerful now why wasn't largest changed to work like this well of course for backward compatibility reasons if you would change war to behave like this you would pretty sure render a lot of code useless because vara was used in a different way therefore it's important to have this new keyword lat so that was a lot of talking about lap but it's really core to understand how let differs from war that we are able to block skill with it and that it otherwise behaves like var it's a variable we may change it we may reassign each year to 29 and defiant now run we see 29 so we can use it like a variable the important difference is to block scope now with Const it's a different thing I'll get rid of my lat code here and I'll create a constant age 27 what do you think will happen if I now it run it's still 27 so that's not too surprising but what happens if I now set H to be 29 what do you think we'll see in a console affair now hit run well we'll get an error that we're trying to assign to a constant variable so this really is no variable in this case it's a constant it may not be changed therefore its comment you write it all uppercase to clearly show that this is a constant and if we ever try to change it we will get an error because that is not possible a constant as you find once and then it should keep its value now what do you think will happen if I create an array ages here for example with 27 29 and 31 and of course I can print HS here if I hit run well we see the array now what do you think happens if I push a new value on to that array and then print it again like this what do you think we'll see in a console we'll get an error well we see the original array and then we print a new area with 25 added to it now that's certainly strange didn't I say that a constant may not be changed later on but it seems like we did change it right not really remember that arrays as well as objects are reference types this means what does this constant actually hold it doesn't hold those values it does hold a pointer to those values a pointer to this array the array is placed somewhere in memory and the very little constant here only holds a pointer to that space in memory therefore we don't change the constant we're not changing the pointer we're not pointing to a new check we're only changing the values to which the pointer points but that is totally valid we're not we're not hurting our constant here because again the constant value D pointer isn't changed only the value in the background that's why we are able to manipulate this array and for the same reason we will also be able to change an object like let's say we have our constant object which might look like this and here we have our H set to 27 now of course I print object here and thereafter I'll also print it down here thereafter I'll go to my object and change the H to be 30 if I now hit run we also see that the object was changed for the very same reason as the array it's a reference type the pointer isn't changed only the value I'm really stressing this because this is important to understand how constants work here and why you are able to change the constant or to be precise to change the value of that constant if you're using with reference types because you're not really changing the value only the value to which the pointer is pointing we also have important implications regarding poisoning remember hoisting referred to the fact that I could set something like this I could set my H to 27 and then I could print my age and I could define it thereafter like this or declare it like this if I had run this would work now let's see if it all works if I use lat what do you think will happen when it run well since I was asking like this you probably expected this result we're getting an error so the hoisting of the variables with flat or Const doesn't work the way it works with Laura we have to declare our variable before actually initializing it and this certainly is a good behavior because there really wasn't any big advantage of the old approach of pulling everything up at the top and therefore probably leading to bad code or you forgetting something it's better to get a clear error if you forget the declaration before the initialization so if I run this code well we see 27 so just works and again I think this is a change that really makes sense what of course still will work is if we have a function do something and here we for example have our H variable set it to 27 and then I have lat H like this now I call do something and I log H now what do you think will happen if I had run I get 27 so here it does work because actually it is declared because before it is used as I'm calling the function after declaring the variable and the function is to place where I use D variable so therefore this is a valid approach this will work but if you really think about it as I just mentioned it works two ways same way as before it is declared before it's being used and that is the core thing to keep in mind you have to declare things for actually using them so we had a look at lat and Const but another important field where a big change happened our functions you probably know the way to write functions like this I have my function with parentheses and then I have my function body where I may do something for example log hello to the console and if I now run this function like this you'll of course see hello so that isn't too new but es6 introduces a new syntax we can use to write our functions I can rewrite this function here in the following way I can assign it to a variable FN set this equal to and then I keep the parentheses but then I use this fat arrow so this equal sign followed by the greater than sign and if I now hit run what do you think will happen it still works so this is just a different way to write this function and I'll explain what happens here the pair of parentheses here stands for the arguments you want to pass to this functions there in this point you are not passing any arguments but an important thing to know is we always have to provide the empty pair of parentheses if we're not passing any arguments then separated by this fat arrow as it is called you have the function body and then went inside of this body you'll you execute your code now since we're only having one line of code there's even a shorter way to write this I can remove the curly braces and simply write the function like this if I now hit run you still see it works so again if I only have one line of code I may leave out all the rest and write my function like this now while this might look a bit strange it's simply a shorter way to write our functions but it also has another feature too which I will come back later first I want to talk a little bit more about the syntax and how it works here we're printing something with the console but imagine actually we would expect to get something back from this function which we could print to the console now the cool thing is if all your function does is have one line of code and return something with that line of code you can also simply write this so no return keyword or anything like that just what you want to return if I now hit run what do you think we'll see well we see hello so this function here is technically the same as this function here just much shorter of course so that's one thing but what if I do have more code than just one line well then I reintroduce my curly braces here and then I can do whatever I wanted you for example I might have my variable a and my variable B and I want to return a plus B if I now hit run what do you think we'll see we see five so we're using this function body like you would use it in a normal function or like in a function we know it from the es5 syntax so this works fine but we also have the shorter way of writing it if we only have two return statement the way you saw before now let's also talk about the arguments I'm not passing any arguments and I said that you need to provide this empty pair of parentheses in this case so how does this change if I actually do pass arguments let's say I want to pass a and B to it so like three and eight for example and I'm expecting a and B here and then this is the syntax how I write this I'm simply passing the arguments inside of the parentheses like a do you have it in the traditional function statement you probably know and then I can call this function so if I now hit run we see eleven now note of course that I again can get of everything but the a plus B term here is since I'm only having one line and I'm returning this so if I head round with the room so if I hit run with that I also see 11 now the cool thing is if I only have one argument so let's say I don't have B but this is always 5 so I'm only passing a what do you think will happen if I call this function like this well I get 8 and what do you think will happen if I still pass in our argument well it's ignored I still get 8 but here's another cool feature if I only have one argument then I may leave out the parentheses and that's important to know that is the only condition or the only case where I don't need parentheses if I have 1 argument if I have no arguments I need an T parenthesis if I have two or more arguments I need them to but if I only pass one argument I right I might write this function like this very very short of course so if I now it run we see 8 and this you short this possible way I could think of writing as function except for maybe trimming out the white space here so this our error functions in its basics or with the course syntax that is to it and one advantage you see here right away is that you save characters that it allows you to write functions in a more concise and shorter way of course I can also use functions like this in let's say a callback so if I have my set timeout function here I may pass this function like this and then as the second argument to this timeout functions I pass the interval 1000 milliseconds so to do something after one second now of course here returning something doesn't really sell safai so I will instead simply log hello and I'll also not get any arguments here so I'll just pass parenthesis like this and you autocomplete here is really helpful thank you so if I now hit run what do you think will happen I get hello after one second so this is a place where I could use error functions as well generally I can use error functions wherever I used normal functions before as me and they are just functions just a different syntax however there is one big addition to them that I haven't talked about yet it's concerning that this keyword in JavaScript as you might be aware the this keyword oftentimes is the root of a lot of problems or a lot of misunderstandings at least and it can lead to code behavior you were not expecting due to the fact how this is assigned to different parts of the third different objects and you want to learn more about that definitely Google for some articles on it or check out my chalice but bootcamp course where I will also explain how this works now here I'm assuming you are aware of how this works and I want to show you how it differs it with new syntax T that arrow functions and the old functions I'll create a new function the traditional style and in this function all I want to do is I want to log this now I'm going to comment out the time out for now because I first want to show something else it will also give this function a name let's name it FN if I recall FN here what would you expect to see if I hit run well we get the window object that's what we see here the object or the window holding our application the global scope this is - what this will refer to generally now I'll also rewrite this with the error function like this and here I will simply also log this now if I call this function here and I'll comment out the first function call what do you think I'll get if I hit run I get it with no object as well this doesn't change it's still referring to the global context because this is the context in which this variable or this function here is setup right it's in the global scope so it makes sense that this refers to the global scope to the window object first you're good now I'll get rid of all of that and all of my function calls here and I'll pull that up to the top next I'll go to HTML because I went to add a button here in my HTML body and I will just click to name a test I also want to select my body here or so I will or my button here excuse me so I will use a query selector here to quickly grab hold of it and at the bottom of my code what I want to do is I want to assign an event listener to this button and you'll soon see why I'm doing all of this I want to listen to the click event then I want to execute the functions OD normal the old-style function here if while this happens and you see we still print this year so now if I go to the output and I run my JavaScript code and I click this test button what do I expect to see remember before we saw the window object and this is what this should refer to so if I click test here what will we see we get an object but this is not even no object as you'll see if you scroll to the top it's our HTML button element so this actually refers to what called dysfunction that's what I explained in the JavaScript bootcamp course so therefore this no longer refers to the window but now it refers to the button as the button is the one calling this function the end now this might be the behavior you want but in most languages is this not the behavior you expect you wouldn't expect for this to change its context here and you refer to different things depending on what calls this function generally you would expect that this always refers to to what it refers when you define this function so the global scope in this case here so if I exchange my event listener to now use function to the arrow function here what do you think will now happen if I run with Jes and then click test now I actually get the window object as you can see if you scroll up all to the top here so the fat arrow function actually keeps its context and that is super important to understand because that really is the main difference saving some characters shorter syntax that's all nice but the key difference to understand is that this is treated or handled differently with the fat arrow functions you won't need bind or apply or call all those workarounds you used with es5 to get this to the right context but it will just keep the context in which this function is defined so if this refers to the window object here it will refer to that window object no matter how or where you call this at this function here this F and two function that's super important to take away and the other function the old-style which you may still use it's not bad by any means it's just important to understand here this will behave yeah I keep like you know it to behave in JavaScript it will change to what it refers and that is a super important key difference so that has been the fat arrow function I was really stressing this because it is a key addition in es6 now functions also guard some additional new tricks and what I'm showing you now applies to both the traditional functions with your function keyword as well as fat arrow functions but since it's a bit nicer to read I'll stick to the traditional functions of the function keyword here if I have my function is equal to here for example and this function expects a number and a number to compare to and then let's say it returns if number is equal to compare then I of course can't call this function and lock the result like this is equal to and then maybe 10 and 10 if I now hit run unsurprisingly I get true however with es6 we can assign default values to arguments for example I could give compare a default value of 0 so if I now call this function with only one argument 10 what do you think I'll get well I get false because now I'm trying to compare 10 which I'm passing this number to compare which I don't pass but which is set to 0 by default if I change default 10 and I had run again I of course get true again so this our default values now I can also assign a default value to number and now I can call this function without any arguments at all and I still get true now what happens if I do this I set number to be a default of 10 but compare doesn't get a default value and now I call this function with 10 what do you think will happen if I had run I get false and the reason for this is I'm still setting number to 10 because I'm only passing 1 argument in this world set the first argument and I can prove this by logging number and then also logging compare and I will set is the argument here to 11 to be different or T to be not equal to this default value so for now I'd run what do you think we'll get well we get 11 that's what I pass for number then we get undefined because we're not setting compare I'm not passing it I'm not setting a default value and then of course I get false because 11 is not equal to compare or to undefined so that's important to understand JavaScript will not pick the values which don't have a default value or the arguments which don't have a default value to assign the values you are passing it's still keeping the ordering and if you pass one argument to a function with two arguments well then only the first argument will get set that doesn't change it does allow you to skip the other arguments if you only want to set the first one that does work but not the other way around so if I now hit run you of course get 11 that's what we pass for number and then 10 which is default for comparator we may not only do this we may also do some calculations here like 10 divided by 2 for example and if I hit right now we see that as 5 how much sense that ever may make but it's possible but an interesting thing is you can also use the other arguments like this number so now I'm setting compare equal to number and what do you therefore expect to have my forehead run I get 1111 and of course true because I'm always sitting compare equal to number if no distinct value is provided if I do provide a separate value for compare and now I hit run well we see we're still overwriting this it's just a default value and we are able to assign a different or another argument as our default value we may also assign some kind of variable we have outside of this let's say we have a which is 100 and I do this what if will happen if I now it run well now compare is 100 so we may use our variables from outside of this function as well now with that being said what do you think will happen if I do this I said compared to 10 and I said number to be equal to compare and then I'm calling this function without any arguments what do you think we'll see will we see true because all is 10 we get an error that compare is not defined and the reason for this is you can think of this function argument list here as well just some lines of code only wrapped in one line of code and what we're trying to do here is we're trying to use a variable compare before it's being set here so this does not work we can't set something equal to something which doesn't exist yet as compared will only be created in the second step in the second argument so this does not work but the other way around test because if we now set compare equal to number number has already been defined before and therefore if we run this we get true and both values are 10 of course so there are default values at work and of course the great benefit of default values are that you can write more dynamic functions which might work in well different circumstances which don't necessarily need for example free parameters to be passed to them they might work with one and the other tools are set by default and so on and you can really play around with that and try out where it works for you what you can pass and how oft that fits together but together with arrow functions the default values are really a big addition to chava script functions and certainly helpful in your day to day coding so we have a look at lat and cons and we also had a look at functions we also had some nice additions or changes to object literals what is an object literal well I'll give you a brief refresher we have an object and this is an object literal if we create it like this with quality braces we might have a name inside of it which is set up like this and we might have an age and of course we can print our object like that and if I run we see the object great so that is what we know and how we know it however JavaScript where years six added some additions for example you might have a variable an ax and also the variable age which is set let's say 25 and now what do you think will happen if I remove that so I'm not assigning any values in here what I think will happen if I hit run well actually the object will take T values from the surrounding variables so if we're not specifying values in here to initialize this object with it will automatically look if it has variables declared before the Declaration of this object here which match the property names here so name name and age and age and it will automatically take those values so that is a good way to quickly initialize a an object with the values of some variables you already have in your code of course you can still override this and I could still set name to max if I now hit run we see that H is still 25 but the name was overwritten so this still works it's just a shortcut you may use you may not only define properties this way you can also define methods or functions so wife for example you could specify greet here and priority you would do it like this function and then your function code now you may simply add parentheses here and then you function body right away and then here you and print out this name for example and then they start H now if I call object greet what do you think we'll see you got max 25 and so this name refers to the name in here and this age refers to our age with which is set with the variable outside of this code there have also been some other additions for example you already knew that you could create property names as string as well you can also do this for methods so I can wrap greet in quotation marks here and of course the parentheses have to stay out that outside of them as they are not part of the name but instead they indicate that this is a method and now if I want to call this function though I have to use square brackets to access this property name your greet since it now is a string so if I now it run this still works this of course also allows you to use names you would not be able to use without quotation marks like greet me with the white space in between if I now it run you see this works and of course this would not work if I were not to have my quotation marks here since this is not a valid property name as well I might may not have a white space in there as you can see we get an error number cool edition our dynamic fields so I'm going to switch this back to be a string let's say here like this get rid of the dot so that this runs again and now dynamic fields are an interesting thing to you let's say I have a variable here and I name this age field and it should be a string H now I can go into my object and with square brackets that's important that's descent axe here I can to h-field and now what this does is it does not create a property named square brackets age field but instead it will look for this age field variable and use this the string here as a property name and I can show this by printing the object out of the console now what do you think we'll see if I had run we get an error and the reason for this is now it's not able to automatically take this value and of course it isn't because string age is not the same as this variable name age so in order to get rid of this error I will have to manually assign a value here again so now if I had run you see we now print out this object and then max 28 here so we are able to dynamically add a property name age as you can see here and don't be confused that you will not see the quotation marks here you are still accessing those values wire quotation marks like you see here with the function call but as I said it's not able to automatically infer this value here Oh anymore since well aging quotation marks is not the same as this so this is how you can dynamically assign certain property values and of course you can also access those values so let's see what happens if I print the age of my object here and I'll get rid of the greeting for now so for now it run this still works and you also saw that it worked because here in my function hole I'm still accessing this age so I can still use dot notation for this field name since it doesn't have any invalid characters in it it's not like the greet me function here so I can still access it with dot age that doesn't work and that's important to understand now of course you can also access it like this H field the variable which holds the property name if I now hit run you also see 28 and that is one of the important things here you can create properties dynamically with the names stored in variables and then you can reuse those variables to access those properties probably a use case you will have in your apps if you work with that kind of property creation that you want to access your property names in the variables later on - and you can do this you can pass it to this square brackets notation to access your fields in this object so that were some additions to the way you work with object literals the fact that you have these shortcuts to initialize your fields or to set up functions yes you can put your field names here into quotation marks your function field names that you also have those dynamic fields like the age field here so a lot of little additions which might come in handy when you're actually writing your applications now in this lecture I want to introduce the rest operator now what is the rest operator all best show it by presenting some code so let's say we have an array of numbers 1 2 3 4 5 like this and then we will create a function which we'll call sum up and this function should somehow get this array or it should get a list of numbers and then I want to loop through them so let I equal 0 is smaller than 2 ad should be D array I get here to add length I plus plus and then I will simply have a result variable which takes the value of the current iteration L of course I'll initialize result here which should be 0 at the beginning and then I will return result and if I now call this function here sum up and I pass numbers this numbers array what do you think will see if I had run we see an error because it is extremely helpful to write this correctly as well as to use a semicolon here's and now if I'd run we see 15 which is 5 plus 4 is 9 plus 3 is 12 14 15 ok so it works that's great now sometimes there are cases where you don't have the numbers you want to add or you want to work with the values you want to work with in the rain instead we have a list of values and you want to be able to pass this list of values so let's say I have 100 10 and 20 and this is no array notice that it's just a list of values these are free arguments however I'm only expecting one argument and by some fun sum up function also has no chance of knowing how many arguments it will get might be one might be 100 it doesn't know so I can't write it with let's say our one and ark two and then add them up that is not possible because I would need to know how many arguments I get that is where the rest parameter comes in it allows me to still get to add this array but since I'm not passing an array I add three dots in front of it the three dots here are the rest parameter and the free dots will actually convert this list of numbers into an array of numbers so if I now hit run you see one hundred and thirty and to make this clearer I'll even print the to add argument here and if I now it run you see that this actually is an array even though I did not pass one you also solve the behavior in the past in es5 already you have for example the math object with the max function to get the maximum value now this function also expects to get a list of values and not an array so internally this function was already using something like this to well be dynamic or to be flexible regarding the number of arguments it gets passed and now you're able to write something like this on your own with the rest parameter which simply takes a list of arguments doesn't have to be numbers could be strings could be mixed values and then just packs them together in an array so therefore if I for example do change one element here to be of type string if I now it run well you see we got it also packed together into an array so of course the value now differs because it first added 110 and then should just add a 20 in a string here so therefore we got this string value itself the correct result of the addition but it still works we are able to pass anything here and convert it into an array with the rest operator in this function argument here that's important we can use the rest operator in this function argument call now kind of the opposite of the rest operator is the spread operator actually it looks exactly the same but you use it in different places where do you use it let me show you I'll first create a variable variable numbers which is again array of numbers but this time I want to get the maximum now I was already mentioning that you already have the max function on the math object but if you try to pass numbers here what do you think it will get if you'd run not a number because this max method here actually expects to get a list of arguments a list of numbers and not an array now that's bad because we only have an array and in the past you would have to manually split it up somehow and make sure that you make a list of arguments out of that now with the spread operator I add my three dots again and remember the difference before we had in our own function in the argument list now we have it in a function call in the well list where we pass parameters to the functions on the exact opposite place now here with the free dots if I now hit run it works and why does it work well let's have a look what happens behind the scenes if I print out numbers with the spread operator in front of them and I hit run we see that it actually kind of loops through this array and prints all those numbers so it takes the array and splits it up into individual values that is what you spread operator does and therefore it's the opposite of the arrestee operator which takes a list of values and creates an area off it so rest and spread look exactly the same they differ by the place where you use them rest is used if you write your own function in the list of arguments your function expects and spread is used in your rather code to basically split up an array into a list of values es six also introduced a new loop to work with remember in es5 you already had the for loop you had the while loop to do while loop anta for in loop to loop through keys and object with es6 you also have the for off loop in order to demonstrate this I'll create a new where variable here test results which is an array and here I'll just have some floating-point numbers and of course it will work with any values you might have here so that's just an example and then I can create this for loop like a traditional for loop I'll have my test result so no plural here just a convention this name is course totally up to you off test results so the second part here is the value or the variable through which I want to loop through those values of this array and the first one is to which individual element of this array will be assigned to in each iteration of this loop so now I can for example simply block test result here and I saw that I have a typo so I'll quickly repair this and if I now hit run what do you think will happen well now I get the values printed out of course this could have been achieved before with a for loop but this is a shorter syntax and it's perfect for looping through errors and that is what it's there for to quickly grab the individual elements of an array and do something with them here in this block of the for loop so let's see for off loop being added pretty straightforward but also pretty useful another interesting addition to es6 our template literals now template literals are basically kind of strings with extra features and I will show that to you so first create a traditional variable here a name with the value max and of course I could print it out but I'm sparing you this because well it's pretty straightforward what you would see then I will create another variable which I'll name description and here I want to use a template literal I do this by using the backtick that's the character you've never heard before in on your keyboard on your keyboard it's this angled quotation mark here so it is not the normal single quotation mark but the bit leaning to the left quotation mark you need two of them and then you might write multi-line strings for example like this if I now print this description here and I hit run you see it as this literal now that is a big difference already because with normal strings of course this would throw an error if I try to do something like this you see we get an syntax error so that already is an addition it allows us to write multi-line strings like that but it also has more in its pocket than chess debt for example we might use the variables inside of our template literal so I might write hello I'm and then notice also that I don't have to escape here since I use this backtick notation and then I can use the following syntax to print out a variable which is defined outside of this template literal for example my name I use a dollar sign for this and then curly braces and inside of those curly braces the name of the variable I want to print so name here if I now it run what do you think we'll see we see hello I max so with this syntax I'm able to insert a variable inside my string here like this without having to exit out of my string Plus value plus quotation marks string like before here you have one text and you can dynamic the output values that's where the name template literals comes from it kind of also might resemble if you're using that some templating engines you might use when doing some server-side or some general web development where you would also have special syntax to insert values in your HTML code if that is something you're aware of your or your using so that is kind of comparable here and with that we have a very quick and good way to write more complex text and store in a variable use multi-line and so on and also output our variables inside of it inside of this template expression you might also add text again so like multiple exclamation marks so if I now hit run you see them here so even though that's inside of this template expression inside of this curly brace block here well I added like we used to with a plus sign and any string so in the end what we're doing here is between those column prices you have to enter something which can be resolved to to a string and then you might do whatever you want to do you run some calculations and so on as long as the result of whatever you're doing here inside of the curly braces returns a string that's really important by the way if for some reason you have a template literal where you need to actually print this out instead of replacing it with this variable and so you can simply escape it with a backslash so now if I had run you'll see the whole template expression here and I'm not actually replacing name with max so that is how you can escape it if you need to and that our template literals a nice little addition to allow you to quickly write more complex texts and store them in variables as well as access different variables surrounding those plate literals now the last topic I wanna touch in this module is destructuring destructuring allows you to do what the name implies 2d structure a complex object like an object or an array into simpler ones and I'll show you how this works I'll start with an array numbers and those should be one two three let's say and then the structuring works like this let's say I want to have 1 & 2 now of course I could set a equal to numbers index 0 and then I could do the same for B and access the item and D index 1 and then I could print out a P that would work this structuring gives you a shorter syntax use square brackets to the structure an array for objects as you will see later you use curly braces then the values you want to while already variable names you want to fill with values and then well the object you want to destructure numbers so that of course is syntax you probably haven't seen before because it's new and prior to es6 you didn't use square brackets on this side of the equal sign right you would use it on the right side to create an array but on the left that certainly is new now let me show you what this actually does by printing a and then also printing B and I we have the idea you already can guess what will happen but what do you think will happen if I hit run you see 1 & 2 so this is a quick way to extract values from an array now of course all the I could add C to get the third value as well the question is what happens with the original array is it destroyed or is it changed by this restructuring or are we just retrieving copies of those values instead of actually pulling them out so what do you think we'll see if I now hit run well as you can see the original array still persists it's not changed we're just getting copies of the values you're pulling out with the structuring another interesting question of it is what if I actually pull out more values than this array has and now I want to print D here what do you think I'll get if I now hit run well I get undefined because remember you can think of a JavaScript array as kind of an infinite array where all the values you didn't set are just undefined values so you can pull out as many values as you want you will get them their chest and defined a different ways also to use the row DD respirometer here you may use it like this B and if I now print B what do you think I'll get if I had run I get a new array so with the rest parameter I'm basically pulling out all the remaining values which I didn't destructure before like a and put them into a new array which of course also is possible this is a quick way to reach you to retrieve a part off an array of course you will also have splice and slice for such operations but as you can see it is a really quick way to get certain values if you will need to get them needless to say the structuring of course also works with array that have strings or something like this so if a now it run this still works the same now back to the a B example and I also retrieve C and D like before now you already saw that if I run this D will be undefined of course with destructuring you can also assign default values like this default if I now hit run you see default if I also assign default to a here and then I hit run what do you think will happen we see one so that's kind of a mixture of functions with default values and of restructuring here so basically you are able to prepare for the case that a value you want to pull out is actually undefined in this case you would get whatever default you set up here and again this could also be a number or any type but if the value is available like here with a where we actually can pull out one melody fault will not be used and instead we get the actual value we pull out with the structuring the structuring can also be used for something else you can use it to quickly swap variables so let's say we have a which is five and we have B which is 10 and we just want to swap that so that a is 10 and B is 5 well before you would need a helper variable C to temporarily store one value then set one variable to the other and then set tac-2 the other one and so on so it was possible but it had some extra steps now it's as simple as this use destructuring with the variable names you already define so B and a and you assign it like this a and B so we're kind of destructuring on both sides over here we're creating an array to be precise we're constructing an array and then we're instantly D structuring it so here we're creating an area where a is the first element and B is the second and then we're deconstructing it q well basically swap the values so therefore if I now log B and of course also log a if I run I get an error because I shouldn't use let here thank you so now I've had run you see B which is the first one we print is now actually 5 even though we set it to 10 before and a is 10 so the values actually were swapped and this is a real quick way to do this in case you will have some code where you need to swap certain values T structuring really makes this easy another thing you can do with destructuring to go back to the array of numbers here you can also ignore certain values so let's say I want you pull out some values but not all of them I want to put one and the third one well then I just leave an empty space like that and set it equal to numbers and then I log a and C I can also use the log function like this if I now it run what do you think will get I get one and free so two will simply left out as I reserved an empty space here in the rest operator or is destructuring operator here so I've simply left out this space where I could assign B but I don't have to and therefore I'm able to just pull out specific places in the array I want to destructor you can also do something like this you don't even need to declare your array you can immediately for example the structure it like this a and B if I now hit run what do you think will get one and two so now I'm not even creating this array I'm not declaring it I'm not sending it to a its own variable instead I'm immediately structuring it to just get a and B out of it now this is kind of a way to also quickly create a and B variables initialized with one and two where if you think of this if you think of it like this so that is another way to use destructuring so now we always considered arrays and destructuring is also available for objects basically it works exactly the same and all the tricks or things that showed you are also true for objects but I still want to show it so I'll create an object and yes like of the array I don't have to create it and then restructure it I could do it all in one step like you saw it in the last lecture on arrays but I'll still do it in two steps just to make it a bit clearer clearer so I'll have a name Max and an age 27 and next I want you to destructor this so I want to get name and age out of this object now this would be as you use it with arrays with the square brackets however here we're destructuring an object and there were four we have to change this we have to use curly braces here now so now I can do structure it like this and this will pull out the name @h field from my object and store it in individual variables so I can now print name and age like this if I now it run what do you think I'll see well of course I get max and 27 so this works exactly as I just described it if I also have a greet function here like this do you think I also can pull out this greet function let's say simply by doing that and let's leave out the middle one chest for styling reasons if I now call greet like this do you think this will work what will happen if I had run this doesn't work because for styling reasons we could do this in the array where we have a clear order with an object we can't just skip a certain value here so I simply can leave it out though because we're not having ordered properties here we are identifying them by name anyways so I can do this if I now hit run what do you think will happen now you'll see hello there so this does work but it's important to understand why this syntax didn't work and the reason for this is as I said we're already referencing them by a name not by position in the air a we were deconstructing them by position now we're deconstructing this object by name therefore if we have name one year for example this also will create one and now it run this also wouldn't work because greet one isn't found as a property in this object those names here have to match that is really important to understand now explain that names have to match so name has to match name and greet has to match greet in order to successfully deconstruct this object but sometimes you want with a different name for this variable outside of this object then you are using inside of this object that's why when deconstructing objects or destructuring objects you can use a liaises so for example I could give greet and Aaliyah's of hello and then I could rename this function here too and if I now it run it still works because now greet here refers to the property name inside of the object but hello will be the name I use outside of this object like here and if I still try to use greet will that still work what do you think of what will happen if I hit run this won't work anymore because now Hello is the only name we may use outside of this object so we have to stick to it so that was destructuring on both arrays as well as objects a really powerful tool to quickly weldie structure a certain object or array to get certain values keep in mind that a you're not changing the original objects or arrays or arrays and be that basically you can do the same for rays and objects but there is this important difference that for object D structuring you pull out elements by their property name for array D structuring you pull them out by position that is really key to understand and to take away here and with that you're of course free to play around with that and see what else you can do with D structuring and use that syntax to be useful for you which a lot of fun with that and I'll see you in the next module so if that we finished is first module on the syntax changes in editions decor syntax changes in addition cs6 brings we had to look at Latin Const we had a look at the new function de fat arrow functions and default arguments we had a look at the additions to the literal notation of objects where we could use strings as names for our object methods for example we also had a look at rest and spread and add template literals so multi-line strings with values variable values being output right inside of them if you want to put it like this and we also had a look at D structuring all of that very important additions which make JavaScript more powerful and give you more flexibility and I really hope that through this module I was able to show you how all that works and how you use it what the limitations are and why it might be useful with that it's time to continue to the next module which will actually itself be about modules see you there bye

Channel: Academind

Views: 267,031

Keywords: es6, ecmascript6, javascript, changes, syntax, let, const, arrow functions

Id: IEf1KAcK6A8

Length: 73min 33sec (4413 seconds)

Published: Fri Aug 12 2016