Using the let keyword - JavaScript Tutorial

- [Instructor] In earlier versions of JavaScript, there was only one way to create a variable, and that was to use the var keyword. So I have an HTML document set up here. I have added a script tag, and I'm just going to place some JavaScript code directly there in the script tag. So I'm going to create a variable called topic, set it equal to JavaScript, and log it. Now, inside of the script tag, using this topic variable, I'm going to go ahead and create a loop. So if the topic exists, we're going to reset the value of this topic to ECMAScript. And then we're going to try to look at the value of this topic inside of the block. And then outside of the block, it's called the global, so we'll try to log that value too. So you might think that because we're inside of a loop, because we're inside of a block scope, we haven't changed the global, and the truth is we have. We have reset the value of topic here on line 12, and we've overwritten the value. So instead of var topic, we're going to say let topic and set that equal to ECMAScript. Notice now that the topic has block scope. In other words, inside of this if statement, the value of topic is ECMAScript. Outside of the block in the global scope, it's JavaScript. Let's extend this a little bit, and we're going to create some elements on the page. So we're going to create some dom elements using JavaScript. So we'll create a variable called div, and then we'll create one called box that will be equal to document.getElementById box, so we're going to select that element. Now, inside of our HTML, we want to create a div with an ID of box, so that that can be selected. Now we're going to create a loop. And this for loop, we're going to use to create a bunch of divs. So we're going to create five different div elements, and we're going to add them to the dom. So for var, i equals zero, i is less than five, so whenever i is less than five, we want to keep iterating through the array. And then i plus plus, meaning we want to increment the value of i every time we iterate through this loop. All right, so here on line 14, we're going to set the div equal to document.createElement div. We also want to add an on click handler to our div, so we'll set this equal to a function. Every time we click on one of these div elements, we want to capture the value of i, so we want to take a look at whatever the value of i is for this particular box. And then finally, we want to make sure that the divs are appended to our box element. So there we go. So the next thing I want to do is let me close the console really quick. I want to add some style, because we aren't seeing these elements appear yet. So we can go ahead and add a selector for box. Just for the sake of looking halfway decent, we're going to add some flex box, and we're going to justify the content with space around. So there's a little bit of space around each of these elements. We then are going to create a selector for the box divs, giving them a height, a width, and a background color. Okay, so now if we refresh this, we should see those purple boxes appearing, and remember, I have that on click handler and I want to see what the value of i is every time I click one of these boxes. So if I click on the third one here, it says five, five. All of them are saying five, which is not what we want. We want to know the right index for each of these elements. So the way that I can fix this is fairly straightforward. I can just replace var with let inside of the loop. And now we're capturing the correct elements when we click on each one of these boxes. So this is pretty cool. Let is helping us enforce block scoping in JavaScript, which isn't something that existed before this keyword existed without having to do a lot of workarounds and scoping protection to make that possible. Let will make that possible right out of the box. No pun intended.