Stack and Heap In Js

let person = {
    name: "James",
    age: 23,
    isMale: true,
};
console.log(person);


let newPerson = person;
newPerson.isMale = false;
console.log(person);

We made a copy of the person object in the newPerson variable and tried to change the isMale property of the newPerson. Why did the person object change???

Stack and heap are two areas in memory where data is stored. The stack is used for static memory allocation, while the heap is used for dynamic memory allocation.

Static memory allocation means that the size and location of the memory is fixed at compile time, while dynamic memory allocation means that the size and location of the memory can change at runtime.

In JavaScript, primitive values (such as numbers, strings, booleans, etc.) are stored in the stack, while objects (such as arrays, functions, etc.) are stored in the heap.

Primitive values are immutable and have a fixed size, so they can be easily stored and accessed in the stack. Objects are mutable and have a variable size, so they need to be stored and accessed in the heap, which is more flexible but also slower.

In the diagram, you can see three examples of values stored in the stack:
name = “Ana”; age = 23; and info=0xc0004b4.

The first two are primitive values, while the last one is a reference to an object or array in the heap.The diagram also shows two examples of objects or arrays stored in the heap: array/object and array/object2. These are accessed by using the reference stored in the stack, such as info. The diagram illustrates how data is stored and referenced in both regions of memory.

you can think of person as info, and newPerson as another variable that has the same value as info.Both of them point to the same object in the heap, which is array/object.When you change a property of array/object, it affects both person and newPerson.

So what is the solution to copy an object without the same reference?😁

One way to make a deep copy of an object is to use the JSON.stringify() and JSON.parse() methods, which convert an object into a JSON string and then parse it back into a new object.

let person = {
  name: "James",
  age: 23,
  isMale: true,
};
let newPerson = JSON.parse(JSON.stringify(person));

Another way to make a shallow copy of an object is to use the Object.assign() method, which copies all the own properties of one or more source objects into a target object.

let person = {
  name: "James",
  age: 23,
  isMale: true,
};
let newPerson = Object.assign({}, person);

Another one way to make a shallow copy of an object is to use the spread (…) syntax, which copies all the enumerable properties of an object into a new object.

let person = {
  name: "James",
  age: 23,
  isMale: true,
};
let newPerson = { ...person };

:)