Const objects can be modified

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

54 Replies

Jochem•5mo 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•5mo 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•5mo 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

VandanaOP•5mo 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•5mo 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

VandanaOP•5mo ago

Oh this is so tricky!

Jochem•5mo ago

yeah, it's a bit unintuitive sometimes

VandanaOP•5mo 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•5mo 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•5mo ago

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

Object references and copying

VandanaOP•5mo ago

javascript.info is at extreme high level.

Jochem•5mo 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

VandanaOP•5mo ago

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

Jochem•5mo 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

VandanaOP•5mo ago

complicated for what?

Jochem•5mo 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

VandanaOP•5mo 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•5mo ago

oh, yeah, Objects are a big topic for sure

VandanaOP•5mo ago

Then why the term EVERYTHING IS OBJECT .

Jochem•5mo 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

VandanaOP•5mo ago

iirc full form?

Jochem•5mo ago

if I remember correctly

VandanaOP•5mo ago

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

Jochem•5mo ago

Yeah

VandanaOP•5mo ago

cool

Aoi•5mo ago

Welcome to the world of js....

VandanaOP•5mo 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•5mo ago

yup

VandanaOP•5mo ago

Dont you feel this is kinda mugging

Jochem•5mo ago

mugging?

VandanaOP•5mo ago

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

Jochem•5mo ago

it's definitely an odd quirk of the language

VandanaOP•5mo ago

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

Aoi•5mo 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•5mo 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

VandanaOP•5mo 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•5mo 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

VandanaOP•5mo 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•5mo ago

not without making a clone of product1

VandanaOP•5mo ago

clone this is a diiferent topic then in objects?

Jochem•5mo ago

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

Object references and copying

Jochem•5mo 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

VandanaOP•5mo ago

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

Jochem•5mo ago

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

VandanaOP•5mo ago

even structured clone can be done right?

Jochem•5mo ago

you can use structuredClone, yeah

VandanaOP•5mo ago

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

Jochem•5mo ago

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

VandanaOP•5mo 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•5mo 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

VandanaOP•5mo ago

This kind of usecase isnt there right?

Jochem•5mo ago

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

VandanaOP•5mo ago

Okay.. Thanks for info.

Jochem•5mo ago

no problem

Gaming

Programming

Const objects can be modified