Are there constants in JavaScript?

Javascript Web Development Front End Technology

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>