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 = "neveropen";
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 = "neveropen"; // 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 = "neveropen"; { let x = 12; // local variable } // x takes value of the Global Variable x console.log(x);</script> |
Output:
neveropen
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 = "neveropen"; let y = "Computer science portal"; { let x = 12; console.log(x); console.log(y); } console.log(x);</script> |
Output:
12 Computer science portal neveropen
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 = "neveropen"; 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 = "neveropen";function displayName(){ let prefix = "Hi!" console.log(prefix + " " + name);}displayName();// This code is contributed by Aman Singla.... |
Output:
Hi! neveropen
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 = "neveropen"; 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 = "neveropen"; // local variable // Expected output: neveropen console.log(x); // Expected output: Welcome console.log(y); } // Expected output: 12 console.log(x); </script> |
Output:
neveropen 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: "neveropen", message: "A computer science portal" } // Updating properties of obj obj.message = "Welcome to neveropen"; console.log(obj.name); console.log(obj.message);</script> |
Output:
neveropen Welcome to neveropen
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 neveropen" 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 = "neveropen";function displayName(){ const prefix = "Hi!" console.log(prefix + " " + name);}displayName(); |
Output:
Hi! neveropen
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.
