Var, Let, Const Variable Declaration
Tags: javascript, variables, webdev, beginners
Published: 2022-01-12 04:16:44

### What is a variable?
In every programming language, we have something called a **variable**. Let's look at a definition of a variable to understand what it means, I just googled this btw:

> 
1. not consistent or having a fixed pattern; liable to change.
2. a data item that may take on more than one value during the runtime of a program.

So taking this into consideration, we can say that a *variable is an item of data that may change over time*. I like to think of a variable as a bucket which is empty and can be filled in with any value that is allowed. There are two parts in using a variable in JavaScript, **declaring** the variable and **assigning** it a value.

To use a variable, we use a reserved keyword followed by a variable name, and optionally assign it a value.

### Using Var in JavaScript
Originally, using the keyword  `var` followed by a variable name was the only way we were allowed to declare a variable.

```
var variableName = "hello world"
```
In the example statement above, we are *declaring* a variable with the keyword **var** and *assigning* it a **value** of *hello world*, which is of the data type string. Now that we have a variable, by definition, we can change the value of that variable. Which means we can do this:

```
var variableName = "hello world"
var variableName = "something else"
// or we can assign it any other acceptable data type in JavaScript
var variableName = 99
var variableName = true
```
Using `var` declares the variable either using a **functional-scope** or a **global-scope**. A functionally-scoped variable is a variable inside of a *function*. A **function** is basically a small program with statements.
```
// here we have var in a global-scope, as it is not inside any function thus living "globally"
var variableName = "hello world"

function newFunction() {
// here we have var in a functional-scope
var variableName = "hello world"
 return variableName
}
```
The initial `variableName` variable is living in a "global" scope, while the one inside the function keyword is living inside of the "function" scope.

JavaScript has the concept of **hoisting**, which means to "raise up" or "pull up", and so before any code is executed, it will hoist the *declaration* part of any function, variable, or class to the top of its respective scope.
```
// we are calling the function before we are declaring it
console.log(newFunction())
function newFunction() {
var variableName = "hello world"
 return variableName
}
```
This will work fine, however if we try this:
```
console.log(newVariable)
var variableName = "hello world"
```
We will get an error, as the value of `variableName` would be `undefined`. The reason for this is that the declaration of the variable has been hoisted, not the assignment. The default assignment `var` receives is `undefined`.
```
// this will be undefined
console.log(newVariable)
var variableName
variableName = "hello world"
// at this point we have assigned it a value, so it will give us the value
console.log(newVariable)
```
### Using Let in JavaScript
The keyword `let` will "let" us (see what I did there) declare a variable which only lives in a **block-scope**. The block-scope is a statement used to group statements. It is bound within a pair of opening and closing curly braces ({ }). Assignment using `let` is optional, and as with `var`, it will have a default assignment of `undefined`.
```
// this function is using a block statement
function newVariable() {
 let textVariable = "hello world"
 return textVariable
}
```
In the example above, `textVariable` lives inside the scope of the `newVariable` function and it cannot be references outside of it. The keyword `let` is used for updating a variable after it has been defined.
```
let textVariable = "hello world"
if (textVariable) {
 textVariable = "something else"
}
console.log(textVariable)
```
### Using Const in JavaScript
The third type of variable declaration we have in JavaScript is `const`. With this keyword, we can declare a variable, but we cannot reassign the variable as we can with `var` and `let`.
```
const VARIABLE_NAME = "hello world"
// this will give us an error
VARIABLE_NAME = "something else"
```
By convention, constant variables are usually all uppercase characters. Of course that is not always the case. One thing to note though, is that even though you cannot reassign another value to a variable declared with `const`, you can update an object or an item in the array if it is declared with a `const`.
```
const newObject = {
 name: "Sam",
 age: 29
}
// you can do this
newObject.name = "John"
// but you cannot do this
newObject = {
 name: "John"
 age: 33
}
// you can also do this
const newArray = ["Sam", "James"]
newArray.push("Jones")
```
### Quick Takeaways

- You may still see variables declared in the wild using var
- Use let if you have a variable which will change its value during the course of the program
- Use const to declare variables which will hold values which may not change, but remember it does not provide a safety for changing properties in an object or items in an array