How to Declare a Read-Only Variable with the Const in JavaScript

In JavaScript, you can declare a read-only variable using the const keyword. The value of a const variable cannot be reassigned, and it must be initialized when it is declared.

Here’s an example of how to declare and initialize a const variable in JavaScript:

const PI = 3.14;

This declares a const variable called PI and initializes it with the value 3.14.

It’s important to note that the value of a const variable is not necessarily immutable (i.e., it cannot be changed). For example, the following code is valid:

const arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]

This is because the const keyword only prevents reassignment of the variable, not modification of the value itself. In the example above, the const variable arr is initialized with an array, and the push() method is used to modify the array by adding an element to it.

However, the following code would throw a TypeError:

const PI = 3.14;
PI = 3.14159; // throws a TypeError

This is because the const variable PI has already been initialized with a value, and attempting to reassign it to a new value throws an error.

It’s also important to note that const declarations are block-scoped, just like let declarations. This means that the const variable is only accessible within the block in which it is declared. For example:

if (true) {
  const x = 1;
}
console.log(x); // throws a ReferenceError

In this example, the const variable x is only accessible within the block of the if statement, and attempting to access it outside of the block throws a ReferenceError.

It’s worth noting that the const keyword is not supported in all browsers. If you need to support older browsers that do not support const, you can use the Object.defineProperty() method to create a read-only property instead.

Here’s an example of how to do this:

const PI = 3.14;

Object.defineProperty(window, 'PI', {
  value: PI,
  writable: false
});

This creates a read-only property called PI on the window object, with a value of 3.14. Attempting to reassign the value of the PI property will throw a TypeError.

It’s also possible to use the Object.freeze() method to create a read-only object in JavaScript. This method makes the object and all of its properties non-writable, non-configurable, and non-enumerable. Here’s an example:

const obj = {
  x: 1,
  y: 2
};

Object.freeze(obj);
obj.x = 3; // does nothing
console.log(obj.x); // 1

In this example, the Object.freeze() method is used to make the obj object and all of its properties read-only. Attempting to modify the obj.x property has no effect, and the value remains 1.

Overall, there are a few different ways to declare read-only variables in JavaScript, depending on your needs and the browser support you need to consider. The const keyword is the most straightforward and widely supported option, but the Object.defineProperty() and Object.freeze() methods can also be useful in certain situations.