Value VS Reference in Javascript

Value Vs. Reference is a very confusing part of Javascript. But understanding the difference between value versus reference is needed to pass a very difficult quiz in the Operation Spark bootcamp. The quiz has lots of tricks and red herring details meant to confuse you. So even if you understand the difference my first piece of advice is to proofread the quiz questions and code. But to help you really understand and visualize the difference between the two I will try and explain that here.
Simply copy the value
When I say copy by value I mean if you tried to make a variable and initialize it with the name of another variable like this.

Above shows the value of the num1 variable being copied to the num2 variable. So if you were to mutate the value of num2, the num1 variable would remain unchanged.

This is because the value of num1 is a simple data type. When you try to copy a simple data type it only copies the value itself. So when the name num1 is used on line 2 it is only being resolved to ‘1’. num1 and num2 are separate from each other. There is only a variable called num1 pointing at the value 1. And another variable called num2 pointing at its own copy of the value 1.
After line 2 whatever happens to one of these variables will not affect the other.
- It shall have many titles!
- If you try to copy a complex data type the value is not copied. This new variable becomes another name to reference complex data by.
This means if you attempt to copy an object by its variable name to another variable the two variables will be referencing the same object. So if you were to mutate the object using its first name the value of the second name would also change. Here is an example below.

As you can see above, obj2 was changed even though it was never explicitly used. However! This only works if you are trying to mutate the value of a complex data type. There is a big difference between reassigning and mutating. Mutating is changing a small part of the data, like one property at a time. Reassigning a variable is different because it affects the variable, not the value. When reassigning a variable name to something else the original object, or complex data type, is left unaffected. As seen below.

- Stack and Heap Memory
- A better way to visualize this is by talking about how Javascript stores data in its memory. There are two places Javascript stores data, the stack memory and the heap memory.
The stack memory is for simple data types, like numbers, strings, and undefined. The stack memory is fixed when it knows what data to expect because simple data only needs a certain amount of memory.
The heap memory is of an indefinite size and stores complex data types. Complex data types need to have an indefinite memory allocated to them because they can be an infinite size (or until the computer runs out of storage). This is because a complex data type can have any number of simple data types inside them. So the heap memory gives as much storage as needed for the complex data type at the time of initialization and gives it more when needed.

Above is an example of Stack and Heap memory. The object and function are stored in the heap memory while the variable names and the string variable are stored in the stack memory. Both newEmployee and employee are pointing at the employee object.
-Conclusion
In conclusion, knowing the difference between javascripts copy by value and reference is tuff, but very necessary to pass the Operation Spark bootcamp and beyond. And don’t worry, once you understand the method behind the madness, it will all make sense. It is probably necessary to become a good javascript developer. I haven’t found a use for it yet but maybe you can.
Credit:Memory Management in JavaScript - GeeksforGeeks