JavaScript: From First Steps to Professional

var vs let

Anjana Vakil

Anjana Vakil

Software Engineer & Educator
JavaScript: From First Steps to Professional

Check out a free preview of the full JavaScript: From First Steps to Professional course

The "var vs let" Lesson is part of the full, JavaScript: From First Steps to Professional course featured in this preview video. Here's what you'd learn in this lesson:

Anjana discusses the differences between the var and let keywords. The var statement declares a function-scoped or globally-scoped variable while the let declaration declares a block-scoped local variable.


Transcript from the "var vs let" Lesson

>> We haven't talked too much. We mentioned briefly another way to declare variables that's not let or const and it is the key word, var. So, var is another way that I can declare variables in JavaScript. And var has different scoping rules than let or const. We're not really gonna get into too much of the intricacies of var and how it works and how to use it, because in general, in our code, we should be moving towards always using either let or const because var does some unexpected things.

And let and const are newer types of declaring variables, newer keywords let's say for declaring variables, that introduce a new scope restriction around when those variables are gonna be in play, compared to var. So var should be something that we're comfortable reading because we're gonna still find it a lot in examples, in code that we find around the Web, other people's code, that sort of thing.

But we're not going to have much reason to wanna declare new variables in our code using var. This is to say when it comes to mutability, var variables are re-assignable just like let variables. So newVariable = goodbye, is totally valid in var variables the same as it would be with let.

Now, when it comes to functions we said that like for example let variables because we can reassign them we can mess with them inside of our functions. So, function mess with, we can have now setting, new variable to messed. So, now if I call and just to check, so new variable once again was goodbye.

Now, if I call mess with and I check new variable again, it's been messed. So it works similar to let, in function scope. Now, what I haven't talked about yet, is there is another way to create a scope in JavaScript. There's a couple of ways, but one of the other ways that we're gonna run into later is what's called block scope.

So what we've been looking at, the examples we've been looking at with bankruptcy and the planets and all this stuff, this is creating new scopes as function scopes where when we create a function, we get a new scope in the function body. Block scope is another way that we can declare scopes in JavaScript and it's using our friends the curly braces.

And so, in JavaScript there is a difference between var and let when it comes to how they behave within blocks So, for example, when I say new variable equals more mess here inside of a block, another thing with var is that it doesn't really matter if you redeclare the same variable over and over again whereas let works differently.

So let's say I'm gonna do a letvariable = original value and then within some curly braces I'm gonna do let letvariable = new, Let behaves differently. So, what happened here is that inside of the curly braces I created a new scope as far as let is concerned, but not as far as var is concerned.

So that is one difference between var and let. And const also has what is called block scoping like let does. But because we're not usually reassigning const variables where we can't ever reassign const variables, it doesn't trip us up as much. But with let because we can reassign, let, within a block scope and get a new variable, it's essentially, let's go back to our whiteboard, it's essentially the same thing as in our planets example, were we had a global, what did we call it?

Let variable that pointed to some string original, I think we called it, And then when we created our curly braces that gave us a new scope, that's called a block scope that doesn't have a name, or anything, just it was curly braces, and in there we created a different let variable, which pointed to something else, The same way that we had our planets in our function scope before.

So now we have two different variables in two different scopes. And so when we asked for the value outside of the curly braces, when we asked for let variable JavaScript said, okay, I found this let variable in my global scope following the arrow original value. With var when I had the var variable out here, I can't remember what we called it, and it was pointing to something, let's say original, inside of the blocks even though I use that var keyword again, we didn't create a new variable.

Instead what we did is we looked up the old var variable in the outer scope. We gave it a new arrow Pointing to a new value. And we actually change the value of the variable in the global scope. So with respect to functions var and let work pretty similarly in terms of they both behave with the new function scope.

But with respect to block scope in the curly braces, which is gonna come up a little bit later when we have things like loops, for example, or IF statements, which we're gonna look at later, in those cases the behavior of let and var variables is different, they have different scoping rules.

So, there might be some case in the future in your JavaScript adventures, where you're, no, you know what? I really do want a var variable here, because I want that lack of block scoping that var variables give me. But I think the chances of that happening are pretty slim.

And the chances of, oops, wait, what do you mean it's actually didn't declare a new variable inside the block it actually used the old variable. And, no, now, my value has changed I didn't expect it to change, that chances of that happening are way higher in my experience.

So that's why in general, I've been saying, think about let and const as being the way to declare variables. And var as being like an archaic JavaScript fact of history that you might see around sometimes like markings carved into the wall of a cave that behaves differently in certain situations.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now