Var, Let, Const Variable Declaration

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