Enhancing Performance with Let and Const in ES6
Enhancing Performance with Let and Const in ES6
In this tutorial, you’ll master the art of optimizing performance in JavaScript by leveraging ES6 features like let and const. These modern variable declarations offer distinct advantages over the traditional var, particularly in scoped memory management and preventing accidental overwrites.
Key Topics Covered:
-
The Power of
letandconst- Learn why
letandconstprovide better scoping thanvar, limiting variables to the block where they are declared. This reduces memory usage and prevents bugs. - Understand how constants (
const) help manage immutability, ensuring variables remain unchanged once declared.
- Learn why
-
Practical Examples in React
- Follow step-by-step examples where
letandconstare used to build a dynamic navigation component with React and Bootstrap. - See how scoping variables in React components ensures modularity and performance.
- Follow step-by-step examples where
-
Scoped Variables for Improved Performance
- Discover why limiting variable scope enhances memory efficiency and reduces global pollution.
- Learn the impact of scoped variables on Babel and Webpack-transpiled applications.
-
Error Prevention and Readability
- Using
consteliminates errors from unintentional reassignment, making your code more predictable and easier to debug. - The structured use of
letandconstenhances code readability and maintainability.
- Using
This lecture demonstrates how modern JavaScript not only boosts application performance but also improves developer workflow by minimizing bugs and improving clarity.
Why Take the Full Course?
This is just the beginning of exploring performance enhancements in React with ES6! By enrolling in the full course, you'll unlock deeper insights into variable management, string optimizations, and advanced performance tips tailored for React developers. Start writing cleaner, faster, and more efficient code today! 🚀
Video Transcript
00:00Welcome to a brand new section where we're finally
00:03really focused on performance.
00:05And in this section we're gonna continue down our
00:07conversation about variables, let cons,
00:10and you'll really comprehend their effect on performance
00:13and how and where to use them.
00:15We're also gonna talk about definition strategies in general
00:17for variables and look into string optimization,
00:21which all these are really critical foundations
00:23to creating highly performing applications.
00:26So we're gonna cover in this section really
00:28the variables stuff.
00:29And once we're done with all these stuff,
00:31I'm gonna give you my basic rules of optimization
00:34where I focus on when I'm trying to optimize code.
00:37This is a really brilliant section.
00:39So let's jump right into the first lecture
00:41where we're gonna take a look at enhancing our performance
00:45by using Let and cons instead of VARs in ES six,
00:48where we're gonna take a look at
00:51why variables are performance killers
00:53and why you want to focus on giving your variables the
00:57smallest scope that you can have with
00:59that you achieve using constant Lets
01:01and beyond that, oso,
01:02you're gonna learn about the importance of changeability.
01:05Whenever a variable could change, that means it needs
01:08to have memory allocated for that change.
01:10Beyond that, it makes it oso easier for you
01:12to create bugs in your application.
01:14So by using constants, you're gonna solve both
01:17a usability problem in coding
01:19and also a error management problem in coding
01:22and also improve your memory.
01:24So it's a, it's a triple win, it's a whammy.
01:27So let's jump right into it and let's see why
01:28and how to work with the new let and cons.
01:35All righty, let's get visual as we process
01:38our course about performance.
01:41So to do that, I'm gonna go ahead
01:42and I'm gonna start building up a navigational
01:46component in React.
01:48And I'm gonna use the Bootstrap, uh, version four Alpha
01:51of Bootstrap, really just the CSS itself.
01:54Literally what I want
01:55to do is I'm just gonna take this navigational element
01:58and for now I'm just gonna go ahead and place it in my code.
02:01I'm just gonna go ahead into my app itself,
02:04where I already have in that app, quite a lot of code
02:06with it among it some transitions.
02:08Let me just go ahead and wrap up this whole item
02:11that is being returned into a diviv, that all
02:15of it will be a div.
02:16So I could then add into it also a menu that would sit
02:19above everything and will not animate.
02:22So I'm gonna go ahead and add that. Oops, what did I do?
02:25Lemme go ahead and I didn't do copy, so let me just copy
02:28that and let's go right in there and paste it.
02:33Okay, so we have a navigational element
02:35and let me just break lines here
02:36so we could see it more vividly.
02:39So we have your navigational item
02:41that has been added into our build.
02:44Now, once I've done that, because I have hot refreshes in my
02:47web Webpack config that I set it to be true
02:50for our dev server, 'cause I am running right now our
02:53Webpack dev server by default
02:55because I set it in line to be true.
02:57Then we should have, now
02:59Once we've updated it, we should get our menu sitting up
03:02above here, although we already have a problem.
03:04And that problem is, is our menu is not formatted correctly
03:08and the main reason why it's not formatted is
03:11because we don't have all of the CSS that is needed
03:13to build out the menu.
03:15Not all of the CSS that we need is really there,
03:19but we're gonna solve that right away.
03:21And I'm gonna go ahead into my bootstrap folder inside
03:24of my source and I'm gonna create a new file,
03:26which I'm gonna call navigation.
03:28The reason why I'm gonna call it navigation js is
03:31because not only are nav be there,
03:33but a few other items as well that relate to navigation.
03:38By the way, did I save it in the right folder? Yep, I did.
03:41Beautiful. Okay, so now
03:42that I have my file up on our server, the next step
03:46that I want to do is go ahead
03:47and start building out our navigation.
03:50To do that, let me just go to one
03:52of our more simple elements such as our button here
03:55and I'm just gonna copy it
03:56and we'll walk through what's inside there.
03:58So first of all, in the first step we're loading up the
04:00React library and the second step, I'm loading up a method
04:04or a function more accurately, which is called classify
04:07that sits inside of our utility package inside of Bootstrap.
04:11Now what classify does, without going into the vernacular
04:14of what's going on inside of here, it replaces our content
04:18and adds the key.
04:19Basically making sure that
04:21whenever we're building out our component,
04:23and for example if our app itself,
04:25if I'm sending in my app a button
04:28and I put dash primary, it will automatically add button
04:33and then space button, primary button, LG button block,
04:37and all these stuff will dynamically happen using our util
04:40and you're more than welcome to
04:41explore it and understand it.
04:42But we do that in our UI title.
04:44But let's assume that it works where we just have
04:46to send inside a key.
04:48So in our case, we just have to send inside a key.
04:50In this case the key itself would be nav
04:54and then the value would definitely be still the properties
04:56that are sent in the props.
04:58And then what would happen is automatically we would,
05:01we would retrieve back a nav
05:03and also retrieve back the class names.
05:05Okay, so first of all, let me just delete all this extra
05:07stuff here that we don't need
05:09'cause we're gonna build it out in a moment.
05:11But this item will, I'll, I'll go ahead
05:13and delete also this.
05:15We don't need this. All we're really doing here is we're
05:17gonna send in our into classify the method
05:20that we're loading in the nav,
05:22which would then automatically add nav
05:24anytime, any place where it's missing.
05:26Okay, beautiful. Now that is the first item in my render.
05:30And notice how I'm already using cons
05:31because I'm thinking in a e ES six world
05:35and I'm saying okay, this is not a variable.
05:38Once it's defined, it's never changing.
05:40And if it never changes, we'll always set it in cons.
05:42One of the basic rules that I usually say
05:45to these things are also, by the way, is always use a cons.
05:49And whenever you have to change something,
05:50then change it into ette,
05:52which we'll talk about in just a second.
05:54But never use VARs generally speaking.
05:56And lemme just go line by line.
05:58We did line one, line two and we kind of jumped around.
06:00Line three is I wanna load up some SaaS files,
06:03but in this case I'm gonna call it navigation SaaS.
06:07And lemme just save this and open up a new file.
06:09And what I'm gonna go ahead and call, call it navigation, do
06:14SaaS SCSS more accurately
06:17and I'm gonna save it into the same folder.
06:19And by the way, what I'm gonna do here is I'm just gonna go
06:22into my button SAS and let me just copy this,
06:25but I'm gonna change it a little bit up.
06:27So first of all, for our navigation, the first item
06:29that I'm gonna need is not buttons,
06:31but actually the first item
06:33that I'm gonna need is our navigational element itself.
06:37Now our navigational element itself, if you open up
06:40and look into the directory, is called nav.
06:42So that is in the root folder of our component
06:46of the bootstrap component,
06:47which we downloaded has a subfolder called sas.
06:50In it it has files
06:52and among them is the underscore nav.
06:55Do SaaS. Now in our case, just by typing your uh uh web pack
07:00and um, SaaS is smart enough to realize that
07:03whenever you're typing the stat, the file that it wants,
07:05beautiful, okay, so that's step one.
07:06Um, importing the right CSS elements.
07:09Alright, so the next step is let's go.
07:11Let's take a deeper look into talking about performance.
07:15And as you are probably aware of scope,
07:17scope is a big factor of performance.
07:20Generally speaking, any navig, any component
07:23that you really load up when you're using Webpack
07:26and babble is automatically removed from a global
07:29scale, global space.
07:31So literally saying if I go ahead and sit here a VAR
07:34and say something
07:35and put here a value, it will not go into the global scope
07:39where it's gonna go, it's gonna go into the scope
07:41of this component of navigation,
07:42which technically will not be visible to anything
07:45but this C component or anything
07:46but the component that are living within this module.
07:50Now, generally speaking, if you don't need it,
07:53something in the global scope,
07:54don't put it in the global scope.
07:55The idea itself is very simple.
07:57Always put it to the closest place where you need it.
07:59And if you need it in other places, then take a step above,
08:02for example, in the class level.
08:04And if it needs to be used by a multiple classes only,
08:07then you would put it in this global space.
08:09And you don't have to worry about global
08:11because there is no globals.
08:12Once you put something inside of your,
08:14because we're wrapping things with webpac
08:16and with yes, uh, yes, six with Babel,
08:19what we're actually doing is we're never putting anything in
08:21the global scope so we don't have
08:23to worry about global scope generally speaking.
08:26But the lower the place is, the closer it is to
08:30where you need to use it, the less memory
08:31that is need to needed to be used.
08:33So for example, because our cons is defined inside
08:36of line 10 and I know it's never gonna change,
08:38so I'm putting it as a cons
08:39and if I ever need to change it,
08:41only then I will turn it into a alet.
08:44Okay? Now I would never turn something into a var.
08:47A VAR is too general, general Alet will,
08:50will alet and a cons.
08:52The big difference between them
08:53and a regular variable is that they're not defined
08:57by the scope of the this.
08:58They're actually defined by one simple thing,
09:01they're defined by the enclosure that they're in.
09:04So technically speaking, if I wrap this within an enclosure
09:07and I close this up in some such as inside of an if, then
09:11inside of this, if this cons will live, but it won't.
09:13As soon as that if condition is done,
09:15it will be deleted from memory which is really, really good
09:18for our application.
09:20So generally speaking, whenever you have a constant,
09:22you would use a cons Whenever you using a something
09:25that is a variable you will use,
09:27let forget about VAR doesn't exist anymore
09:29and don't worry about the fact that it's compiled down
09:32to ES five and actually Avar is being used.
09:35'cause in any other scenario, any other application
09:37that actually could use E es six things such
09:40as on your server for example,
09:41or on a mobile application that supports ES six
09:45or specific browsers you're gonna be working with,
09:46then this is gonna make sure
09:48that your application will use only the memory it
09:50needs for a variable.
09:52So in this case, if it's a concept,
09:53we'll only use the memory needed for a string
09:55'cause it knows exactly that this is
09:57gonna end up as a string.
09:58So if it's a var, it's gonna be built up to be able
10:02to be dynamic, adding more memory
10:04usage and we'll never use a var.
10:05'cause VAR will have a bigger scope always
10:07and we want to be as explicit as we can,
10:09which we could only do that with cons and with lead.
10:13So let's go ahead and just complete building out our item
10:16here and really just the basics, basics of our item.
10:19What we wanna do is we wanna go ahead
10:21and return back a nav element.
10:24And for our nav element,
10:25what I'm gonna go ahead is I'm gonna make sure that this
10:29props children is gonna be sent and that's the first item.
10:32And the secondary, I wanna make sure
10:34that my class name is defined
10:37and for my class name I'm gonna send in our constant
10:40that has just been created right inside there.
10:43So there you go. That is the most basic basic construct
10:46for our uh, class.
10:47And I'm gonna go ahead and make sure
10:48that this is called a nav and it's not gonna be a default
10:51because we're gonna have multiple navigational elements
10:54living inside of this item.
10:56So let me just go ahead and delete some extra empty spaces
10:59there that are not needed.
11:00And the next step that I want to do is I want to go ahead
11:03and actually use this.
11:04So let me go into our hour, hour, hour application
11:08and let me find our navigational element that we added here.
11:11And I'm gonna go ahead and call it nav
11:13with an uppercase instead of a lowercase.
11:16And I'm gonna make sure also that all my calls are to uh,
11:19class name and not to class
11:22because that is a no-no in react
11:26or accurately classes, a reserve name in the ES six.
11:29So we can't use it. I had to make sure that I change it
11:31before we actually test anything out.
11:33Really, by the way, you weren't getting errors only
11:36because we were using Babel, which Babel made sure
11:38that it would hide those errors and treat it
11:40because we were using the Babel transcriber for react.
11:44So it basically ignores it not as an error.
11:47Last but not least, before we actually test this out,
11:49we also want to go ahead
11:50and import that navigational element.
11:53So lemme just go ahead and do that.
11:54And I want to import our nav, which is not default,
11:58so I need to wrap it inside of that, those, uh,
12:01curly brackets and go ahead and call the navigation.
12:04So it's gonna fetch our nav from the navigation
12:07and if I go ahead and save this,
12:09go back into my application, our,
12:12our linkages you could see are just slightly better,
12:15are slightly improving
12:16and they're automatically refreshing without me needing
12:19to test to refresh, to just validate
12:22that they're automatically refreshing.
12:23And go ahead and let's type here.
12:25This is active and if I go ahead and save this
12:28and go back into my browser, we should see this is active.
12:32And there we go. Our first real
12:34lecture about visual performance enhancements
12:40in this lecture, I hope I convinced you to start using cons
12:43and consonance for that matter as your default choice.
12:47Whenever you're creating a new element that you need
12:50to reference to, whenever it needs to be something
12:52that is a variable, then you'll only use lead hopefully
12:55and you understood the differences with scope.
12:58In the next lecture, we'll continue down our path as we'll.
13:01Take a look at why
13:02and really seal that deal
13:04of why you should only use KS whenever you need it.
13:07And if you don't need it, then just don't use it at all.
13:10Again, talking about performance.