Const objects can be modified

can anyone pls make me understand what is happening under the hood?

54 Replies

Jochem•6d ago

const objects are a bit complicated. Variables assigned with const can't be modified through reassignment using the assignment operator, but objects work a little differently. An object stored in a variable is really just a reference to a bit of memory. When you run this code:

const obj = {};

const obj = {};

Javascript creates a little bit of memory and assigns a reference to that memory to obj. That reference can't be changed, but the object itself can be. This is totally valid code:

const obj = {};
obj.text = "Hi";

const obj = {};
obj.text = "Hi";

This is not and will produce an error about reassigning const variables:

const obj = {};
obj = { text: "Hi" };

const obj = {};
obj = { text: "Hi" };

Aoi•6d ago

If you really need to make an object constant, you can use

Object.freeze()

Object.freeze()

Though this will not work on nested objects

Jochem•6d ago

to expand on this a little, Object.freeze() here is calling a static method on the Object class, it's not a method you call on the object you created, so it's used like this:

const obj = {};
obj.text = "Hi"; //works
Object.freeze(obj);
obj.text = "Hello"; //causes error

const obj = {};
obj.text = "Hi"; //works
Object.freeze(obj);
obj.text = "Hello"; //causes error

Vandana•6d ago

consider an example:

const prod1=       
  {          
   name:'football',             
   price:60  
  }                            }                                     
  const prod2=    
  {                         
   name:'volleyball',                   
   price:60                              
  }

const prod1=       
  {          
   name:'football',             
   price:60  
  }                            }                                     
  const prod2=    
  {                         
   name:'volleyball',                   
   price:60                              
  }

here prod1 has different address(reference) for football and same address for price .Similary same goes with prod2. Consider another example where:

const prod1={                                                                 name:'football',                                                                 price:60  }                                                                          const prod2={                                                             name:'football',
 price:60
}

const prod1={                                                                 name:'football',                                                                 price:60  }                                                                          const prod2={                                                             name:'football',
 price:60
}

here reference for objects prod1 and prod2 are same right?meaning prod1 has the address for football so prod2 points to same address as that of prod1 pointing to football.Hence price has the same refrence for prod1 and prod2.Is this right what i stated?

Jochem•6d ago

nope, those are two objects who happen to have the same values In this example they would have the same reference

const prod1 = {          
  name:'football',
  price:60
}
const prod2 = prod1;

const prod1 = {          
  name:'football',
  price:60
}
const prod2 = prod1;

changing price on prod1 would also change it on prod2 and vice versa in your second example where all the values are the same, prod1 == prod2 would even return false, because they're comparing the reference. In my example, prod1 == prod2 returns true because the references are the same

Vandana•6d ago

Oh this is so tricky!

Jochem•6d ago

yeah, it's a bit unintuitive sometimes

Vandana•5d ago

everything is an object in javascript. to quote this consider an example

 let message = 'hello';
let info = message;//here info equals 'hello'

 let message = 'hello';
let info = message;//here info equals 'hello'

So my doubt is does message and info point to the same reference?? its kind of difficult to imagine refernce and values consider

prod1='hello';
  prod2 ='hello';

prod1='hello';
  prod2 ='hello';

here values are same but reference is different right??

prod1==prod2

prod1==prod2

should be false then ..

Jochem•5d ago

not quite, the level of understanding I have and honestly all you need for working with JS is that when something is an object you (or some library) made, or an array, they're passed by reference. Otherwise they're passed by value the underlying mechanism is that it's always assigned and compared by value, but when the target is an object or array, the value of the variable is actually a reference. prod1 == prod2 returns true in your example in fact, prod1===prod2 returns true as well you only have to worry about that when you define the variable with {} or []

Jochem•5d ago

this might help too https://javascript.info/object-copy

Object references and copying

Vandana•5d ago

javascript.info is at extreme high level.

Jochem•5d ago

I don't really agree with that. It's a complete tutorial from the very very basics at "Hello world!" up to advanced topics

Vandana•5d ago

That is there its too vast i mean covers so many things.

Jochem•5d ago

the question you're asking doesn't have a satisfying answer at a beginner level though. The beginner answer is " == doesn't work for objects or arrays" the reasons and mechanisms behind that are pretty complicated

Vandana•5d ago

complicated for what?

Jochem•5d ago

