DEV Community

loading...
Cover image for How To Use let, const and var in JavaScript.

How To Use let, const and var in JavaScript.

Kingsley Ubah
I teach myself how to make websites and share them with you here. I write tips, resources, experiences, courses, tutorials, and anything that has to do with the web.
Originally published at ubahthebuilder.tech ・4 min read

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";
Enter fullscreen mode Exit fullscreen mode

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
   }
Enter fullscreen mode Exit fullscreen mode
  • Function Scope: A variable declared inside a function (i.e locally) has a function scope
// global scope
   function Function() {
   var name = "Kingsley";
   // function scope
   }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
var name = Kingsley;
// Here name is Kingsley
{
  const name = Peter;
  // name is Peter inside this block
}
// Here name is Kingsley
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
var name = Kingsley;
// Here name is Kingsley
{
  let name = Peter;
  // name is Peter inside this block
}
// Here name is Kingsley
Enter fullscreen mode Exit fullscreen mode

A variable defined with const cannot be reassigned another value:

const name = Kingsley;
name = Peter;      // This will give an error
Enter fullscreen mode Exit fullscreen mode

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"};
Enter fullscreen mode Exit fullscreen mode

You CAN change a property:

writer.name = "Peter";
Enter fullscreen mode Exit fullscreen mode

You can add a new property:

writer.surname = "Ubah";
Enter fullscreen mode Exit fullscreen mode

However, you cannot reassign a complete object:

const writer = {name:"Kingsley", age:"21", sex:"male"};
writer = {name:"Peter", age:"25", sex:"male"}; //error
Enter fullscreen mode Exit fullscreen mode

The same for an array of items:

const writers = ["Kingsley", "Peter", "Joe"];
writers = ["Sam", "Clark", "Kingsley"];    // error
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode
let i = 5;
for (let i = 0; i < 10; i++) {
  // code
}
// Here i is 5
Enter fullscreen mode Exit fullscreen mode
  • 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
}
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (5)

Collapse
lukeshiru profile image
LUKE知る

Great way of showing the differences between the 3. The only thing I could add is that ideally var needs to be considered "deprecated" and use either const or let instead.

Collapse
ianwijma profile image
Ian Wijma

The only use cases for var are confusing once. So I will agree with this one. I remember seeing blogs that stated let is the new var.

Collapse
ivanjeremic profile image
Ivan Jeremic

Use just const and let

Collapse
zigra_v profile image
Zigra V

Great article.

Collapse
kalashin1 profile image
Kinanee Samson

top draw mate... I like how simple you made it look.. can't remember when last i used var ?

Forem Open with the Forem app