Understanding Const Variable in Javascript

So if you have worked with JavaScript a bit you must know that Const is a keyword which is used to define a new variable in JavaScript.

It is used to declare a variable with a constant value. Once a variable is declared with const, its value cannot be reassigned a new value once it has been initialized.

For example

const x = 45
x = 76 //throws error

Makes sense right? Its a constant, obviously we can't change its value.

But...

I have seen a strange behaviour in the working of const. When I declare and array or object as a const I am still able to add or push or update the values in this 'constant' array or object.

Lets see an example

const x = [1,2,3]
x[0] = 4

const y = {name:'john', gender:'male'}
y.name = 'bob' 

console.log(x ,'\n', y)
// [ 4, 2, 3 ] 
// { name: 'bob', gender: 'male' }

See? I was able to make changes in both array and the object.

But why does this happen?

So this is happening because both arrays and objects are reference type of values. Meaning the variable is not storing the direct value i.e. [1,2,4] but its just storing the address of this array or object.

The actual array is stored elsewhere which is not constant, as the const variable is just storing the address, so in this way only the address is constant, so if you try to change the address by giving a totally new value to the variable then It'll definitely throw an error
For example

const x = [3,6,7]
x = [7,8,9] //throws error

and that's also the reason why we can't update the value when the value is a primitive type like int, string, or Boolean etc.
Because they are passed by value and not reference so the variable is holding its value and as its constant you cant make any change to it.

Now there is one more interesting thing among the primitive types,

So if you declare an integer value using a const variable and try to change it, it will directly throw an error, but if you created a string like

const x = 'my string'

and then try to change the value at x[0]. You'll see that when you console.log x after that, there will be no change in the string, and it didn't even throw any errors.

Why does this happen?
From what I understand this because string have an indexed character structure, while numbers do not, when you try to modify a string using x[0] JavaScript creates a new string and therefore the original one is not modified and hence no error, but when you try to change a number you are changing its value directly and that's why its throwing an error.

Now when we use any method on string like replace or toLowerCase or any other , it creates a new string and that's why we always assign it to a new variable.

And this behavior is not something you'll see only while using const variable but its the common behavior that string shows in JavaScript.
Just thought that I should add this too.

Thanks for reading this far ❤️