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.

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

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.

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.

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.

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:

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!