When it comes to memory allocation, Javascript have the Call stack and the memory heap and they both work differently let's understand the difference between both of the before diving into Value vs Reference.

The Call Stack and Memory Heap of JS

The call stack is used to keep track of the functions that are currently executing in a program. It maintains a list of stack frames, where each frame represents a function call. When a function is called, a new stack frame is added to the call stack, and when the function completes its execution, the corresponding stack frame is removed.

On the other hand, the memory heap is an area of memory where data objects such as arrays and objects are stored. When a variable is declared and assigned a value, JavaScript will allocate a block of memory on the heap to store the data. The variable that references the data points to the memory location on the heap where the data is stored.

In simple terms, the call stack is used to keep track of the program execution flow and the memory heap is used to store the data. The call stack and the heap work together to ensure that the program executes correctly.

It's important to note that the call stack has a limited size and if the call stack gets too large, it can cause a stack overflow error. On the other hand, the heap does not have a fixed size, and it is subject to garbage collection, which means that when an object or variable is no longer needed or reachable, JavaScript will automatically release the memory allocated for it.

Pass by Value

A copy of its value is passed to the function when a variable is passed by value. This means that any changes made to the variable within the function have no effect on the original variable outside of the function.

Example

Copy codelet x = 5;

function increment(x) {
    x++;
}

increment(x);
console.log(x); // Output: 5

In this example, we pass the variable x to the increment function. Within the function, we increment the value of x by 1. However, when we log the value of x outside of the function, it is still 5, as the original variable was not affected by the change made within the function.

Pass by Reference

When a variable is passed by reference, a reference to the variable's memory location is passed to the function. This means that any changes made to the variable within the function will also affect the original variable outside of the function.

Example

Copy codelet x = { value: 5 };

function increment(obj) {
    obj.value++;
}

increment(x);
console.log(x.value); // Output: 6

In this example, we pass the object x to the increment function. Within the function, we increment the value property of the object by 1. When we log the value property of the object outside of the function, it is 6, as the original object was affected by the change made within the function.

It is important to note that in JavaScript, primitive data types (such as numbers, strings, and booleans) are passed by value, while objects and arrays are passed by reference.

Creating a copy of Array or Object

Therefore, if we want to create a new copy of an object or array, we have to use methods such as Object.assign(), JSON.parse(JSON.stringify()), or Array.slice() to create a new reference.

Copy codelet originalArray = [1, 2, 3];
let newArray = originalArray.slice();

originalArray[0] = 10;
console.log(originalArray); // Output: [10, 2, 3]
console.log(newArray); // Output: [1, 2, 3]

In this example, we create a new array by calling the slice() method on the original array. Since the new array is assigned a new reference, changes made to the original array do not affect the new array.

Conclusion

In conclusion, understanding the difference between pass by reference and pass by value is crucial for writing efficient and bug-free code in JavaScript. While primitive data types are passed by value, objects and arrays are passed by reference. Always keep in mind which data type you are working with and how it is passed to a function, to avoid any unexpected