TodayILearned- 2023-03-20

TIL

Today’s TIL is on objects. Tl;dr, I love the ... syntax. 💖

• to delete a key-value pair within an object, use delete object.key syntax. e.g. if you want to delete the age key-value pair in person object -> delete person.age
• if you access the key age after deleting it, there won’t be an error though, it’s just that person.age will return undefined
• technically this means that you could “delete” key-value pair by directly setting person.age = undefined, but in general, you shouldn’t be setting variables to undefined values (usually you would set it to null to reset a value).

difference between null and undefined

• null: this person object does have an age property, we just don’t have a value in there right now
• undefined: this person object doesn’t even have an age property (to be really nitpicky, the age property is technically still there, but treat it as if it doesn’t exist).

Primitive values vs. reference values:

Primitive values:

• boolean
• number
• string
• undefined
• null
• symbol

Reference values:

• objects
• arrays
• function

For primitive values, copying/cloning the VALUE that a variable holds to another is easy. you simply assign the second variable to the first. for instance:

const numberOne = 3;

// you want to copy that value of 3 to this variable
const secondNumber = numberOne;

The thing about primitive values is that, if you now change the value of secondNumber = 5 and console.log both numberOne and secondNumber, they are now two different variables holding two different values. This is because essentially, numberOne and secondNumber are two separate “boxes,” per se. These two boxes initially held the same value of 3, but one has changed.

console.log(numberOne); // 3
console.log(secondNumber); // 5 

However, this is NOT the case for reference values - if you use the same const object2 = object1 syntax, what you’re copying isn’t the data stored inside itself, but the REFERENCE - aka the ‘address in memory.’ In other words, when you make a copy of object1, you aren’t actually creating another brand new, independent object. You’re simply copying its address - so now, having object1 and object2 is simply equivalent to having two separate road signs that still point to one existing address.

Therefore, if you have the following code:

const object1 = {
   name: 'Boyeon',
   location: 'Korea',
}

// create a 'copy' of object1
const object2 = object1; 

and you try to change the object2.location:

object2.location = 'France';

console.log(object1, object2); // {name: 'Boyeon', location: 'France'}   {name: 'Boyeon', location: 'France'} 

You notice that the change in the location key-value pair is reflected across both object1 and object2 - this is because both objects are pointing to the same address, the same point in memory. It is for this reason that objects and arrays are called reference values.

Conversely, this is why if you create two objects separately, like the following:

const oneObject = {};
const secondObject = {};

And you try to see if they are equal by console logging oneObject === secondObject, you will get false, even though the contents of the two objects are empty (and thus the same). Why? Because these two objects were created separately, they each are pointing to two different places in memory - kind of like having two separate addresses to two empty houses. Are both houses(objects) empty? Yes. But are they located in the same address(memory)? No.

So how can we create an independent copy of an object from an already existing one? Enter the ... spread syntax.

const onePerson = {name: 'Max', age: 29}
const anotherPerson = {...onePerson}; 

anotherPerson.name = 'Minnie'

console.log(onePerson, anotherPerson) // {name: 'Max', age: 29}, {name: 'Minnie', age: 29}

A little CAVEAT though - the spread operator does not create a deep clone - that is, if the object has nested objects or arrays inside it, the reference values will be copied.

I’m pretty proud of the progress that I’ve been making on the udemy course — and it has definitely filled in some of the gaps that I’ve vaguely known about my JavaScript knowledge. Onwards, to another gap in my knowledge.