Var, Let, and Const...What's The Difference?
Tags: beginners, javascript, webdev
Published: 2020-11-14 23:36:13

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](https://dev-to-uploads.s3.amazonaws.com/i/3chgbkonbdmy7wwdwchr.png) 
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](https://dev-to-uploads.s3.amazonaws.com/i/3qn3dculz8g9e3uyo3fl.png)
`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](https://dev-to-uploads.s3.amazonaws.com/i/em8yqgepy5vosgfu6l7k.png)
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](https://dev-to-uploads.s3.amazonaws.com/i/ukah6wknwdxicnys3js1.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t0f65s9tym04ttmrwadp.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/i/s210kovy0izo8fmfc5og.png)

**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](https://dev-to-uploads.s3.amazonaws.com/i/jytwy8e7pjnfdcskgfpi.png)

### **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!