What are the inner workings of Javascript's const when used with primitive types compared to objects?

Question

What are the inner workings of Javascript's const when used with primitive types compared to objects?

Recently, I stumbled upon an intriguing concept regarding the behavior of const when dealing with different data types such as number, string, Boolean, Object, and arrays.

const num1 = 10
num1 = 20 //throws error

const arr1 = [1,2,3,4]
arr1.push(5) //works
arr1.pop() //works
arr1[2] = 7 //works

arr1 = [2,3] //throws error

It appears that for array and objects, you can change their values but not reassign them while using const. Does this imply that there is no real advantage in declaring an object or array as a const since you can modify their values at any time?

If someone could shed some light on how exactly const operates behind the scenes, I would greatly appreciate it!

javascript arrays object ecmascript-6 constants

Answer 1

Answer №1

When using the const declaration, a read-only reference to a value is created. Although the value itself remains immutable, both arrays and objects can hold values that may be changed or updated. However, the variable identifier cannot be reassigned.

In this example, 'arr1' is a variable identifier:

const arr1 = [1,2,3,4]
arr1.push(5) // This works - changing the value
arr1.pop() // This works - changing the value
arr1[2] = 7 // This works - changing the value

Attempting to reassign 'arr1' will result in an error:

 arr1 = [2,3] // This throws an error - attempting to reassign the same variable

Answer 2

When using the const declaration, a read-only reference to a value is created. Although the value itself remains immutable, both arrays and objects can hold values that may be changed or updated. However, the variable identifier cannot be reassigned.

In this example, 'arr1' is a variable identifier:

const arr1 = [1,2,3,4]
arr1.push(5) // This works - changing the value
arr1.pop() // This works - changing the value
arr1[2] = 7 // This works - changing the value

Attempting to reassign 'arr1' will result in an error:

 arr1 = [2,3] // This throws an error - attempting to reassign the same variable

What are the inner workings of Javascript's const when used with primitive types compared to objects?

Answer №1

Similar questions

How can we incorporate dynamic HTML elements into a React JS application?

Removing event notifications with Google Calendar API v3 (JavaScript): A Step-by-Step Guide

How can you generate a Ref in React without utilizing the constructor by using React.createRef?

Discovering a way to retrieve dropdown data when the dropdown value is changed

resolved after a new promise returned nothing (console.log will output undefined)

Are there any comparable features in Angular 8 to Angular 1's $filter('orderBy') function?

When encountering an OR operator, Javascript will cease execution of the remaining conditions

Updating code to insert elements into an array/data structure using Javascript

Error encountered in Bootstrap 5: Popper__namespace.createPopper function is not defined

Presentation - hyperlink only functioning for final slide

Using Javascript to update various element styles using their corresponding IDs

Updating presence of HTML tag link based on ng-if condition

Invoking a parent controller method from a directive in AngularJS

What steps can I take to prompt a ZMQ Router to throw an error when it is occupied?

An error message indicating that the page is currently being unloaded has appeared

I am encountering an issue with express-session where it is failing to assign an ID to

Determining the size of <li> elements within Bootstrap 4's tab-content feature

During the execution of Sequelize sync() along with foreign key constraints, errors are encountered

Avoid duplicate calls to the same URL in node.js

Tips for managing a JSON response