Another 5 Must Know JavaScript Features That Almost Nobody Knows

javascript is crazy i mean there's so many different wild features and properties out there it's pretty much impossible to know them all but in this video i'm going to share with you five unique features that i'm guessing you probably don't know but could be incredibly useful and also if you want to take your javascript skills to the next level i just finished my full javascript beginner and advanced course it's just under 40 hours of content and covers everything from the most basic things about javascript all the way up to advanced things about javascript and programming in general that i didn't know until long after i landed my first job and if you're interested in checking that course out you can use the discount code early to get 20 off as long as you do that within the first week or so of this video coming out it'll be linked down in the description below for you to go check out i highly recommend it [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 the very first thing i want to talk about is the thing that you saw in the thumbnail which is essentially how you can use labels and these labels are generally used inside of loops but we'll get to how they can be used inside of scope which is what the thumbnail is all about so this really simple example here we have two different for loops we're looping from zero to four here so essentially zero to three and then for this four loopers grouping between zero and two and then down here we're just printing this out and as you can see on the right side of the screen we have i and j being printed out so we have i zero j j0 and then we have j being incremented i've been incremented up here and just so on all the way down through the list and if you're a little bit confused on how the styling of stuff works inside this console log you're going to want to check out the first video i did in this series i'll link it up in the cards and description for you so you can see exactly what i'm talking about but let's say that we want to skip when we get to i equals one so you may normally say okay well if i is equal to one then what we're just going to do is continue this allows you to skip one iteration of the loop and you may think that this will work and it's going to look like that worked as you can see we have i being printed out for 0 2 and 3 but nothing for i equals 1 but we're still running this for loop a bunch of times if i just put a simple console.login here where i just say before so this is running before our check you're gonna see if we come up here we have before being printed then our print then before and then our actual print until we get down to here where i equals one and it's printing out before four separate times and then it's continuing on as before and that's because we're just continuing every time i equals one which means we're looping through this for loop some extra times that we don't need to what i would like to do is just if i equals one stop executing everything inside this j for loop and just increment my i well to do that i need to use a label so let's just label these different for loops we have this one we're going to call loop one and to make a label all you do is just type in the name of the label that you want just like a variable name for example put a colon afterwards and then a space and then there we go we have our four loop labeled same thing for this one we're going to call it loop two and now what i want to do instead of just doing continue i want to continue loop one and what this actually says is okay exit me out of loop two completely go up to loop one and increment the number by one and continue just like you would do with a normal continue statement so now if i save this you're gonna notice here i get before and then everything being printed out and now here instead of before being printed out a bunch of different times four different times it's running this for loop one time where it's saying console log before and then i equals one so it exits out completely and goes back up to the top of this for loop and then it comes into this for that again prints out console.log before and then prints this so by using this continue statement with a loop label we can immediately skip out of this loop into the top loop and this is really great if you have nested loops and you just have one condition that you want to check and you say you know if this condition is true just exit me out to the very top in the next loop another way to see this a little easier is if we move this if check after our console log like this we can do is just save this and you'll see that we get it being printed out for zero and then when we get to i equals one it prints it out the first time it goes through and then we're continuing so it no longer prints this out anymore but if we were to change this where we just did a normal continue without the continue loop one and save you can see it still prints out all those different values for i equals one and that's just because it's just continuing and not allowing this inner loop to run anymore it'd be the same as if we said continue loop two because that's the loop that we're currently in but we wanted to continue loop one which is why we wrote continue loop one and it exists as out of this middle inner loop and immediately increments us to the next value in this upper loop this is a pretty strange scenario to run into where you would want to do this but there's certain scenarios where you have nested loops like this and the inner loop you have some condition that you want to check and if it's true you want to move on to the next value of your outer loop you can imagine you had multiple levels of nesting maybe three four five different loops deep and on the very most inner loop you want to just skip to the very next value of the outer loop so using these labels allow you to do that really easily because we can just say okay continue this loop right now or instead of doing continue we can also say break so break will normally exit you out of the loop that you're in but if we say break loop one is just going to exit out of loop one completely so if we save you can now see once it gets to that i equals one value it prints it out and then down here it's saying okay well i equals one so we're going to break out of loop one which means we completely exit out of this outer for loop and if we just did a normal break and save you can see it's just breaking us out of this loop two on the inside instead of breaking us out of the outer loop so by using these labels we can really easily specify what loop we want to break out of now something else that we can do with labels is actually label any scope block that we want so for example we just make a generic scope by typing in these curly braces and if you're not familiar with how you can just create a scope anywhere you want you're going to want to check out the second video i did in this series i'll again link it in the cards for you but we can just give this any name you want for example name inside here we'll just say console.log before do another console log called after and if we just run this you can see it prints out before and after because we just have a scope and the scope runs and it just allows us to scope these variables but we named this scope with the name of name so now what i can do inside of here is i can just say break and i can pass it the name of my labeled scope here which is name and now what happens you can see it just prints out before and then it exits me out of this entire scope here and i can put another console.log here that says after scope as you can see it says before and then with this break here we're breaking out of this entire scope and it just goes down to this code down here while without this here we're printing out before then after then logging out after scope and the second topic that i want to talk about is one that you're probably familiar with and that's if you create an object or an array using const and then you try to change a property of that object it'll actually change it as you can see we create this constant person with the name of kyle and as you can see when we print this out the name is kyle and then we're changing the person's name to john and then we print it out again and the name is john and initially when you first see this you're probably confused because you know kant should be creating a constant object but it doesn't and if you're unfamiliar with why this is and why you can actually change properties on these objects i've already done an entire video on it i'll link in the cards and description for you but that's not what i'm talking about at this point because most people already understand that what i want to talk about is how you can actually make it so it's impossible to redefine the properties of an object and that's by using something called object dot freeze so if we just take object here we can call a method freeze on it and we just pass it in an object and what this does is it makes it so you can't change any of the properties of that object so if we save now you're going to notice that it still prints out kyle for both of these the name is kyle here and the name is kyle here even after i try to change it to john and if we're in strict mode so if we just come up here and we say use strict and we save this you're going to notice we actually get an error and it just says cannot assign to read only property name of object so if you're in strict mode it's automatically going to throw an error and if you're not in strict mode it's just going to not allow the actual change to be made now object.freeze is great for making it so you have an immutable object but if you have a nested object for example we have an address inside of here and this address has a street which just says one two three four what we could do is we could say person dot address dot street and we could change their street to five six seven eight instead and now we look at the person their address here is going to be five six seven eight so it allowed us to actually change this nested object and that's because object dot freeze only prevents you from changing the initial properties on the object so name age favorite food address but it doesn't deal with any of these nested objects so we'd also need to do an object.freeze on this nested object as well and once we do that you're going to notice if we check here the street is now no longer changed it's still one two three four since it didn't allow us to reset it and again if we were in strict mode it would throw us an error this is incredibly useful if you're doing any type of functional programming because you don't want to mutate anything when you're doing functional programming so making sure you have object.freeze on all your objects means it's impossible to mutate those different objects also something else you can do with object.freeze is do a raise so i could just say you know what my array here is going to be hobbies and i'm going to just put in some hobbies here so we're going to have like weights and let's just put in bowling there we go and i just want to say you know what hobbies dot push i'm going to push in a new hobby here and this new hobby we're just going to say is whatever now if i look you can see that these hobbies have been changed and i have three things inside this hobbies array but i can use object dot freeze and it'll prevent me from changing this array at all so by doing this you can see cannot add property two object is not extensible out of ray.push it's essentially saying this array here is frozen we can't change it the nice thing about object.freeze is we can use it on arrays or objects they both work and essentially saying you can't push to it you can't remove from it you can't modify it it's frozen in place you cannot change it at all now this next one is actually going to be a bit of a two-parter so you kind of get a bonus and that's because we're going to be talking about maps and sets and they're both very similar and serve similar purposes for what they do so the first thing i want to look at is the traditional way that you would create a map in javascript and then i want to show you the actual way that you should do it so let's say here that we have a map that maps a country name here to the currency used in that country and just imagine that there's you know hundreds of items inside of this map because you have some giant picker that people can choose what country they're from and then let's just say i chose united states as my country so it's saying my currency is usd and we're printing that out to the screen pretty standard stuff that you've probably used all over the place but this has quite a few downsides to it and then it's not the most efficient way to do something like this and it's kind of difficult to loop through all these different currencies if i wanted to like print out a list of these currencies it's really hard to do that with an object so instead what i want to do is convert this to use a map inside of javascript so let's just say we want to redefine this we're going to create our currency map we're going to set it to a new map let me just comment this out up here and now we have this map object and the map object when you first create it can either be empty like this and it'll create a brand new empty map and if we just do a quick console.log of our currency map and get rid of this other code down here we can see we just have an empty map with nothing inside of it and if we want to we can actually pass it an array of arrays so if we wanted to put united states in here we'd pass it an array and the first array inside that array would have the value united states as the first property and the second property would be its value which is usd and then we could put in here india as well so we could say india and we could have rupee in here and now if we save you can see we have a map with two entries united states which maps to usd and india which maps to ruby so this is how we would create the map but let's say that we left the map empty to start with we could also just say currencymap.set and this allows us to set an entry so we could say you know what for the value united states i want to set the value here of usd and now you can see our map has that value key relationship inside of it and the really nice thing about these maps is you can do so much more than just do a key value of like a string to a string we could actually use an object here i could say you know what i want the object that has the name of united states to be set to that property this is something you cannot do with a normal object-based map up here i took an object and now i'm referencing that object whenever i pass this object to this thing i'm going to get the value usd out of it so as you can see we now have an object as the key if i take this object and i just pull it out into a variable we're just going to call usa is equal to that then i use usa here as the key what i can do is i can just say you know what i want to do currency map i want to get the property for that usa key as you can see it prints to us usd which is the value we assigned to this object this is super super useful because we can not only map strings to things which we could do in normal objects but we can also map things such as objects booleans numbers whatever it is that you want to do a map for also on top of that it's really easy to loop through a map because we can just say currencymap.4 each and it's going to loop through each one of our key value pairs for us while with an object it's much harder to do that that's pretty much all there is to maps these are just really useful anytime you want to map between one value to another value whether it's from an object to a string from a string to a string whatever it is and the next thing i want to talk about is sets which are very similar but they're for arrays maps are for objects and sets are for arrays so let's just say we have a array which we'll call unique numbers and we're just going to say here it's going to have some numbers inside of it and you'll notice we have a duplicate we have 234 showing up twice inside of here but we want to make sure this is an array of unique numbers well that is where a set comes in what we can do is we can just say a set here we'll just say cons set equals new set and we're going to set it equal to those unique numbers and then we're just going to console.log out our set to see what it looks like and you notice our set only has the values 1 2 3 4 and 45. it got rid of the duplicate value of 234 here it's only showing us the values that are unique and that's because a set is very similar to an array but it only allows you to have unique values so anytime you try to add a value to a set that already exists it just ignores it completely and the nice thing about sets is it makes it really easy to add values and remove values well with an array it's kind of hard to remove a value from an array because you have to fill in the gaps and all of that but with a set it's super easy we can just say set dot has and we can just say okay you know what does it have the value one let's just do a quick console log here fourth set that has one okay yep it has the value one we'll say does it have the value two nope it doesn't we could say that we want to come in here we want to delete the value of one and then we'll do a quick console log of our set as you can see it prints out our set and it no longer has the value one inside of it so as you can see this is really useful for dealing with arrays where you have unique values inside of it which happens all the time when you know you have an array of completely unique values and the next thing i want to talk about is something that you've almost certainly seen before but maybe don't quite understand why exactly it is an issue so as you can see here we're just console logging point one plus point two and we're getting point three zero zero zero zero zero zero four and you've probably seen this as a meme all the time like people are like oh javascript is a terrible language because whenever you add point one and 0.2 you don't get actually 0.3 but what most people don't realize is this is not a problem with javascript per se this is actually a problem more so with how computers actually do math and the limitations of computers when it comes to doing floating point arithmetic which is essentially any type of math that involves decimal point numbers so numbers that have a decimal anywhere inside of them now the reason for this type of error is because for a computer to do actual arithmetic they did convert all of the numbers into binary and when you convert 0.1 into binary it actually is an infinitely repeating value it's the same thing as if you do one divided by three inside of decimal math this is just the same as point three three three three three forever and ever repeating well point one in binary is very similar to you know one divided by 3 in decimal it's an infinitely repeating number same thing with 0.2 and a computer can't represent an infinitely repeating number that's impossible to represent so they represent it about as far out as they possibly can for both of them within the limits of storage and then they do the actual operation and then try to convert that back into a decimal number but when you take a value like point three three three three three three three you know you only have so many point threes you can do and when you try to add that to you know point six six six six six six six six six six six six six six instead of decimal you're not going gonna quite get one even though if you do one divided by three plus you know two divided by three that will always give you one because you know that's going to be one but when you try to convert it to a decimal format like this they just repeat forever that's the same thing with point one and point two they repeat forever inside a binary so when you try to add them together you're never going to get the perfectly accurate answer and that's the problem with computers and floating point numbers like this is when you do the conversion between decimal and binary and back to decimal you're going to have some rounding errors i mean as you can see with this it's very minor and a lot of times when you do operations these numbers are going to come out exactly as you would expect like let's just come in here and we'll just change this to 0.4 now you can see we get 0.5 exactly but the thing to keep in mind is that you're not always going to get the exact same answer because of this conversion factor which is why if you're doing things where you're taking you know an if check and you're saying you know if variable x is equal to the value like 0.35 this is generally a bad idea because this floating point arithmetic could be 0.35 or it could be 0.3506 like this and you don't really know that so what you need to do instead is if you're like constantly adding values you want to check when x gets up to the value of 0.35 instead of doing an equal check do like a greater than equal to check right here this would be what you would want to do instead if like inside of a loop you're just adding values to x over and over and over again you want to check to see if it's greater than or equal to 0.35 because based on that rounding you could get a slightly higher value than 0.35 or a slightly lower value than 0.35 another thing that you could do is you could say you know what i want to check to see if it's greater than or earth i'm sorry less than or equal to this 0.35005 and i want to check to see if x is greater than or equal to and we'll do 0.3499995 just some level of error right here so we can say you know what if it's in this margin of error then we're going to assume it meant to get 0.35 so we're allowing the computer to do its rounding to be slightly off and for the most part it won't be more often these types of values like usually when this floating point arithmetic is off for the example of 0.1 plus 0.2 it's off by a very very small fraction so we just need to make sure we account for the fact that these things could be off so generally if you're doing any type of check where you're checking one value equal to another and that value is a decimal number you don't ever want to really use these equal equalities because most likely this is not going to land exactly on .35 it might be slightly off now for this last topic i want to talk about a few different debugging tips that most people don't realize you can do inside of the console so let's say here we have a really long function that takes a while to run as you can see when i save this it prints out before and then it takes a little while until after prints out because this loop takes a long time just imagine this is like a slow running function and you want to see how slow this function is well one thing you could do is put a before and after and here just kind of like mentally look at how long it takes the problem with that is i mean it's very inaccurate you have to mentally look at it and it's just not a good option so instead what you can do is you can use something called console.time with console.time you just call console time when you want it to start and you give it a name of whatever you want this timer to be we're going to call this timer and then you come down when you want the timer to stop and you say time end and you give it the same name so in our case we give it the name of timer and now what happens is it tells us how long it takes between when we first call console time and when we call console time end as you can see it took 512 milliseconds for this for loop to run and do nothing essentially because it's just looping through itself a bunch of different times so using console time is a really easy way to see if you have some performance issues in your application if you notice things are running slowly what i would recommend doing is putting a console time and a console time end in between the code that you think is going to be running slowly so you put at the start of the code and at the end of the code and you see is it slow if it is then what you do is you kind of narrow down your console time so let's say for example we have a bunch of code up here and we have a bunch of code down here and we know somewhere in this code that it's slow so we put our console times at the edge like this we run it and we say okay you know what this is pretty slow so then we start moving our timer in and we say you know what what if we do our timer here and we run it and you say okay you know it is still pretty slow so let's say we move this timer up and now we save and you say okay you know it's still pretty slow and then we realize well there's only one thing left in between our timers which is this so this must be the thing that's making it slow and if for some reason you know we moved our timer all the way up here and we had some you know this code in between it we saved you went oh you know what this is still running pretty quickly so it must have been when the timer was down here earlier so it's a really good way to narrow down where the performance issues inside of your code are by using console time and counsel time end now something else i want to talk about is right here let's just say that we have some code we're saying x equals two and if x doesn't equal one then we're going to log out some type of error console log x is not one if we save you can see it prints out x is not 1. well one way we can immediately improve this is by using console.error instead of just console.log and that way it'll print it out in red letting us know this is an error or we could do console.warn if we wanted this to be a warning but in our case we want this to be an error so what we're doing is essentially asserting some value and then we're logging something out well console actually has something built in to do that it's called console.assert and what we can do is we can pass it a thing that we want to check and if this thing is false then it's going to print out whatever we want so we can say okay we want to make sure that x is equal to 1. so i want to assert that x is equal to 1 which means if x is not equal to 1 i want to log out whatever i put here which in our case is just going to be x is not 1. so now i've replaced the code right here which has this if check and the console error i've replaced it with this console cert where i'm saying i'm asserting that x is always going to be equal to one and if it's not i want to print this error out as you can see assertion failed x is not one well if x is now one you can see it doesn't print anything out at all so this is a really great way to condense that if check that we had before to just say okay assert that x is equal to one if not print out whatever we put here now the final major console thing i want to talk about is if you're consoling out an array let's say we have an array of people here we have the name kyle named john name's sally and i'm printing those people out as you can see i can see these values but it's kind of hard to compare these different values to one another so instead we can use something called console.table what this does is it takes our array and it takes all the values inside of that array and converts them into this table format so you can see we have an index zero named kyle age 25 index one we have here named john and age 33 and it's really easy to compare okay you know what we have name here we have age we can even sort these different properties if we want i'm going to sort by the age or i'm going to sort by the name here for example so it's really easy for us to be able to compare the different values and properties between all the different things inside of our array instead of doing you know this where we have just our array being printed out to us this makes it much harder to do this comparison while with this we can just you know really easily sort things compare things back and forth it's super nice now the final tip related to debugging i want to talk about is you can just type the word debugger anywhere in your code and when your code runs and hits this point this debugger point it's going to pause your script immediately and it's going to say okay we know we're right here we're paused and you know we can access variables you know i see the people variable here i can see the stack trace over on the side here i can see things such as my scope so i can see you know my scope has this people variable inside of it and in my console i even have access to all the variables at that point for example people so this is really useful for just being able to debug your code exactly where you are and if we go back to that sources tab we can actually step through our code line by line you know i'm going to step to the next line step to the next line and so on and that right there is five amazing javascript features if you enjoyed this video again i highly recommend that you check out my full javascript simplified course it'll be linked down in the description and if you get to that course within the first week of this video going live use the code early and you're going to get 20 off the course that you buy so i highly recommend you check that out as soon as possible so you don't miss out on that discount thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 115,942

Rating: 4.9260831 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, generator js, template literals js, dynamic import js, js object, wds

Id: yJDofSGTSPQ

Length: 22min 42sec (1362 seconds)

Published: Tue Apr 06 2021