# JavaScript Object References, in Simplistic Way!

# Introduction

Actually a topic like this hardly need an introduction. Knowing the concept of reference, how to pass-by-value and pass-by-reference etc. are considered to be the basic JavaScript concept. 

So, what's my motivation behind writing this post? I felt, it will be great to see some of these in action visually using animations. Won't that be cool! Also, understanding some of these basic concepts visually will encourage us to realize that, javascript's Garbage Collection is a very easy concept to understand(and practice).

Let's dive in...

# Primitives and Others

Javascript has five *Primitive * data types that are *Passed by Value*: Boolean, String, Number, null, and undefined.

Rest of the data types are called non-primitives and those are mostly Objects(yes, including *Array*, *Function* and *Object* itself). These non-primitives types are *Passed by Reference*.

# Primitives By Value
When a Primitive type is assigned to a variable, the variable holds the primitive value.
```javascript
let x = 10;
let y = 'Tapas';
let z = true;
```
Here x holds the value 10; y holds the value 'Tapas' and z holds the value true. When these are passed as parameter, they continue to hold the value in them. 

See the demonstration below:

![value.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1556300337593/yFGf_oCa4.gif)

When we assign(using = operator) these variables to other variables, the value gets copied to the new variable. These are copied by Value. 

See the demonstration below:

![assign_value.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1556300351145/Sy37T-rPz.gif)

We can continue to change the values for both the variables Separately and Independently. Consider the example below:
```javascript
let x = 10;
let y = 'Tapas';
let a = x;
let b = y;
console.log('Initially: ', x, y, a, b);
x = 55;
y = 'Adhikary'
console.log('After a change: ', x, y, a, b);
```
And the Output:
```bash
Initially:  10 Tapas 10 Tapas
After a change:  55 Adhikary 10 Tapas
```
As you see, changing the original Primitive value, doesn't change the copied Primitive value at all. Because, *When a Primitive type is assigned to a variable, the variable holds the primitive value independently*.

# Objects(non-Primitives) By Reference

## Reference
Let us start by the definition. 

> A reference is a pointer to the object’s location in memory(Heap). 

If we assign a non-Primitive value to a variable, that variable doesn't actually holds the value, rather holds the reference.
Consider the code below,
```javascript
let x = []; // Array is non-primitive
x.push(1);
x.push(2);

console.log(x);
```
However the output is:
```bash
[1,2]
```
But there is lot that goes in background. The variable `x` given a reference to that value, `[1,2]`. This reference points to a location in memory say, with address `0x4db`.

See the demonstration below:

![reference.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1556300365068/2i2WP5kJq.gif)

Now, consider a code like this,
```javascript
let x = [1,2,3,4];
let copyX = x;

console.log('Before Change: ', x, copyX);

x.push(500); // change one array

console.log('After Change: ', x, copyX);
```
Are you surprised by this output, that both `x` and `copyX` now changed?
```bash
Before Change:  [1, 2, 3, 4] [1, 2, 3, 4]
After Change:  [1, 2, 3, 4, 500] [1, 2, 3, 4, 500]
```
This is because, when a non-primitive(or reference type) value gets assigned(using = operator) to another variable, the actual value doesn't get copied. Rather the memory address of that value(reference) gets copied. Hence both `x` and `copyX` point to the same reference which is nothing but the memory address where the array is stored.

See the demonstration below:

![reference_copy.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1556300379516/hVj6MhQX7.gif)

## What if the Reference goes void, Can it happen?
Consider the following code,
```javascript
let x = {
    'name': 'Thought Dump'
};
x = {'rating': 4};
```
So what's going on here? Let's see step by step:

- Variable `x` holds the reference(memory address say, `0x4db`) to `{'name': 'Thought Dump'}'.
- Then we reassign `x` with another object. It replaces the old reference and now, `x` holds a new reference(memory address say, `0x37d`) to `{'rating': 4}`.
- For a while both the objects still present in the Heap Memory.
- When there are no references left to an object(as it is the case with `0x4db`), the Javascript engine may trigger *Garbage Collection*. In this process the engine can go ahead and safely delete it from the memory. In our example, the object `{'name': 'Thought Dump'}' is no longer accessible and is eligible for garbage collection by the JavaScript engine.

See the demonstration below:

![no_refernce.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1556300396026/xqlZa-F8h.gif)

All these concepts explained above are the base to understand how Garbage Collection works and the algorithms behind it. We will see that in an upcoming post.

Hope you liked this one, Cheers!