I've been working with JavaScript for 4 years and I still meet interesting scenarios. The code below is a simplified example of the issue I faced recently in my day-to-day work.
let color = {value: 'brown'};
let cat = {color: color};
color = {value: 'white'};
console.log(cat); // ?
Take a moment, read the code and think what the console.log
output will be π€.
And the answer is
{
color: {value: 'brown'}
}
Wait. We know that in JS non-primitive variables are passed by reference. But it's obvious that cat
object didn't change after color
variable modification.
So, what's going on here? Let's analyze the code step by step.
First of all, we declare variable color
, create a new object {value: 'brown}
and assign this object to the color
.
After that the new object {color: color}
is created and it's assigned to the new variable cat
.
In the end we create one more object {value: 'white'}
and assign it to the existing variable color
.
The question is: why the object cat
hasn't changed?
β In JavaScript it's not possible for variables to reference other variables. It's possible in other languages, but not in JS.
After the 2nd line is executed, cat.color
reference the {value: 'brown'}
object, not the color
variable. That's why assigning a new object to the color
variable don't change the cat
object.
Hope it makes sence. Stay curious and keep coding! π
P.S. Test yourself. What will be the output if we slightly change the code
let color = {value: 'brown'};
let cat = {color: color};
color.value = 'white';
console.log(cat); // ?
Top comments (0)