Variables in JavaScript

What are variables in JavaScript?

Variables are a way to store little pieces of information on our computers. The keyword var (var/let/const, see the difference later in this post) shows that that sentence will declare a variable. After the keyword, we write the variable's name, and if we want to give it a value immediately, we do it with an operator =. After that, the variable's name will hold that particular variable's value. For example,

var age = 17;
console.log(age);

// it will print 17

In this example, we created a variable called age which holds a value of 17.
Variables can have any word as their names as long as that word is not 'reserved,' just like keyword var. When we give values to variables, that does not mean they are tied to that value. Variables can be reassigned with the operator =. For example,

var hairColor = ‘brown’;
console.log(hairColor);

// it will print brown

hairColor = ‘red’
console.log(hairColor);

// now it will print red because we reassigned the variable hairColor and gave it the new value red

Variables do not contain the values; they rather hold them, which is why we can easily reassign them (it is different with const, see later in this post).

What are scopes? The difference between var, let, and const

Scopes in JavaScript manage the availability of variables.
There are four scopes in JavaScript

• Block scope
• Function scope
• Local scope
• Global scope

Block scope:
Before the second major revision of JavaScript in 2015, there were only Global scope and Function scope. After the revision, the keywords let and const were introduced. These two keywords provide Block scope in JavaScript. A Black scope variable means that if a variable (let or const) is declared inside a {} block, it cannot be used outside that block. For example,

{
let x = 5;
}

// x cannot be used here

In contrast,

{
var x = 5;
}

// we can use x here

Variables declared with the keyword var can be used outside the block in which the variable was declared.

Function scope:
JavaScript has function scope, meaning every function creates a new scope. If we declare variables in the function scope, we cannot access them outside it. In this scope, var, let, and const are similar. For example,

function thisFunction () {
var hairColor = ‘red’;
}

// we cannot use variable hairColor here because we are outside of this function's scope

// same with let and const

But since let and const are block scoped

if (true) {
var variableVar = ‘it is true’
}
console.log(variableVar)

// this is going to print 'it is true' because var is function scoped

In contrast

if (true) {
let variableLet = ‘it is true’
}
console.log(variableLet);

//this is going to give an error because let( and const) are block scoped and cannot be accessed outside of a block

Local scope:
Local scope is somewhat similar to function scope. When we declare a variable in a function, it becomes local to that function. When the function starts, local variables are created, and when the function is executed respectively, the variables are deleted. For example,

// This part of the code cannot use hairColor

function thisFunction() {
let hairColor = "red";
// This part of the code can use hairColor
}

//This part of the code cannot use hairColor
// same with var and const

Global scope:
Global scope means variables are declared outside of any function (globally). Global variables can be accessed anywhere in the program. For example,

let x = ‘red’;
var y = ‘blue’;
const z = ‘white’;

function hairColor() {
console.log(x);
console.log(y);
console.log(z);
}

hairColor();

//this will print
//red
//blue
//white

Besides the differences of var, let, and const in the scopes, there are a few more differences that should be mentioned. Let and const are more similar than var. With var, we can declare another variable with the same name. For example,

var hairColor = ‘red’;
console.log(hairColor); // this is going to print red
var hairColor = ‘white’;
console.log(hairColor); // this is going to print white

//If we did the same with let or const, it would give an error

Variable var can be used before declaring it. For example,

console.log(hairColor);
var hairColor = ‘red’

// this will give undefined; however, if we used let or const, it would give an error

And lastly, the only difference between let and const is obviously const being constant, meaning we cannot reassign const to another value. For example,

const x = 5;
const x = 3;

// this will give an error; however, if we replace const with let or var, it is going to just reassign the values