How To Use let, const and var in JavaScript.

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!