Learn JavaScript ES6: var vs let

Learn JavaScript ES6: var vs let

Written by Charles Vines, Jr. on May 5th, 2021 Views Report Post

Intro

As a self taught developer there are thousands of resources guaranteeing that you will learn how to code work at google and you will become the next tony stark. But if you have gone through this process you will know that it doesn't necessarily work the way that these blog posts or advertisements make it out to be. I am not saying these resources don't work because I believe that you can literally learn any way imaginable. However, if you want something to work and stick then you need to stick to one particular medium of your choosing and then you must actively consume it. What do I mean by that?

I mean that there is much more to learning how to code than simply following a tutorial copying everything word for word then taking that tutorial project and shopping it out to potential employers or clients. You need repetition. You need a deep understanding of the fundamentals. You need challenge to help reinforce these concepts. And this is why I am starting this blog series.

What am I doing?

I am going through the free code camp curriculum and I am working through each problem and bringing my thoughts and understanding behind each idea to this blog. This can help some people also working through the curriculum, but it is also me practicing what I preach. Sometimes I may post one algorithm. Sometimes I will post up topics that were brought forth and could use some more explanation and research. Ultimately though I want each of these concepts to be learned like the back of my hand. So with all of that being said this part of the series source material will be in the JavaScript Algorithms and Data Structures section of FCC. With that long explanation out the way lets jump into var vs let.

Issue with var

The biggest issues with declaring variables with the var keyword is simply that while you are coding (especially if you are working on a large project) you can overwrite variable declarations without any error or prompt letting you know that a particular variable is being used. Lets take a look at this example.

var girlfriend = 'Gina';
var girlfriend = 'Stacy';
console.log(girlfriend);

If you look at the console display the string will print Stacy.

Now in life if you claim to have two girlfriends there would probably be some issues right. Well when using the var keyword your original bae has been overwritten to Stacy. Now if you are working on a small project this may not be an issue. You can see simply where you went wrong declaring a variable. But when you have 1000 lines of code it may be hard to find exactly where you went wrong and how you ended up living a double life with your secret family(of course that's none of my business). We want to be prompted when we already used a keyword and to know exactly where the issue starts saving use time and money debugging. This is where let comes in.

"let" there be a new variable

The let keyword was created in ES6 to solve some of these var keyword issues. Like our code prior we are going to replace var with the let keyword like so.

let girlfriend = 'Gina';
let girlfriend = 'Stacy';
console.log(girlfriend);

When you check the console there will be an error as a result to your two timing ways. The browser will say umm I thought you were with Gina? I saw your pics together on IG. This might seem like a small issue but believe me when you are working on a large scale project just proper naming of variables prevents you from pulling your hair out when debugging time comes.

How to prevent keyword errors

Using the let keyword is only step one to making sure that you don't have any variable naming issues. Another way that I highly recommend is making sure that you name your variables something meaningful. So instead of using girlfriend over and over because lets be a little more specific.

let myBoo = 'Gina';
let sideChick = 'Stacy';

By naming your variables something meaningful it makes it much more difficult for you to accidentally use that variable for something else. But at the end of the day even though you have proper variable naming you still ain't shit so Gina

let aRealOne = 'CJ';
let newBoo = 'Gina'

function callMe( ) {
	let stealYoGirl = `${newBoo} come holla at ${aRealOne}`

	console.log(stealYoGirl);
}

Comments (0)