They're more complicated than you need to know to use the language, if you accept one or two simple rules ( like == doesn't work for objects and arrays, and assigning one object/array to another variable doesn't make a copy but a second reference). If you're saying javascript.info's explanation I linked is too complicated, then there's not much else to be done than to accept those two rules and try to read the explanation again later when you're more familiar with javascript

Vandana•5d ago

yes this helps though.I mean here the concept of Object is too vast it has Symbol,object conversions at the end of the topic.I didnt mean its bad.

Jochem•5d ago

oh, yeah, Objects are a big topic for sure

Vandana•5d ago

Then why the term EVERYTHING IS OBJECT .

Jochem•5d ago

because they are... just that the primitives (number, string, boolean...) are special this is pretty far into the mechanics, but iirc comparison in javascript works by having each type implement its own comparison logic. For strings, there's comparison logic that compares the values. For objects, that logic just compares references

Vandana•5d ago

iirc full form?

Jochem•5d ago

if I remember correctly

Vandana•5d ago

so to summarise,except object and arrays (reference),rest all data types like string boolean are all Values.AM I RIGHT?

Jochem•5d ago

Yeah

Vandana•5d ago

cool

Aoi•5d ago

Welcome to the world of js....

Vandana•5d ago

digging JS And that is why yesterday you said const object can be modified meaning reference should be const, values can be changed

Jochem•5d ago

yup

Vandana•5d ago

Dont you feel this is kinda mugging

Jochem•5d ago

mugging?

Vandana•5d ago

And @Aoi mentioned to make the values of object const also ,object.freeze() we have to use.

Jochem•5d ago

it's definitely an odd quirk of the language

Vandana•5d ago

remembering/byhearting.becuase we cant imagine address and value etc etc

Aoi•5d ago

For now, I don't think you should get into Object.freeze(). It will be better if you get more used to js before you use it Anyways it's not very useful in most cases

Jochem•5d ago

yeah, it's just something to keep in mind, especially when you run into bugs in your code and I definitely agree with Aoi, this isn't something you worry about most of the time just use const by default, let if you can't use const, and be aware that objects with const can be changed but not reassigned

Vandana•5d ago

Got it! But then people have to diggin a lot to understand else it will be kinda overwhelming most people wont understand refernce in object.

Aoi•5d ago

Objects and references are topics most people take time to understand, but they are also quite important. btw if you are more interested in this, there might be few more resources in #resources

Vandana•5d ago

 const product1 = {
            name : 'Football',
            price:500

        }
        const product2 = product1;
        console.log(product2)
        product2.name ='volleyball';//product1.name=>volleyball

 const product1 = {
            name : 'Football',
            price:500

        }
        const product2 = product1;
        console.log(product2)
        product2.name ='volleyball';//product1.name=>volleyball

we cant change name of only product2??

Jochem•5d ago

not without making a clone of product1

Vandana•5d ago

clone this is a diiferent topic then in objects?

Jochem•5d ago

https://javascript.info/object-copy#cloning-and-merging-object-assign

Object references and copying

Jochem•5d ago

the next heading is also relevant, nested cloning not for this particular object, but if you had say

const product1 = {
  name: "football",
  price: 500,
  category: {
    name: "sports equipment",
    discount: 5,
  }
}

const product1 = {
  name: "football",
  price: 500,
  category: {
    name: "sports equipment",
    discount: 5,
  }
}

then you'd need to do a nested clone of the object cause that category property is a reference to an object, and if you just blindly clone the value of category, then that value will still refer to the same category object in memory as the first product

Vandana•5d ago

is there any usecase for nested cloning in real-time is it widely used?

Jochem•5d ago

yeah, quite often objects will be more complex than just one level of properties, they'll have child objects and arrays all over

Vandana•5d ago

even structured clone can be done right?

Jochem•5d ago

you can use structuredClone, yeah

Vandana•5d ago

By this process of cloning two objects have same reference but values can be targeted for individual object

Jochem•5d ago

no, a new object is created that has separate and independent values new reference to a new object

Vandana•5d ago

This was my question actually,two objects same reference,only values of targetd object should be modified.not both the values of obj should alter. simulateously

Jochem•5d ago

you can't modify the values independently if you have two objects with the same reference to edit them independently, you have to create a clone, and that clone has a new reference to a new area of memory

Vandana•5d ago

This kind of usecase isnt there right?

Jochem•5d ago

I don't know about use case, but it's not possible in javascript

Vandana•5d ago

Okay.. Thanks for info.

Jochem•5d ago

no problem

Gaming

Programming

Const objects can be modified