DEV Community

loading...
Cover image for Var, Let, and Const...What's The Difference?

Var, Let, and Const...What's The Difference?

twkirkpatrick profile image Tanner Kirkpatrick ・3 min read

So if you're a JavaScript beginner you might be wondering, what is the difference between var, let and const...and why does it matter? They are essentially all the same, with a few different quirks. Var, let, and const are all keywords for declaring a JavaScript variable. Since the inception of JavaScript, var has been the primary method for declaring a variable, until let and const came around with ES6 in 2015.

First, let me begin by explaining the technicalities of each keyword.

var

var is function scoped

If you're not familiar with the JavaScript use of the word scope, it refers to the context of the codeblock you're in, which determines the accessibility of certain variables. If your variable is declared outside of a function, it is globally scoped, meaning it is accessible anywhere in your code. In the case of var, it is function scoped. Refer to the example below.
Alt Text
In this example, since x is declared within a function, it can only be accessed inside of said function.

var can be re-assigned AND re-declared

Alt Text
var can be re-assigned and even re-declared without throwing an error. You might be thinking that this leads to more flexibility within your codebase, but the truth is, it can lead to issues. Since var is able to be re-declared, there's a possibility you will completely forget you declared a certain variable, and accidentally override it later on. In a small application, you will most likely be able to avoid this. However, as your codebase gets larger, best practice is to use let in place of var wherever you can.

So what about let and const?

let and const

let and const behave in very similar ways, with one major distinction. Let's start with the similarities.

They are block scoped

With let and const, variables are able to be accessed only within the scope of the block that they live in. So you might ask, what constitutes a block? A block is anything surrounded by a pair of {}(ie. For loop, if statement, etc). Refer to the example below.
Alt Text
In this example, the variable x is declared inside of the block scope of the function, which makes it accessible inside of that entire function. However, the variable y is declared inside of the block scope of the if statement, making it accessible only within that statement, even if the statement is inside of the function.

let is able to re-assigned, but NOT re-declared

let is similar to var in that it can be re-assigned, but not re-declared. This helps with the overwriting issue I mentioned with the var keyword. You can re-assign a let variable as many times as you'd like, but the original declaration will always remain the same.
Alt Text
Alt Text

const cannot be re-assigned OR re-declared (kinda)

const in JavaScript quite literally means constant. When choosing a keyword for a variable that will NEVER change throughout your codebase, go with const. This will help increase readability for you and other developers.

Alt Text

Note: Even though const variables are not able to be re-assigned or re-declared, their values can be manipulated. For example, if you have an object assigned to a const variable, JavaScript will allow the values and properties within the object to be manipulated as long as the original object is not re-assigned to a new object. Example:
Alt Text

The Skinny:

Avoid using var. If you have a variable that will never change, use const. Otherwise, use let! I hope this cleared up the "what" and "why" on JavaScript variables!

Discussion (10)

pic
Editor guide
Collapse
pramnora profile image
Paul Ramnora

Very good explanation. -Thanks! ;-)

I have read about these things somewhere before...; and, most probably, repeatedly heard about it here and there...as, always, I need to revise previous knowledge; the difficulty for me has been getting these things to 'stick' inside of my mind...which seems to operate pretty much like being a total sieve...where absolutely nothing ever sticks?!

Another reason why the information doesn't tend to stick...is almost invariably -(unless I am copying other people's code)- I tend to use, var...as I've always been doing for endless years and years. I guess, it's time for me to get with the 'new'.

Collapse
twkirkpatrick profile image
Tanner Kirkpatrick Author

Thanks Paul! I am still a beginner - 3 months into a bootcamp. We started out using var, and then they introduced es6. It's tough switching when you are so used to something - so I can definitely relate to that sentiment! Sometimes I will even write a full application using var, and then go back and switch everything out with es6. That helps cement the concepts!

Collapse
qmenoret profile image
Quentin Ménoret

Eslint can help with old habits: eslint.org/docs/rules/no-var
There's even a --fix option so you can have you editor fix it for you so you don't have to think about it!

Collapse
phase_seven profile image
Ratul Roy

Good explanation, learned something new.

Collapse
reyadussalahin profile image
Reyad Salahin

hi, ratul!(just joined 😉) I prefer let over var in all cases. It's safer.

Collapse
twkirkpatrick profile image
Tanner Kirkpatrick Author

Glad to hear, Ratul!

Collapse
lucsedirae profile image
Jon Deavers

Nice work Tanner!

Collapse
twkirkpatrick profile image
Collapse
rizkyrajitha profile image
Rajitha Gunathilake

nice article 👌

Collapse
twkirkpatrick profile image
Tanner Kirkpatrick Author

Thank you, Rajitha!