In Programming, variables are containers used to store data.
For example, when you type in your name into a field on a website, that data is stored in a variable. When you search for a particular item on a website, the returned information is first stored in a variable before displayed to you.
The assignment operator is used to “assign” data to a variable. It then becomes a value at that point.
var name = "Kingsley";
In JavaScript, there are three keywords used to define variables. They are let, const and var. Before 2015, using the var keyword was the only way to declare a JavaScript variable.
However, the advent of EmcaScript 2016 (ES16) came with two other variable keywords: let and const.
Before we proceed to understand these keywords, we have to understand three concepts in variables:
- Global Scope: A variable declared globally (outside of a function) has a global scope and can be accessed anywhere across the entire program.
var name = "Kingsley";
// global scope
function myFunction() {
//code goes here
}
- Function Scope: A variable declared inside a function (i.e locally) has a function scope
// global scope
function Function() {
var name = "Kingsley";
// function scope
}
Now that we have the various scopes defined, let’s define the three variable keywords and what variable scoping they allow:
- FOR BLOCK SCOPING
Var
Variables declared with the var keyword does not have block scoping. That is, any variable declared within a block can be accessed outside.
Let
Variables defined with Let can have block scoping. That is, any variable declared within a block {} cannot be accessed outside of that block.
Const
Like let, variables defined with const can have block scoping. That is, any variable declared within a block {} cannot be accessed outside of that block.
const and let both have block scoping.
var name = “Kingsley”;
// Here name is Kingsley
{
let name = “Peter”;
// name is Peter inside this block
}
// Here name is Kingsley
var name = “Kingsley”;
// Here name is Kingsley
{
const name = “Peter”;
// name is Peter inside this block
}
// Here name is Kingsley
Also, let and var behave differently when a redeclaration is made inside the block.
var name = “Kingsley”;
// Here name is Kingsley
{
var name = “Peter”;
// name is Peter inside this block
}
// Here name is Peter
var name = “Kingsley”;
// Here name is Kingsley
{
let name = “Peter”;
// name is Peter inside this block
}
// Here name is Kingsley
A variable defined with const cannot be reassigned another value:
const name = “Kingsley”;
name = “Peter”; // This will give an error
N/B: Arrays and Objects defined with const can have their properties changed. The immutability only pertains to primitive values like numbers and strings.
You can create an object with const:
const writer = {name:"Kingsley", age:"21", sex:"male"};
You CAN change a property:
writer.name = "Peter";
You can add a new property:
writer.surname = "Ubah";
However, you cannot reassign a complete object:
const writer = {name:"Kingsley", age:"21", sex:"male"};
writer = {name:"Peter", age:"25", sex:"male"}; //error
The same for an array of items:
const writers = ["Kingsley", "Peter", "Joe"];
writers = ["Sam", "Clark", "Kingsley"]; // error
N/B: If you're looking to see this new ES6 Syntax in action, I'll highly recommend HTML To React By Sleepless Yogi
Inside loops
Var and let also behave differently in loops.
var i = 5;
for (var i = 0; i < 10; i++) {
// code
}
// Here i is 10
let i = 5;
for (let i = 0; i < 10; i++) {
// code
}
// Here i is 5
- FOR FUNCTION SCOPE
Variables declared with the let keyword has function scoping. That is, the variable is not accessible outside the scope.
// name can’t be accessed by this global code
function Foo() {
var name = "Kingsley";
// func scope
}
- FOR GLOBAL SCOPE
Variables declared with var keyword has a global scope. It is accessible from all over the JavaScript code (and can be accessed with the window object).
Variables declared with let keyword has a global scope. However, it can’t be accessed with the windows object.
These two keywords also behave differently when a declaration is made within the global scope:
var x = 1;
// Now x is 1
var x = 5;
// Now x is 5
The above snippet shows that redeclaration within the same scope is allowed with the var keyword.
let x = 1; // Allowed
let x = 5; // Not allowed
{
let x = 2; // Allowed
let x = 3; // Not allowed
}
The above snippet shows that redecleration within the same scope or same block is not allowed with the let keyword.
var x = 1; // Allowed
let x = 5; // Not allowed
{
var x = 2; // Allowed
let x = 3 // Not allowed
}
The above snippet shows that while you can successfully redeclare a variable with in another block with var, you can’t with let.
var x = 1; // Allowed
let x = 5; // Not allowed
{
var x = 2; // Allowed
let x = 3 // Not allowed
}
The above snippet shows that while you can successfully redeclare a variable with in another block with var, you can’t with const.
let x = 1; // Allowed
{
let x = 5; // Allowed
}
{
let x = 2; // Allowed
}
The above snippet shows that redeclaration is another scope or another block is possible with let.
const x = 1; // Allowed
{
const x = 5; // Allowed
}
{
const x = 2; // Allowed
}
The above snippet shows that redeclaration is another scope or another block is possible with const.
Variable scopes is crucial for every sofware developer to grasp.
If you enjoyed this article and want to support me, feel free to buy me my favourite fruit:
Thank you for your time and see you soon!
Top comments (4)
The only use cases for
var
are confusing once. So I will agree with this one. I remember seeing blogs that statedlet
is the newvar
.Use just const and let
Great article.
top draw mate... I like how simple you made it look.. can't remember when last i used var ?