What is the use of let & const in JavaScript ?

In this article, we are going to discuss the usage of let and const in JavaScript with the help of certain theoretical explanations along with some coding example as well.

let: let keyword is used to declare variables in JavaScript that are actually to made as block-scoped i.e. it allows us to declare a variable within a block or within an expression rather than in the whole document. We cannot access let variables outside their block-scope so defined for them.

Syntax:

let variable_name = value;

Following is an example (non-runnable) of the above illustrated syntax:

let name = "GeeksforGeeks";

Characteristic:

• Variables declared with let cannot be redeclared in JavaScript. This means if a variable is declared with let, then we cannot redeclare the same variable again in the same context.

Example 1: In this example we will see that how we get a syntax error since x cannot be redeclared in the same scope.

HTML

<script>
  let x = "GeeksforGeeks";

  // Redeclaring same variable
  let x = 12;

  console.log(x);
</script>

Output:

SyntaxError: Identifier 'x' has already been declared

Note: let allows declaring the same variable within a block scope { } but it cannot be used outside the block scope.

Example 2: In this example we will try to access let variable outside of its block-scope and as mentioned earlier that we cannot access let variable outside of it’s scope so in output we receive an error.

HTML

<script>
  {
    let x = 12;
  }

  console.log(x);
</script>

Output:

ReferenceError: x is not defined

Example 3:  Here in this example we will declare a global let variable and inside a block we will declare another let variable and then outside that block if we try to print the value, then we will actually get to notice that it takes the value of globally declared let variable.

HTML

<script>
  let x = "GeeksforGeeks";

  {
    let x = 12;   // local variable
  }
  // x takes value of the Global Variable x
  console.log(x);
</script>

Output:

GeeksforGeeks

Example 4: We can declare a let variable within a block scope, which will be treated as a local variable inside the block scope and will be given more preference than a previously defined global variable.

HTML

<script>
  let x = "GeeksforGeeks";
  let y = "Computer science portal";

  {
    let x = 12;
    console.log(x);
    console.log(y);
  }
     console.log(x);
</script>

Output:

12
Computer science portal
GeeksforGeeks

Example 5: A key point is when a variable is declared with let, it gets hosted on top of the block but is not initialized. So, if we use a let variable before declaring the variable, we will get a Reference error.

HTML

<script>
  x = "A variable"

  let x = "GeeksforGeeks";

  console.log(x);
</script>

Output:

ReferenceError: Cannot access 'x' before initialization

Example-6: In this example we will be visualizing how to write let variable inside as well as outside of the function scope.

Javascript

let name = "GeeksforGeeks";
function displayName(){
    let prefix = "Hi!"
    console.log(prefix + " " + name);
}
displayName();

// This code is contributed by Aman Singla....

Output:

Hi! GeeksforGeeks

const: const is also a keyword to declare variables that are block-scoped, but the variables declared by the const keyword cannot be updated within the same scope. Similar to let variables, the const variables can neither be redeclared nor can be accessed before they are declared.

Syntax:

const x = 12;

Characteristic:

• The variables declared by the const keyword remain the same within the same scope or within a block.

Example 1:

HTML

<script>
  const x = 12;
  x = "GeeksforGeeks";

  console.log(x);
</script>

Output:

TypeError: Assignment to constant variable.

Example 2: const variables can be declared as a local variable inside a block scope, and preference for a local variable is higher than a global variable inside a block scope.

HTML

<script>
   const x = 12;          // Global variable
   const y = "Welcome";   // Global variable
   {
       const x = "GeeksforGeeks";   // local variable

       // Expected output: GeeksforGeeks
       console.log(x);

       // Expected output: Welcome
       console.log(y);
   }

   // Expected output: 12
   console.log(x);
</script>

Output:

GeeksforGeeks
Welcome
12

Example 3: If we try to declare an object using the const keyword, then the object cannot be updated, but the properties of the object can still be updated.

HTML

<script>
 const obj = {
      name: "GeeksforGeeks",
      message: "A computer science portal"
  }

  // Updating properties of obj
  obj.message = "Welcome to GeeksforGeeks";

  console.log(obj.name);
  console.log(obj.message);
</script>

Output:

GeeksforGeeks
Welcome to GeeksforGeeks

Example 4: Similar to let, a const object must be initialized before the declaration. If it is uninitialized, we will get a Reference error.

HTML

<script>
  x = "Welcome to GeeksforGeeks"
  const x = 12;

  console.log(x);
</script>

Output:

ReferenceError: Cannot access 'x' before initialization

Example-5: In this example, we will be visualizing how to use variables declared using const keyword inside as well as outside of the function scope.

Javascript

const name = "GeeksforGeeks";
function displayName(){
    const prefix = "Hi!"
    console.log(prefix + " " + name);
}
displayName();

Output:

Hi! GeeksforGeeks

Key difference: So we see that a variable declared by let keyword can be reassigned whereas a variable declared with const keyword can never be reassigned within the same scope.