Object Oriented Programming (Starter Pack) - PintoGideon/Recursive-React-Tree-Component GitHub Wiki
Welcome to the Recursive-React-Tree-Component wiki!
Refresher on Javascript
Let's declare a sherlock variable
let sherlock={
surname:"Holmes",
address:{city:'London'}
We have two completely seperate objects here. Two pairs of curly braces means two objects.
Let's declare another variable
let john={
surname:'Watson',
address:sherlock.address
}
When we use address:sherlock.address
, we must figure out the value of sherlock.address and point the address property wire at that value. It's the value that matters and not how we found it.
Changing the properties now.
john.surname='Lenon';
john.address.city='Malibu'
Interestingly, the object that both john
and sherlock's
address properties are pointing at now has a different city property value. It is not pointing at the 'Malibu' string.
How do we actually fix the code so that John moves to Malibu alone?
Mutation
Let's look at our two mutations from our previous example
john.surname='Lenon'
john.address.city='Malibu'
The first line mutates the object john
points at- concretely, it's surname property. This makes sense.
However, the second line does something very different.
It mutates a completely different object-the one we can reach via john.address. And if we look at the diagram, we know it's the same object that we can also reach via sherlock.address.
Possible ways to fix this
john.surname='Lenon';
john.address={city:'Malibu'}
The difference is the second line is subtle.
When we had john.address.city='Malibu
, the wire on the left was john.address.city. we are mutation the city property of the object reachable via john.address. But the same object was also reachable via sherlock.address
.
With john.address={city:'Malibu'}
, the wire on the left is john.address
. We are mutating the address property of the object that john
points at.
We are only mutating the object representing John's data.
Alternative Solution: No object mutation
john={
surname:'Lenon',
address:{city:'Malibu'}
Let's make sure the mental mode is complete with examples
const spreadsheet={title:'Sales'};
const copy=spreadsheet;
copy.title=copy.title + ' (Copy)';
console.log(spreadsheet.title) // Sales (Copy)
let batman={
address:{city:'Gotham'}
};
let robin={
address:batman.address
}
batman.address={city:'Ibiza'};
console.log(robin.address.city); // "Gotham"
let chip = {
address: {city:'DisneyLand'}
};
let dale={
address:{
city:chip.address.city
}
}
chip.address={city:'Tokyo'}'
console.log(dale.address.city) //'Disneyland'
let music={
taste:'classical'
}
let onion={
taste=music.taste
}
console.log(music.taste) //'classical'
onion.taste='unami'
console.log(music.taste) //'unami'
let ilana={
address:{city:'New York'}
}
let place=ilana.address;
place={city:'Boulder'};
let abbi={
address:place
};
console.log(ilana.address.city) //"new York"
let rick={
address:{city:'C-123'}
}
let morty={
address:rick.address
};
rick.address={city:'35C'}
console.log(morty.address.city)//'C-137'
let daria={
address:{city:'Lawndale'}
}
let place=daria.address;
place.city='LA';
let jane={
address:place,
};
console.log(dara.address.city) //L.A
const charlotte={
mother:{age:20}
child:charlotte.mother
}
console.log(charlotte.mother.age) //20
console.log(charlotte.child.age) //20
charlotte.mother.age=21
console.log(charlotte.mother.age); //21