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.

step2_

step3

step4

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