Variables in JavaScript
Tags: javascript, beginners, programming, variables
Published: 2022-11-09 19:02:56

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