5 MORE Must Know JavaScript Features That Almost Nobody Knows

there are so many things in javascript to know so in this video i'm going to share with you five features that you probably don't know but could drastically change how you write code [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 to get started i first need to explain a concept that you already most likely understand and that is the idea of scoping so if we declare a variable using const for example a we've declared out here in our global scope and then we've created another variable called a with const and it's declared inside the scope of function so when we run this code of course in main prints out 2 for the value of a and in global we print out the value of 1 for a and that's just because when we declare a variable inside of a function it's inside of a new scope so if we create the variable a is essentially a brand new variable and we don't have access to this outside variable a anymore because it's overwriting the value for a here and it doesn't actually affect this outside variable because we're redeclaring a brand new variable that's essentially how scoping works the cool feature that most people don't know about is that you can actually create a scope anywhere you want it doesn't just have to be with functions or if statements and so on generally the way i think about scoping is anytime you have content in between curly braces it denotes a new scope so a function if statement and so on well one thing that you can do in javascript is just put a set of curly braces with code inside of it so i can say const a equals three and then i can just do another console log inside of here that says in brackets and now if i run this code you can see in brackets is printing out three so i've created a brand new scope using these curly braces where i can do whatever i want as if it was like a function or inside of an if statement now this may seem really niche and not that useful one place that this is incredibly useful is if you are using switch statements so let's just come in here write a simple switch statement on the value of a and inside of this switch we're going to have a case for a equal to 1. we're going to do a case for 2 and we'll do a case for 3 as well and inside here let's say result is equal to a times 2. and then we're just going to console.log result and then finally do our break statement and we're going to do a similar thing for 2. instead of 2 we're just going to do a divided by 2 and then finally for 3 we're just going to come in here and do a plus two so this top one is going to print out two this will print one and then this is going to print out a five so if we save this we're immediately going to get an error so syntax error undefined identify a result has already been declared and that's because case statements don't actually define a new scope so when we're defining this variable result it's actually being redefined down here as result and redefined down here as a result essentially we're trying to declare result three times in the same scope because our scope is between the curly braces of our switch which is all of our cases combined together this is why a lot of times if i'm creating variables inside of a case i'm going to wrap my entire case inside of curly braces just like this i'm using that curly brace trick to create a brand new scope and now this result variable is inside of its own individualized scope i can do the exact same thing here for our other two cases and now if i save you can notice we don't get any errors it prints out two if we change this to two it'll print out four because doing two times two and then finally if we have three here it's printing out five because it's three plus two so this curly brace trick is really useful because we're able to create variables inside of a case and not worry about them leaking out to all of our other cases this is why every time i create a variable in a case even if i don't plan on repeating it i always wrap that case inside of curly braces and this prevents any of those weird issues arising where we got the error that we had before now this next concept is something that i didn't actually realize was part of javascript for the longest time i always assumed it was some weird thing that people were creating custom but it's actually built into javascript and that is this in keyword right here you can use the in keyword to determine if a property is defined on an object so we have this person object here that has a name of kyle and an age of 25 and normally if you want to see if there's a name property on person you could say like person.name instead of an if and then it'll say you know it has a truthy value for name this has a few issues for example if name is an empty string an empty string technically equates to false so we're no longer getting this console log being printed out anymore since this equates to false so one way to get around that is we could say you know look if it's not equal to null then that's saying okay this has some type of value defined to it even it's an empty string but what happens if we want to just check to see if person has a name property defined we don't care what the value is whether it's null undefined empty string or string we just want to know if there is a name property so if this is undefined for example you're going to see that this right here is printing out false it's not actually going into the log same thing if we put this as null but down here this in property is always returning true and that's because person has a name property it doesn't care what the value of this property is all it cares about is does this person have this property defined on them and that is it so the only way that this will return false is if we don't have a name property then as you can see this down here is not being printed out or if we have a name property but we delete it so if we call delete person.name this is going to completely remove the name property from our person so now again you can see this console log is not being printed and that's just because name has been removed from our person if we log out our person here you can see that they only have the age property now they don't actually have that name property this is really useful in scenarios where you actually just need to check to see if the property is defined and then do some type of code like defining the default for it and not care if it's null or undefined because up here you this kind of check if the property is defined but it's no or undefined this is not going to run but down here even if you have the value or no or undefined this is still going to run so when you have those scenarios where you need to check purely does this object have this property using this in keyword is super useful and it does things that you can't do any other way now the next concept i want to talk about is tagged template literals but specifically how you can use them as a function because you're most likely familiar with how you can use tag tempo literals to inject javascript code into a string as you can see this string prints out my name is kyle and i love weightlifting this is pretty straightforward but you can actually create a function that takes in a tag template literal if you've ever done something like styled components you'll notice they have you know the syntax where you write out like div and then inside of tag tempo literals you actually write out specific code so how exactly does this work let's change this to use a function called custom and this custom function is going to take in this tags template literal and let's just come up here and define our function called custom and inside of here what we're going to do is just return i and now if we save you can see that this prints out the string high and that's because the way that tag template literals work as functions is you type in the name of the function and then immediately you start your tag template literal with your you know backtick here write it all the way out and then that's done and it's going to call this function and the nice thing is it's going to pass all the information about your tag tempo literal to the function so the first thing that's going to get passed is an array of all of your strings so if we just do a quick console.log of our strings we can see what this looks like and as you can see over here we have an array with three values the first one is my name is so it's everything before the first value the second one is and i love so it's everything between the first value and the second value and the second or the third string is empty and that's just because it's everything after the second value so all we're doing is getting the strings that come in between all of our different values starting with the one before all of our values and we finally end with the one that's after all of our values and then on top of that inside of here we get past all of our values so for example we have a name and a hobby being passed into here so we can console log our name and our hobby as well as you can see the name is kyle and the hobby is weightlifting and these variables that get passed after the fact are just all the values so our first value is first name and our second value is hobby now this may seem really unuseful but there's a lot of different ways that this could be incredibly useful the first way that i'm going to show you is just how you recreate a normal template literal and then from there we're going to modify it to make it much more useful and the first thing i want to do is just make it so that our values can be any length so we're just going to say dot values here and now if we just print out our values it's just going to be an array that contains all of our different values that way it doesn't matter how many values we pass to this it's always going to have all of them inside this array and all we need to do inside of here is just return our values and we want to reduce these values to one single string so we're going to have like a final output string we're going to have our individual value and then the index of that value and inside of this function we want to make sure we start out our value string that we're creating with just the very first string in our array because as you remember the very first string is the thing that comes before all of our values so the first thing is my name is then what we want to do is just take the current string that we have which is in our case our oops final string that's just our accumulation that we've been creating this entire time so to start this will just say my name is then we want to concatenate our current value so we're going to put our value on here and then finally we want to get our next string so we're going to say strings of index plus 1. and essentially what this is going to do is exactly the same thing as if you just wrote out a normal tag template literal and if we save we're getting string is not defined make sure this says strings instead of string and now it says my name is kyle and i love late listing and essentially the way this works is the first iteration our final string here is just my name is and then it just adds on the value and strings index one so it's going to say my name is i'll and i love and then the second time it goes through here the final string is going to be that the value is going to be our hobby and then the next string is just going to be that empty string at the end which is why we get our full string being returned so not very useful at all on its own but we can take this a step further let's say instead of calling this custom we're going to call this bold and what this is going to do is it's going to wrap all of our values in a bold tag so we can come in here and say that we want to wrap these inside of a bold tag we're just going to use b in our case or actually make this more semantic we're going to use the strong tag so we can come in here change all these to the strong take and now when we save you can see that this function that we've created that takes in our tag temp literal is wrapping all of our values in our case kyle and weightlifting inside of a strong tag so if we wanted to insert this into an html page it's immediately going to bold all of those for us on top of that we can do so much more we don't even have to deal with just strings let's say that i get this result here and i'm just going to set it to a variable string and i want to call this query all and essentially what this is going to do is just going to say return document.queryselector all and i want to return our string i just want to remove all these extra strong tags so essentially it's just going to be a normal string that we've created and down here i can say that i want to query all and i want to query let's say for example all divs and now if i save this you can see i get a node list that's empty because there's no divs on the page if i go to my index html and i add in a really simple div and save you can see that now is being returned from this string template literal function we've created it's querying all the different divs on our page so these functions while they do have niche uses something like styled components is a great use case for them they are incredibly useful and powerful what they do so when you have a specific use case for them they're really really useful also if you want to learn even more about this i have an entire blog article on it i'll link down in the description below for you the next concept i want to cover is generator functions which are something i used to think are completely useless but since i've realized there are tons of use cases for them so a generator function is simply a function that allows you to step through it one step at a time calling next and continuing getting the next value until the generator function finishes so it allows you to do code asynchronously essentially since you don't need to complete the entire function as soon as you call it so to create a generator function all you do is use the function keyword put a star afterwards and this gives you a generator function you can call it whatever you want we're just calling this generator function and inside of here all you want to do is use the yield keyword and then the value you want to yield so in our case we're yielding one two and three and the way that i think of these yield keywords is essentially the same as return but instead of actually ending the execution and returning from our function it's just returning this value 1 and then pausing and waiting until we want to get the next value then it's going to run all this code and get the next value which is yield 2 run all that code and get the next value which is yield 3 and so on and in order to use the generator all you do is call your generator function and it returns to a new object a generator object and this object has the function next on it and by calling next it essentially gets the next value for us so if we just comment out this code down here you're going to notice if we call our generator function it doesn't actually do anything because calling a generator function doesn't actually run any of this code all it does is create a new object that has all of this code inside of it essentially and then when we call next what it does is it runs all the code from the beginning of our function all the way to the first yield and it returns the value in our yield which in our case is one as you can see it runs before one and then returns our value which is one and you'll notice something interesting the way this is formatted is actually an object the object has a value property which is whatever you return from yield and it has a done property which is false if there's more code to be run and true if there's no more code to be run so if we call next again you're going to see it says before one and then it prints out whatever we yield because we're printing it out down here then when we call next again it's running all the code here after yield one so it says after one before two and then it prints out the value of two because we're printing that out down here if we uncomment the rest of these you can see we have before one then the value after one before two then the value after two before three then the value then after three and then finally on the fourth time that we call this we get this value undefined and we get done of true because there's no more code left to be run because if we just go back to where we had three next you can see we get all the way to this yield here but we still have more code to run so when we call next this fourth time here it runs this after three code and then it prints us out a value of undefined because there's no more yields left so the value is undefined and done is true because our generator has finished now this is great if you need to be able to step through things one at a time but generally it's not quite as useful in a scenario like this this is very contrived so let's write out a really simple example of how this could be super useful we're going to create an id generator this id generator is going to generate as a brand new auto incrementing id so we're going to start our id at one we'll say let id equal one then we're just going to create an infinite loop and this normally is something you would think to never do but since a generator stops itself after a hitch yield essentially if we put yield in this loop it's only going to run one iteration of this loop every time we call next so if we yield our id and then just take our id and add one to it and come down here and we create our id generator by calling next we're just going to keep getting an id with one greater value as you can see we get value one two three four and since we're in an infinite loop we're never going to reach the end so done here is never going to be set to true so with this very simple little bit of code we created a function that will automatically auto increment an id for us every single time that we call next which is incredibly useful now this is only one small use case for generators but i'm sure you could think of many other places this is useful and again if you want to learn more about this i have a full blog article about it i'll link down in the description below now the final thing i want to talk about is actually how you can handle imports dynamically so you can only import code as soon as you need it you're probably used to seeing imports like this where you have import then you know you're the name of the thing from this particular file our case is modular.js all it does is have a function that logs out this is in the module in our script we're importing that and we're calling that function so as you can see we're getting printed out in main file which is just this first line here and then we're getting printed out this is in the module because it's coming from our module.js if you're unfamiliar with this module syntax check out a full video i have on it linked in the cards and description down below but if you are already familiar with it something that you may not realize you can do is actually dynamic module imports that means that you can import code only when you actually need it so let's just say we have here an if statement and it's going to say you know if some value is true then we're going to run some code and this is going to be importing our module for us now you may think okay let's just put our code like this where we have our import inside of our true statement but this actually isn't going to do anything you know we're going to get errors because we can't put an import inside of an if statement but what we can do is use a function called import and this import function allows us to do the same thing as a normal input so we can just put in our module here that we want to import and this is going to be a promise so we could just say then and this is going to be the result from our module which in our case is the function print module then we can just move that function up in here and actually use it and now if we save you're going to notice again we get an error and that's because this dot then returns to us an actual module object this module object contains a property for the default export called default so if we wanted we could just destructure this and we could say that the default is going to be equal to print module then essentially what we've done is the exact same thing as what we had before let's just make sure we wrap this inside of parentheses just like that now if we save you can see we can print out module and the nice thing is we can dynamically import this code so for example if we don't need this we can just say if false and it's never going to run this import statement and on top of that we could set this up to an event listener so we could say document dot add event listener on click for example and inside of here if we click then what we want to do is actually import this module and do all the code for that module so we can make sure we only import modules as soon as we need them so if you have a massive module that's only needed in specific scenarios and it's slowing down your download speed you can use a dynamic import like this to only load that module as soon as it's actually needed on the page so you don't have to burden people with huge downloads immediately if they're never going to use that feature another nice thing that you could do is you could change this to be asynchronous i think this is just a little bit easier and then instead of using this dot then syntax we can essentially just say here const this equals a weight of our import and then we don't have to worry about any of this.then stuff we don't have to worry about nesting and we get the exact same result so if i just bring over the document that we're working in and i click on it you're going to see it loads in that module because every time i click i want to load in that module and those are five of my favorite unknown javascript features if you enjoyed this video make sure to check out part one i'll link it over here and subscribe to the channel for more videos just like this thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 117,455

Rating: 4.9480348 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: WIP1czLm3CY

Length: 18min 4sec (1084 seconds)

Published: Tue Mar 09 2021