Back to: JavaScript Tutorial For Beginners and Professionals
JavaScript const Keyword with Examples
In this article, I am going to discuss JavaScript const Keyword with Examples. Please read our previous article where we discussed JavaScript let Keyword in detail. At the end of this article, you will understand the what is JavaScript const keyword and when and how to use const keyword in JavaScript with examples.
JavaScript const Keyword
ES6 provides a new way of declaring a constant by using the const keyword. The const keyword creates a read-only reference to a value.
Syntax: const VARIABLE_NAME = value;
JavaScript const Keyword Properties:
- A constant variable can be declared using the keyword const.
- It must have an assignment with value.
- Variable created by cost keyword are immutable that means we can’t change the value or reassign them with different values. Any attempt of re-assigning a const variable will result in JavaScript Type error.
- Cannot be reassigned.
- Block scope
- It can be assign on the variable on declaration line.
- The values inside the const array can be change, it can add new items to const arrays but it cannot reference to a new array.
- Const object properties can be modified only reference to object cannot be changed.
- Re-declaring of a const variable inside different block scope is allowed.
- Cannot be Hoisted.
- Creates read only reference to value.
Example to understand const keyword in JavaScript:
const height = 4;
height = 8; // TypeError: Assignment to constant variable.
The const keyword works like the let keyword. But the const keyword creates block-scoped variables whose values can’t be reassigned. The variables declared by the let keyword are mutual. It means that we can change their values anytime we want.
Example 1: It explains that the const variable cannot be reassigned.
<html>
<head>
<title>JavaScript const variable cannot be reassigned example</title>
</head>
<body>
<script type="text/javascript">
const x = 12;
x = 13;
x += 1;
</script>
</body>
</html>
Output:
Example 2: It explains the const variable which contains the Block Scope.
<html>
<head>
<title>JavaScript const variable which contains the Block Scope example</title>
</head>
<body>
<script type="text/javascript">
const x = 22;
{
const x = 90;
console.log(x);
{
const x = 77;
console.log(x);
}
{
const x = 45;
console.log(x);
}
}
console.log(x);
</script>
</body>
</html>
Output:
Example 3: It explains the const variable and assigned it after declaration.
<html>
<head>
<title>JavaScript const variable and assigned it after declaration example</title>
</head>
<body>
<script type="text/javascript">
const x;
x = 12;
</script>
</body>
</html>
Output:
Example 4: It explains the const variable cannot be Hoisted.
<html>
<head>
<title>JavaScript const variable cannot be Hoisted example</title>
</head>
<body>
<script type="text/javascript">
x = 3;
console.log(x);
const x;
</script>
</body>
</html>
Output:
Example 5: It explains that the array values can be modified only reference to array cannot be change.
<html>
<head>
<title>JavaScript const array values can be modified only reference to array cannot be change.</title>
</head>
<body>
<script type="text/javascript">
// Changing the content of array is
// possible in cost array
const arr1 = ["Shagufta", "Javascript", "tutorial", "developer"];
console.log(arr1.toString());
arr1[2] = "web"; // possible
console.log(arr1.toString());
</script>
</body>
</html>
Output:
Example 6: It explains that the object properties can be modified only reference to object cannot be changed.
<html>
<head>
<title>JavaScript const object properties can be modified only reference to object cannot be changed.</title>
</head>
<body>
<script type="text/javascript">
const person = {
first_name: "Shagufta",
last_name: "Chaudhari",
Age: 20,
About: "Web Developer"
};
console.log(person);
// It is possible
person.first_name = "John";
person.last_name = "Doe";
person.Age = 22;
person.About = "Commerce undergraduate";
console.log(person);
// it is not possible
// const person={
// "first_name":"John",
// "last_name":"Doe",
// "Age":22,
// "About":"Commerce undergraduate"
// }
</script>
</body>
</html>
Output:
Declaring Variables in JavaScript:
To declare a variable in JavaScript, any of these three keywords can be used along with a variable name:
- var is used in pre-ES6 versions of JavaScript.
- let is the preferred way to declare a variable when it can be reassigned.
- const is the preferred way to declare a variable with a constant value.
Example:
var name;
let height;
const age = 20;
The Lifetime of JavaScript Variables:
The Lifetime of a JavaScript variable started when it is declared
- Local variables are deleted when the function is completed.
- Global variables are deleted when we close the page
Var VS Let VS const in JavaScript:
In the next article, I am going to discuss JavaScript Output with examples. Here, in this article, I try to explain JavaScript const Keyword with examples. I hope this article will helps you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.