5 Must Know JavaScript Features That Almost Nobody Knows

have you ever been watching a tutorial and then been amazed when a developer uses some really cool feature of javascript you've never seen before that's happened to me so many times so in this video i want to share my five favorite features of javascript that almost no one knows about but they drastically change the way that i write code and the way that you'll write code and my favorite of these features i'm going to share with you at the very end it's something i use in literally every single javascript project so let's get started now [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this now this very first feature that i want to talk about first i need to explain the code we're using here it's just a super simple function called calculate price it takes in a price it takes in taxes which is a percentage so we have .07 for seven percent and a description of the item and then it calculates the total with those taxes and then it prints out the description with taxes and then it prints out the total here as well as you can see it says my item with tax is a hundred and seven dollars because it's that seven percent tax added on to the price pretty straightforward and easy to use now what happens if for example you want to allow certain default values to be passed in so let's say we have calculate price and we call calculate price we call it 100 but this time we call it with zero for the taxes and we'll say my other item then we're going to call this another time and for example we're going to put undefined in here so we're going to say my undefined item and this would happen a lot of times if you have like an undefined value going here we'll just put undefined for both of these actually so this is really common you could accidentally pass in a variable the variable value is set to undefined and inside your code you need to make sure you handle that so generally the way that people do this is they'll say you know taxes is going to be equal to taxes or it's going to be equal to a default which in our case would be like 0 taxes actually let's say that the taxes by default are going to be five percent and then we could have a description here so we could say description is equal to description or and then we're gonna have default item so all that this does is it says if this is some kind of false value we'll default five percent and here if this is some kind of false value we'll default to the default item and we can even pass in like an empty string here for example so if we save this we're gonna notice something interesting here we have my item with tax 107. that's correct this should print 107. here we have 100 the tax is zero and it says my other item but you'll notice a five percent tax is added the price is 105. and then down here this properly says default item with tax and it chooses that default tax of 105. but the issue here is that up here where we have this 0 0 is a false value technically in javascript so when we use the or symbol here it's saying 0 or and 0 is false so it uses this second value this is a problem if we want to pass something like zero or if we want to pass an empty string we don't actually want it to fall back to these default values so luckily in javascript they added a new thing called nolish coalescing and all this is is you take anywhere that you have this like or syntax and just replace it with double question marks and it looks a little strange because you're not used to seeing question marks in javascript these question marks work a little bit differently it says is this first value taxes null or undefined if so it uses the second value otherwise it just uses the original value for taxes so now when i save this you're going to notice immediately we get this printed out just like before but this second item now properly prints out 100 because we passed a tax as zero and since zero is neither null nor undefined it is just sticking with zero this only comes into effect these question marks only come into effect if the value is zero and then down here since we passed an empty string an empty string is not a null or undefined value so it's not going to use this fallback so it just has an empty string and then the tax is going to the fallback value because we passed undefined normally if you wanted to do this inside of javascript you need to say if taxes equals null then taxes equals 0.05 this does the exact same thing as this line down here so technically we could write this and that would work fine or we could go with this example down here and it's just much more condensed and it allows you to write code where you would normally just have that or syntax and instead replace it with a double question mark just easier to use and much better in my opinion now unfortunately this is not quite at 100 support it's just edging itself up there it's in a lot of the newer browsers it's in like google chrome firefox edge safari it's in pretty much everything but there may be a few browsers you find that don't quite support this double question mark syntax because it is fairly new but for the most part you're not going to have any issues as you can see it's working just fine in google chrome for me now while we have the same code up i want to talk about my second crazy cool feature which is how you can style out console logs you can take console logs which are kind of boring and static and actually apply css styling to them and it's super simple all you do is you add a percent c before the text that you want to style then you pass a second property to your console log which is going to be your css styles so i could say like font weight whoops wait bold now when i save you can see that my text is now bold i could also come in here and just say color bold i'm sorry color red and now i'm going to have red bold text right here so we can use literally any css we want to change how our console log outputs which is super useful and if we want to reset it for example if we want to bold this first section so we'll say we want to bold this and then the second section we don't want bolded we just put another percent c has another property and now whatever we put inside of the second string is going to be the style for everything after our second percent c so let's just say color green for example now you can see that this text over here is bolded and then this text is green because it's matching this selector down here so everything after the percent c is styled in the order that you put it so our first percent c goes with this style second one goes with the second style and so on you can do as many as you want if you want to just reset your css we could just do percent c pass in nothing and it's just going to reset us to normal css so now we have bold here and then normal css here we can even make it a little bit better we could say font size is going to be 1.5 rem now you can see we have this really big text in this really little text down here so you can do a ton of styling with css inside of just console.log which is really great if you want to do a bunch of extra debugging work it's super useful to be able to use these percent c symbols now this next feature i want to talk about is very similar to knowledge coalescing but 100 times more useful in my opinion so let's take for example this really simple code we have a person class which takes a name an address and a list of hobbies and then also we have a print function which just logs out that person and then we have this other function called print person street which just takes in a person gets their street from the address and prints it and then down here we've created a person that has a name kyle an address with the street 12345 main street the city somewhere and then hobbies of bowling and weightlifting we print that person out and we print their street as you can see we printed out the person object and we printed out their street everything works just fine what happens if we don't have a street or we don't have an address object let's say for example we pass in undefined here's the address we just don't have an address well now when we save this we're going to get an error because it's trying to access this address dot street but street doesn't exist so it's saying cannot read property street of undefined because address is undefined if we go even one step further and instead of passing an actual person in here we pass in undefined we're going to get another error because person's undefined and now it can't access address this is a huge problem in javascript that you're going to run into all the time so many times you may see code that looks like this you'll see person and person.address and person.address.street then we'll print it out so we'll take console.log put it up here and now this is going to work it's just going to print out undefined and that's because we're first saying do we have a person if so do we have an address on that person if so get the actual street otherwise just return undefined because this is undefined so it's going to exit out of this you know short circuiting right here this is what you would normally do you could also do something like if person and person dot address then you could say console.log person.address.street like this this is going to be a very similar code not quite the same because it doesn't actually print but it's very similar it's making sure we check first to see a person exist and an address exists before we try to access it this is a huge problem in javascript you're going to run into all the time and both of these ways to do this suck it sucks to write out this if it sucks to write out this huge and statement so luckily javascript added an easier way to do this and it's something called optional chaining so let's go back a little boys to where we had our original example with the clean looking code if we didn't have to worry about null our code would just say person.address.street but obviously this doesn't work so what we need to do is put a question mark in here right before the period on both of these and now if we save you can see it prints out undefined and doesn't throw an error but you're probably thinking this is some crazy looking syntax all this is saying by doing question mark and then something is it's saying does person exist if person exists as in it's not null and it's not undefined then continue now we're checking does address exist same thing is it no or undefined if it's not then go to the street and we print out the street but if anywhere along this chain we have a undefined object for example here person is undefined it's just going to stop right there it's going to pretend that none of the rest of this existed and it's just going to print out undefined so here if we pass in kyle again it's going to print out undefined because person exists but our address is undefined and now if we pass in an address that has a street we'll just say something like that now you can see it prints out that street because the street actually exists it goes all the way through the chain checking each time does this thing exist if so continue on to the next one until it finds either the end of the chain or something that doesn't exist and exit out immediately this prevents us from running into all those errors where you have you know undefined can't call this object on undefined and so on something you run into all the time you don't have to worry about if you're using this optional chaining and luckily this optional chaining can be used on things even beyond just trying to call properties it can be used even on functions so let's just say here right now we're calling kyle.print and that works just fine let's say that we thought we had another function called print name and we wanted to call print name well if we save we're going to get an error of course uncaught type our print name is not a function because there is no print name function on our person object but let's just say we didn't know if this existed or not what we could do is just say question mark period which looks really really weird but now if we save you'll notice it works just fine because what this code does is it's saying okay here's kyle we're calling print name but by putting question mark period before we actually put the parentheses it's saying check first to see if print name not only exists but also to check if print name is a function if print name exists and is a function then we're going to call it if it's not existing at all then we're just going to return undefined and do nothing so if we were to use the print function here you're going to notice it prints out just fine as we have our print up here but that's because this exists so when it does the question mark period check it says okay print is a function and it exists so let's call it but when we had something like print name which doesn't exist you can see it no longer calls that because print name doesn't actually exist anywhere this is really useful if you have an object and you don't know if certain things on that object exist but you still want to interact with it you can use this question mark period syntax it also even works with arrays so let's just say here instead of passing a list of hobbies we don't so we'll come in here we'll remove our list of hobbies so now our hobbies are completely empty so if we say kyle.hobbies of xero and i want to console log that to get the first hobby that kyle has i'm going to get an error because it's saying cannot read property 0 of undefined because hobbies is undefined well again you can use question mark period just like that and now all of a sudden it's printing out undefined because it's saying okay does this hobbies exist and is it an array if so then we're going to access it with the array accessor otherwise we're just going to return undefined and continue onward so we could even take this a step further by for example here saying.2 lowercase just like that now if we save you can see it's just printing out undefined but if we put in a list of hobbies we'll just say for example bowling as the first hobby and we save you can now see it's accessed the first hobby correctly and it converted it to lowercase and printed that out right here this feature is probably one of my favorite features that have been added to javascript recently and luckily the browser support is pretty good it's very similar to nolish coalescing they came out around the same time most browsers support it but you may run into some edge cases on some less popular or older browsers just check to make sure but for the most part you shouldn't have to worry about this now the next thing that i want to talk about is something that's really simple and really small but it drastically cleans up the speed that you can write your code so let's just say we have a variable name which is equal to kyle and we're gonna have here let's just say favorite food we'll set that equal to rice and then we're gonna create a kyle object and this kyle object is gonna have a name and it's going to have a favorite food which is going to be set to favorite food just like that and we'll say console.log whoops console.log kyle and if we come over here you can see name kyle favorite food rice well that's all good but you'll notice that this name is the same as the name over here and favorite food is the same as favorite food over here the key of our object is the exact same as the name of the variable we're setting that to what you can do is just type name or you could type favorite food now if i click save you'll notice it works exactly the same you can see our name is set to kyle and our favorite food is set to rice and you can ignore this you know crossed out line i don't know why this is doing this we just change this to like name two maybe it'll get rid of it there we go same exact thing what you'll notice though is that if we have an object and we want to set a key and the value that we're setting to that has the exact same name so we have a variable with the same exact name as the actual key we're setting it to we can pipe just the variable name and it'll automatically convert this to the same code as if we had put the name here of the key and the variable like that so it's essentially an object shorthand where we can just write out the variable name and it will convert that to this key of the same name and set the value from that variable so as you can see here name two is set to kyle and favorite food is set to raise we call this favorite food with a bunch of numbers at the end and we of course make sure we copy this down here you can now see favorite food with a bunch of numbers is set to rice but if we wanted to have a different name we could just say favorite food like this and make sure that that is a colon and now you can see favorite food has been set to that variable this only works if the variable has the same name as the key in the object but very often this happens so it's a great way for you to be able to save characters by for example having this favorite food here and having a favorite food here it just saves you a bunch of space and makes your code a little bit cleaner now the last thing i want to talk about is the most important and my favorite feature by far and that's how you can actually load your javascript so let's come in here and let's just inside of our body we'll just create a button and this button is just going to have some text inside of it it's just going to say hi so we have a button on our screen so let's just open this up here so we can actually see it let's say open with live server let me drag this over and as you can see we just have a button that says hi on it and now inside of our javascript let's just say you know const button equals document dot every selector of button we can even just console log button actually instead of console logging we'll just say button dot style dot background color equals green there we go make sure i have a quote there we go so now you see our background color is changed to green works just fine and the only reason that this works you'll notice our script is up in our head which normally is bad you shouldn't put your javascript scripts in the head because it means that your javascript is loading before the body but you'll notice in our instance this isn't a problem that's because we're using this tag called defer we're deferring our script which means that our script is making sure our entire body loads before running any of our javascript if we remove this you notice our button doesn't actually turn green and instead we actually have an error cannot read property style of null and that's because what's happening is when we get to our script tag it stops parsing all the rest of our html goes into our script tag runs the code and then it continues parsing which means the button never got added to our page but by putting defer in here what happens is it gets the script tag it downloads it but then it continues rendering out everything so it renders our button and then as soon as it's done rendering the entire page then we run the code inside of our script a lot of times to get around this what people would do is they'll put the script at the bottom and then you get rid of the defer tag and then this will also work just as well but the issue with this is the download for your script tag doesn't start until the browser gets to it so since it's the last thing in your browser the very last line it's the last thing to download which means it could slow down your download speeds i actually have an entire video covering this topic you can check out in the cards and description down below it really explains this in great depth but by just putting your javascript up here in the head and making sure you put defer it means you never have to worry about waiting for dom events for load or on ready you also don't have to worry about the annoyingness of putting your javascript at the end of your body because it's just kind of difficult and painful you have everything you need right in the head all you have to do is defer it and it does the exact same thing as if you put your script at the very bottom but it'll load even faster this is something i do in literally every single one of my javascript tutorials because it just makes writing javascript that much easier and i highly recommend you do the same thing if you enjoyed these crazy javascript features and want to learn even more about javascript make sure to check out my full javascript course linked in the description also i have a complete web development roadmap linked in the description as well which includes a bunch of different javascript topics that i think are important for you to learn so with that said i really hope you enjoyed this video and have a great day

Channel: Web Dev Simplified

Views: 252,044

Rating: 4.9257016 out of 5

Keywords: webdevsimplified, javascript features, complex javascript, new javascript features, esnext, js esnext, es next js, javascript esnext, es next javascript, future javascript, javascript, js, javascript tutorial, js tutorial, javascript new, new js features, new js, javascript project, js project, javascript project tutorial, js project tutorial, javascript top 10, js top 10, javascript top 5, js top 5, null coalescing js, optional chaining js, async vs defer js, js object, wds

Id: v2tJ3nzXh8I

Length: 18min 5sec (1085 seconds)

Published: Sat Feb 20 2021