primitivesAndObjects.md

[JavaScript] - Primitives vs Objects

Primitive, Object

Primitives' values are stored in the call stack

Primitives (string, number, bigint, boolean, undefined, symbol, null)

// this is a primitive so its value are stored in the stack
// Identifier age - Address 001 - Value 30
let age = 30;
// oldAge at this step is also pointed to Address 001
// Identifier [age, oldAge] - Address 001 - Value 30
let oldAge = age;
// when age is set to 31, a new memory in the stack is created to hold this new value so that it won't change oldAge
// Identifier oldAge - Address 001 - Value 30
// Identifier age - Address 002 - Value 31
age = 31; 
console.log(age); // age is thus pointed to the new memory (Address 002 - Value 31)
console.log(oldAge); // oldAge is still pointed to the old memory (Address 001 - Value 30)

References' values are stored in the heap

// In this case the object's value are stored in the heap with a corresponding address:
// HEAP: Address D30F - Value { name: 'Jonas', age: 30 }
// the me identifier will be provided an address in the stack with the value pointed to the heap address:
// STACK: Identifier me - Address 003 - Value D30F
const me = {
  name: 'Jonas',
  age: 30,
};

// friend will now point to the same address as me
// Identifier [me, friend] - Address 003 - Value D30F
const friend = me; 
friend.age = 27; // so updating the age here will essentially affect both me2 and friend
console.log('Friend: ', friend);
console.log('Me: ', me);

Variables declared with const is only immutable for primitive values and not not reference value.

Shallow Copy

const jessica = {
  firstName: 'Jessica',
  lastName: 'Williams',
  age: 27,
  family: ['Alice', 'Bob'], // array is an object
};

// this only work on the first level so if we have another nested object inside jessica,
// this inner object is still pointed to the same memory. Thus we call this a shallow copy.
const marriedJessica = Object.assign({}, jessica);
marriedJessica.lastName = 'Davis';
marriedJessica.family.push('Mary');
marriedJessica.family.push('John');

console.log('Before marriage: ', jessica); // lastName works as intended but family are still shared
console.log('After marriage: ', marriedJessica);