JavaScript let and const With Examples

ES6 introduced two new keywords let and const in JavaScript to declare variables. These two keywords are in addition to var which was the only way to declare variables until ES5.

const in JavaScript

A variable defined using const can't be reassigned, it becomes a constant value.

const rate = 10;
rate = 8; // Not allowed, Uncaught TypeError: Assignment to constant variable.

A const variable must be initialized when it is declared-

const rate; // Not allowed, Missing initializer in const declaration
rate = 8;

const with arrays and objects

When you declare an array or an object using const, you can still modify the array element or property of the object. You can't assign the const variable to a new array or object (can't change the reference).

With array

const numArr = [1, 2, 4, 4, 5];
console.log(numArr); // [1, 2, 4, 4, 5]
numArr[2] = 3; // Permitted
console.log(numArr); // [1, 2, 3, 4, 5]
numArr = [3, 4, 5]; // Not permitted, attempting to assign a new array

With object

const user = {
  name: 'Renard',
  age: 42
}
console.log(user.age); // 42
user.age = 45; // permitted
console.log(user.age); //45
// Not permitted, assigning a new object
user = {
  name: 'Raven',
  age: 24
}

let in JavaScript

Using let you can define variables that can be modified.

let message = "Hello World";
message = "Greetings!"
console.log(message); // Greetings!

Differences among let, const and var

1. var variables can be modified and even redeclared.

let variables can be modified but can't be redeclared.

const variables are constant values so can't be modified or redeclared.

// var can be redeclared
var x = "Test";
var x = 0;
//let cannot be redeclared
let a = "Test"
let a = 0; // SyntaxError: Identifier 'a' has already been declared

2. var and let can be declared first and initialized later, const must be initialized when it is declared.

let message; // declare
message = "Hello"; // initialize

3. var variables have global or function scope. let and const have block scope also apart from global or function scope.

Global scope

A variable declared outside a function, becomes a global variable having global scope. Global variables can be accessed from anywhere in JavaScript.

var x = "Test"; // global variable

function myFunction() {
  alert("From myFunction" + x); // visible in this function
}
function anotherFunction() {
  alert("From anotherFunction" +x);// visible in this function
}

Same behavior with let and const.

Function scope

Variables declared within a JavaScript function have scope within the function (are local variables).

function myFunction() {
  // local variable
  var a = 16;
  console.log(a);
}

function anotherFunction() {
  let b = 10;
  console.log(b);
  // ERROR, a not visible here
  console.log(a)
}

Block scope

With the introduction of let and const keywords, a new scope; block Scope is provided in JavaScript. Variables declared inside a { } block cannot be accessed from outside the block.

function varTest() {
  var x = 10;
  {
    var x = 20;  // declaring x again
    console.log(x);  // 20
  }
  console.log(x);  // 20
}

function letTest() {
  let x = 10;
  {
    let x = 20;  // declaring x again
    console.log(x);  // 20
  }
  console.log(x);  // 10
}

In the function varTest() value of x is displayed as 20 outside the block too because var doesn't recognize block scope.

In the function letTest() this code

  {
    let x = 20;  // declaring x again
    console.log(x);  // 20
  }

Is in a separate block so x is 20 with in this block scope, outside this block x has value 10.

That's all for this topic JavaScript let and const With Examples. If you have any doubt or any suggestions to make please drop a comment. Thanks!

Related Topics

You may also like-

Tech Tutorials

Thursday, December 1, 2022