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.
let: It is a keyword to declare variables in JavaScript that are block-scoped i.e. it allows to declare a variable within a block or within an expression rather than in the whole document.
Syntax:
let x = 3;
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: 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:
HTML
<script> { let x = 12; } console.log(x);</script> |
Output:
ReferenceError: x is not defined
Example 3:
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
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
const: It 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
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.
.png)
