
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
Are there constants in JavaScript?
Yes, Constants exist in JavaScript. We use the keyword const for constants. The value of const remains the same; you cannot change and declare it again. Create a read-only reference with the const declaration.
The const is introduced in ES6. Before ES6, we used to declare variables using var keywords only. Later, let, and const are introduced. Now, we will see in detail about const.
const value = "some-value";
With const, you can declare local variables with block scope rather than function scope. Let’s say we have a constant variable a. After declaring a value like a constant variable, you can’t assign a new value to it
// declared ‘a’ as a constant variable. const a = 150; // Assigning a new value to `a` will fail since ‘a’ is a constant variable a= 0; a++; // The below declarations won’t work var a = 0;
Constants are block-scoped, much like variables declared using the const keyword. Constants cannot be changed by using assigning and can't be declared again. However, if we have arrays and objects as constant, we can modify and remove the elements, but we cannot declare them again.
Example 1
We can start variable names with upper case and also the lower case for const.
<!DOCTYPE html> <html> <body> <h2>Const</h2> <p id="demo"></p> <script> const num = 34; document.getElementById("demo").innerHTML = num; </script> </body> </html>
Const values can’t be reassigned
We can't reassign constants to new values. When we try to reassign, it will throw an error. Let's see an example
Example 2
In the below example, we try to reassign a const value. See what the output look like.
<!DOCTYPE html> <html> <body> <h2>Reassigning const Value</h2> <p id="demo"></p> <script> try{ const num = 34; num = 35; document.getElementById("demo").innerHTML =num; } catch(e){ document.getElementById("demo").innerHTML =e; } </script> </body> </html>
As we see, whenever we try to reassign a constant, it will throw TypeError.
Must be Assigned
Constants must be assigned a value when they are declared. Otherwise, it will throw an error.
The incorrect way to assign −
const num; num = 35;
The correct way to assign −
const num = 35
Example 3
Let’s see the below example. It will through a syntax error as the num is declared a const variable but not assigned.
<!DOCTYPE html> <html> <body> <h2>Must be assigned</h2> <p id="demo"></p> <script> const num; num = 35; document.getElementById("demo").innerHTML = num; </script> </body> </html>
Uncaught SyntaxError: Missing initializer in const
Here we can see, if we didn't assign a value while declaring, it will throw a SyntaxError.
No Const Hoisting in JavaScript
Hoisting with var keyword is moving declarations at the top. i.e. we can use the variables before it is defined.
Let's check hoisting with the const keyword.
Example 4
<html> <body> <h2>JavaScript Hoisting</h2> <p id="demo"></p> <script> try{ num; const num = 23; document.getElementById("demo").innerHTML = num; } catch(e){ document.getElementById("demo").innerHTML = e; } </script> </body> </html>
Using const, we cannot use a variable before it is declared. If we try to do it, it throws ReferenceError.
Block Scope for const
It is important to check the block scope of const. When comes into block scope, for let and const, the declaration comes as the same. Let's see
Example 5
<!DOCTYPE html> <html> <body> <h2>Block scope</h2> <p id="demo1"></p> <p id="demo2"></p> <script> const value = 10;{ const value = 20; document.getElementById("demo1").innerHTML = "Inside Block:" + value; } document.getElementById("demo2").innerHTML = "Outsite Block:" + value; </script> </body> </html>
Let’s look at another example of block scope.
Example 6
<html> <body> <h2>Block scope</h2> <p id="result1"></p> <p id="result2"></p> <p id="error"></p> <script> try{ const value1 = 10;{ const value2 = 20; document.getElementById("result1").innerHTML = value1 } document.getElementById("result2").innerHTML = value1 + value2; } catch(e){ document.getElementById("error").innerHTML = e } </script> </body> </html>
Here, we cannot access value2 outside of the block. Whenever we try to access the variables outside the block scope, It will throw a ReferenceError.
Constant Arrays
We can modify and add an element to a const array. But, we can't reassign it. Let's see an example
Example 7
<!DOCTYPE html> <html> <body> <h2>Constant array</h2> <p id="demo"></p> <script> const arr = [1,2,3,4,5]; arr.push(6); arr[0] = 0; document.getElementById("demo").innerHTML = arr; </script> </body> </html>
Now, we will check with reassigning an array
Example 8
<html> <body> <h2>Constant array</h2> <p id="demo"></p> <script> try { const arr = [1, 2, 3, 4, 5]; arr = [0, 1, 2, 3, 4] document.getElementById("demo").innerHTML = arr; } catch (e) { document.getElementById("demo").innerHTML = e; } </script> </body> </html>
If we try to reassign an array, it throws TypeError.
Constant Object
We can change and add properties to an object. But, we cannot reassign it. Let's see an example
Example 9
<html> <body> <h2>Constant object</h2> <p id="demo"></p> <script> const obj = { id: 1, name: "Tara", gender: "female", age: 25 }; obj.age = 26; obj.designation="Web developer"; document.getElementById("demo").innerHTML = obj.name + " is " + obj.age + " years old and working as " + obj.designation; </script> </body> </html>
Now, we will use an example for reassigning an object.
Example
<html> <body> <h2>Constant object</h2> <p id="demo"></p> <script> try { const obj = { id: 1, name: "Tara", gender: "female", age: 25 }; obj = { id: 1, name: "Tara", gender: "female", age: 26, designation: "Web developer" }; document.getElementById("demo").innerHTML = obj.name + " is " + obj.age + " old and working as " + obj.designation; } catch (e) { document.getElementById("demo").innerHTML = e; } </script> </body> </html>
Now we can see, that whenever we try to reassign an object, It will throw TypeError.
We have seen all the functionalities using const. Hope this tutorial gives clarification on constants in JavaScript.
- Related Articles
- What are constants in C++?
- How to define integer constants in JavaScript?
- What are Enumerated Constants in C++?
- What are C++ Integer Constants?
- What are C++ Character Constants?
- How to create constants in JavaScript? Explain with examples.
- What are different types of constants in C++?
- What are Backslash character constants in C language?
- What are C++ Floating-Point Constants?
- What are different types of constants in C language?
- What are the constants with an example in C language?
- What are constants in Kotlin and how to create them?
- Decimal constants in C#
- Mathematical Constants in Python
- Constants in Rust Programming
