Difference Between let, var, and const in JavaScript with Example

The Var, Let, and const keywords are used to declare variables in JavaScript. So, in this article, I will explain how to use Var, let, and const in JavaScript with examples. Choosing the right variable while writing code makes it more efficient and robust.

Before ES6, the Var keyword was used to declare variables in Javascript, but the let and const keywords were part of the new feature introduced in ES6, which is most popular after ES6 for declaring variables in modern Javascript.

Difference between var, let, and const keywords

The variable is used to hold values, and we can manipulate those values and store them in the variable name using either var, let, or const. However, they behave differently in terms of their scope, assignment, and declaration.

Let's start with a code example to understand each of them step by step.

var

If we declare a variable using the var keyword, then we can declare a variable again with the same name. It allows us to re-assign the value again; you can assign a different value to the same variable.

Let's take an example of a variable keyword to understand it.

Declare and initialization of var keyword

var testVar = "Var KeyWord Test";

console.log(testVar); //output => "Var KeyWord Test"

Example. var variable function scope

function exampleVarTest() {
  
    var testVar  = "Var KeyWord Scope";  // Var variable scope is limited to function scope
    console.log(testVar);
}

exampleVarTest();  //output => "Var KeyWord Scope"

console.log(testVar);  //output => ReferenceError because testVar variable scope is limited to function scope only so it will throw reference error

Example. var variable global scope

var testVar = "Var Keyword with Global Scope";

function exampleVarTest() {
    console.log(testVar); 
}

exampleVarTest(); //output => "Var Keyword with Global Scope"  (Accessed inside function)

if(true) {
    console.log(testVar); //output => "Var Keyword with Global Scope" (Accessed inside block)
}

console.log(testVar); //output => "Var Keyword with Global Scope" (Accessed out side)

Var can be accessed before the declaration

function exampleVarTest() {
  
  console.log(testVar); // undefined (hoisting)
  
  var testVar = 'hello';
  
  console.log(testVar); // 'hello'
}

exampleVarTest();

An example of a var keyword with re-declare

// Var Re-declare Example

var testVar = "First Value";

var testVar = "Second Value";

console.log(testVar); //Output - "Second Value"

An example of a var keyword with a re-assign value

// Var Re-assign Example

var testVar = "First Value";

testVar = "Second Value";

console.log(testVar); //Output - "Second Value"

let

If we declare a variable using the let keyword, then we cannot declare a variable with the same name in the same block scope. It allows you to re-assign the value to the same variable, and then you can re-assign the value to that variable.

Let's take an example of the Let keyword to understand it.

Declare and initialization of let keyword

// Var Re-declare Example

let testlet = "First Value";

console.log(testlet); //Output - "First Value"

An example of a let variable used as block scope

function exampleLetKeyword() {
  if (true) {
    let testLet = "Let Test";
    console.log(testLet); // Output: Let Test
  }
  console.log(testLet); // ReferenceError: testLet is not defined
}

exampleLetKeyword();

For example. let variable can be re-assign but can not be declared again with the same name.

//Re-Assign let variable value

let testLet = "Let Test";
testLet ="Updated let value"

console.log(testLet); //Output - Updated let value

//Re-declare let variable with same name in same scope

function exampleLetTest()
{
  let testLet = "Let Test";
  let testLet ="Updated let value"

  // error - SyntaxError: Identifier 'testLet' has already been declared
}

Const

If you declare const and assign value to const, then you can not change that const value again. It means you can not declare cosnt again with same name or re-assign value to same const.

Let's take an example for const keyword to understand it.

Declare and initialization of const keyword

function exampleLetTest()
{
  const testconst = "Const Test";
  console.log(testconst);
}

exampleLetTest(); // Output : Const Test

Const cannot be re-delegated with the same name or re-assigned with another value.

//Can not re-declare const , It will throw SyntaxError: Identifier 'testconst' has already been declared

function exampleConstTest()
{
  const testconst = "Const Test";
  const testconst ="Updated Const value"
  
  console.log(testconst);
}

exampleConstTest(); // SyntaxError: Identifier 'testconst' has already been declared

//Can not re-assign value in const, It will throw TypeError : Assignment to constant variable.

function exampleConstTest()
{
  const testconst = "Const Test";
  testconst ="Updated Const value"
  
  console.log(testconst);
}

exampleConstTest(); // TypeError: Assignment to constant variable.

Let's understand defference between var, let and cost using below table.

	Var	Let	Const
Introduce of keyword	Var - keyword is old way to declare variable in javascript before ES2015 (ES6) released.	Let - keyword introduced with ES2015 (ES6) and the modern ways to declare variables.	Const - keyword was also introduced with ES2015 (ES6) and the modern ways to declare variables
Scope of variables	Variable declared withthe "Var" keyword are scope-specific to function or globally based on where it is declared.	Variable declared with "Let" keyword are scope specific to that block inside { ... }	"Const" keyword declarations are scope to that block inside { ... } or function.
Can be re-declare?	Yes, It can be redeclared within the same scope or globally with the same variable name.	No, you can't redeclare a variable with the same name using the "let" keyword.	No, you can not re-declare "Const" Keyword with same name.
Can be re-assign?	Yes, it can be re-assigned within the same scope or globally with the same variable name.	Yes, you can re-assign a variable with the same name using the "let" keyword.	No, you can not re-assign the "Const" Keyword with the same name.

Summary

Var keywords can be declared as globally scoped or function scoped, while let and cost are block scoped. Var variables can be re-declared or reassigned, while let variables can only be re-assigned but cannot be re-declared with the same name in the same scope. Const cannot be re-declared or re-assigned.

I hope this will help you understand.

Please refer to my latest article and click on My Latest Articles and other articles at the below links.

1. Difference Between =, == And === In JavaScript
2. Count Number Of Character Occurrences In A String Using JavaScript
3. Boosting Your Productivity with .NET Core CLI Commands
4. Simplify Your Code with Switch Expressions: Patterns and Examples
5. Clean Code: Avoid Too Many Parameters In Method