And a reference error will be thrown if an attempt to log it is made. With the same code using var, you can see that the variable is accessible outside of the block. And const follows the same behavior as let for scoping. Let and const have subtle differences. So let's talk about those here. Const is short for constant and only allows a variable to bet set at declaration. That means you cannot declare a const variable without assigning it. It also means that you can't reassign a const variable once it has been declared and assigned.
You can however modify the value that has been assigned to a const variable like adding or changing a property on an object or value in an array. Let allows you to declare a variable without assignment, and then reassign as many times as you would like. So these are the key differences between let and const. Now let's try out some let and const variables in our demo project. Open up the file fluxGen.js in our lib folder. This file exports a helper function that generates random quotes based on some variables.
At the top of this file we have a few variables that are declared at the beginning of their scope. Output is an array, so we will expect it to be modified and filled with values. The next variable current is reassigned with a value with each iteration of the for loop and then inserted into the array. Change is not assigned to and declared, but is used to calculate the change in random numbers. We want to convert each of these variables to either let or const. Can you figure out which ones we should use? Output should definitely be a const since it is never reassigned.
Go ahead and change var to const. Current will be reassigned multiple times so that should be a let. Change the comma from the output assignment to a semicolon. And then before current use the let keyword to declare it. And here we see one of the unfortunate side effects of the two variable keywords. Although they allow our code to be more expressive and error resistant, it can be more verbose when declaring variables of different types. It's not the worst thing in the world, but it does feel a little less clean to me than a single declarator.
The change variable doesn't need to be scoped to the function since it's only used inside the for loop. So let's change where we're declaring that variable. Go ahead and remove change, and in the current declaration and assign it with a semicolon. And then at the top of the for loop, use the let keyword and declare the variable change. Now on line seven we are assigning a value to the change variable. So we can bring line six and line seven together. Removing the semicolon, and now we have a single assignment and declaration for our change variable.
Finally on line five, we're using var in our for loop. We can change that to let as it will be updated in each iteration of the for loop. And now this file is complete. We're using let and const for variables, and each variable has a much more specific scope for each one.
- Using arrow functions
- Using default parameters
- Reviewing the class structure in ES6
- Assigning variables with let and const
- Array destructuring and object destructuring
- Replacing callbacks with promises
- Keeping values unique with Set
- Dropping the prototype with Map
- Working with generators
- Using yield with arguments