Prefer const, then let - JavaScript Tutorial

- [Instructor] I've written some code using the old school var statement for my variables. But var has drawbacks, and I want to take advantage of let and const instead. I can enforce this across my code base with the eslint no var rule. With a simple string value, I can get eslint to throw errors for any var declaration. Now it's important to be thoughtful about implementing this in a large code base, because weeding out var statements can have ripple effects in some circumstances. But especially as you're starting a new project, or with a small code base, this rule can be helpful in getting off on the right foot. So in my .eslint.rc.js file, I'll add a new line in the rules section. And I'll add no-var with a value of error. I'll save that, and then over here in my js file, I suddenly have a lot of issues showing up because it's full of vars. I have few enough statements here I can do a search and replace to switch to let statements. So I'll do a command F, which is control F on Windows. And I'm going to click this arrow here, that lets me switch to replace mode in VS code. I'm going to look for var and a space, just to make sure if I have a word that starts with var or includes the letters var, that it's not also going to hit that. And I want to replace with let space. And I'll just use the Replace All button. And I'll close up that replace box. Now I'll save those changes. And I'm left with just one error. And this is flagging a re-declaration. And that's because one of the superpowers of let is that I can't re-declare a variable. And that's sloppy coding, which might make me think the variable is being instantiated here. So this error from the parser is one reason why I wanted to get away from var in the first place. I could add another eslint rule, no re-declare, if I was using var in my code. But using only let and const already ensures that I can't re-declare. Instead, I'll delete that let so this is simply a reassignment. And then I need to repeat that for the next statement. Now I'm all good, my code is error free. So I'll save that. I'll switch to my html file and go live. And in my console I get no errors. I even get a value log. Modern js also makes the const keyword available. And so far, I'm not using it. But in general, it's best to use const for any variable that I don't intend to reassign. Eslint has a rule for this as well: preferred const. With a simple string value for the rule, any variable I do reassign in my code is good to use let. But the rule catches any variable that never gets reassigned, because that's exactly what I should be declaring with const. Identifiers like functions are an obvious choice. In my eslint RC file, I'll add another line to the rules section, and add prefer-const with a value of error. I'll save that, switch back to my JavaScript. And I have one error up here, and when I hover over that, my eslint extension points out that this variable was never reassigned. So I'll change that to a const to get rid of that error. I can also see I have three functions here. I don't want those reassigned, so I'll change those all to const. And now I want to run my code again, so switching back to the browser. And now I've got an error. So this is flagging for me that I've reassigned functions to values later in my code, which is an error. That error's on line 28. So I'll scroll down, and there we down. My functions are square, double, and triple, and down here I've reassigned all of those. So I'll just go ahead and comment out these lines. Because clearly I didn't need to do that. Then I'll switch back to the browser and I'm good in that console. Everything ran and I got my value again. So scrolling back up, I'll take one more look at my declarations. Now CD ratio and EF ratio I do reassign later. But I have AB ratio up here that I don't reassign. So I'll change that to const. And then I'll run my code and I get an error on line 19 and that is telling me that I have assigned to a constant. So checking my code on line 19. This is a subtle error, but here I've used an assignment operator when I meant to compare. So this is another place where using const when you mean it can be really helpful, because that helps me realize that I made an error here. So changing that to a triple equality for comparison, change that and save it. And then back in my browser my code works. I have no errors, and I have no eslint errors in the editor, and I'm using let and const in the appropriate places which makes my code a little more bulletproof.