Mutation

Question 1

Can objects be inside or nested in other objects in our mental model?

Answer 1

Objects might appear “nested” in code, but in our universe, each object is completely separate. An object cannot be “inside” of another object! If you have been visualizing nested objects, now is the time to change your mental model.

Question 2

Can two different objects have a property wiring to the same object?

Answer 2

Yes!

Question 3

Can properties ever point to variables or other properties?

Answer 3

Nope! A property always points to a value! It can’t point to another property or a variable. In general, all wires in our universe point to values.

Question 4

What’s a common gotcha when mutating objects?

Answer 4

Because non=primitives (such as objects or functions) are passed as reference changing them can change the value of all other variables or properties referencing that object.

This is why the intuition of objects being “nested” is so wrong! It makes us forget that there may be many objects pointing to the object we changed.

Question 5

How do we get around the common issue of mutating objects that are potentially used elsewhere?

Answer 5

Break the link! Create a new object using the values of the previous using something like destructuring or object.assign. Note if there are nested wires to other objects we’d need something like a deepclone from lodsash.

It’s worth noting that mutating new objects that you’ve just created is always okay because there are no other wires pointing to them yet.

Question 6

Once you set a const variable can you mutate its contents?

Answer 6

If the contents are one of our non-primitive values such as an object or a function then yes you can mutate it! You just can’t reassign it.

Question 7

What does const do?

Answer 7

Const prevents variable reassignment—not object mutation.

Question 8

What will the following log?

const spreadsheet = { title: 'Sales' };
const copy = spreadsheet;
copy.title = copy.title + ' (Copy)';

console.log(spreadsheet.title); // ???

Answer 8

// Sales (Copy)

Question 9

What will the following log?

let ilana = {
  address: { city: 'New York' }
};
let place = ilana.address;
place = { city: 'Boulder' };
let abbi = {
  address: place
};

console.log(ilana.address.city); // ???

Answer 9

// New York