3. Accessing by value and references
Tags: javascript, webdev, beginners, programming
Published: 2022-01-14 12:04:13

### **Articles**

- [Explaining Value vs. Reference in Javascript — Arnav Aggarwal](https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0) 100%
- [Primitive Types & Reference Types in JavaScript — Bran van der Meer](https://gist.github.com/branneman/7fb06d8a74d7e6d4cbcf75c50fec599c) 100%
- [Value Types, Reference Types and Scope in JavaScript — Ben Aston](https://medium.com/@benastontweet/lesson-1b-javascript-fundamentals-380f601ba851) 100%
- [Back to roots: JavaScript Value vs Reference — Miro Koczka](https://medium.com/dailyjs/back-to-roots-javascript-value-vs-reference-8fb69d587a18) 100%
- [Grasp “By Value” and “By Reference” in JavaScript — Léna Faure](https://hackernoon.com/grasp-by-value-and-by-reference-in-javascript-7ed75efa1293) 100%
- [JavaScript Reference and Copy Variables — Vítor Capretz](https://hackernoon.com/javascript-reference-and-copy-variables-b0103074fdf0) 100%
- [JavaScript Primitive vs Reference Values](http://www.javascripttutorial.net/javascript-primitive-vs-reference-values/) 100%
- [JavaScript by Reference vs. by Value — nrabinowitz](https://stackoverflow.com/questions/6605640/javascript-by-reference-vs-by-value) 100%
- [JavaScript Interview Prep: Primitive vs. Reference Types — Mike Cronin](https://dev.to/mostlyfocusedmike/javascript-interview-prep-primitive-vs-reference-types-3o4f) 100%]

---
## Primitve & Objects
### Primitive
Primitve values are immutable. So, variable storing primitve value allocates fixed amount of memory. And we say that those variables are **accessed by value**. 
### Object
Objects are mutable. For performance reasons, reference(address) of that object is stored in variable. The real objects are stored in heap. We say that those variables are **accessed by references**.

---
## Copying variable
One rule: in-memory value is copied.
- primitve value: actual value is stored in memory
	-> actual value is copied
  As actual values are copied, copied variables has no relationships.
 
``` jsx
let x = 10;
let y = 'abc';
let a = x; // a = 10, but no relationship with x
let b = y; // b = 'abc', but no relationship with y

x = 5; 
console.log(a); // 10
```

- object: reference of object is stored in memory
	-> reference of the object is stored.
``` jsx
object = {first:"second"};
let object2 = object // object2 and object has same reference that points 
                     //to same object

 ```
 ## Reassigning variable
 One rule: reassigning variable -> variable points to new primitve or object
 ``` jsx
a = 4;
a = 5;
```
As primitve values are immutable, 4 didn't changed to 5. 4 has been replaced with 5. 
``` jsx
let object = {first: 'second'}; // object stores a reference <#001>
object = {third: 'fourth'}; // reference <#001> replaced to <#002>
```
Let's say that {first:'second'}'s address is #001 and {third: 'fourth'}'s address is #002. 
Then first variable `object` stores #001. And when it has been assigned with new object, #001 is replaced to #002. 

In above case, data stored in address #001 has losts its reference to object. Then Javascript engine performs **garbage collection**, which finds unneccessary memory and deletes it.

However, modifying the property of object works little different.
``` jsx
const reference = {first: 'second'}; // address #001
reference.third = "fourth";
console.log(reference) // {first:'second', thrid: 'fourth'};
```
Modifying the property of the assigned object changes the underlying object, not assigning new object. Reference stored in the `reference` has not replaced.

---
## Passing variable to parameter
Passing variable as a parameter of function is same as copying variable; 
- primitive type: actual value is passed.
- object: reference of object is passed.

### Pure funciton
Pure funciton is a function that doesn't affect anything outside the scope. `Array.map`, `Array.filer` are written as pure function.

If function only takes primitve vaule as parameter, and doesn't uses any variable outside scope, it's pure funciton. 
If object is passed to parameter and modified inside the function, change it makes may persist in outer scope.
``` jsx
function impure(object) {
	object.age = 20;
}
John = {name: 'John',
       gender: 'male'};
impure(John);

console.log(John.age) // 20;
```
However, we should be careful to distinguish modifying property and reassigning variable. Reassigning doesn't affect the underlying object.
``` jsx
function reassigning(object){
	object = {name: 'Alex',
              gender: 'male'};
}
John = {name: 'John',
       gender: 'male'};
reassigning(John);
console.log(John); //{name: 'John', gender: 'male'};
```
In above example, first, reference stored in `John` is copied and stored in `object`. Next, new reference is stored in `object` in the `reassigning` function. This doesn't affects `John`. After the function is returned, variabe `object` is garbage collected.

### spread operator
There can be situation where we want to keep the originality of object and apply the function on copied one. In this case, we can use spread operator. It works as follows.
``` jsx
let car2 = {...car1};
```
Then, new reference is stored in `car2` with same properties of car1. So modifying car2 doesn't affects `car1`.

---
## == & ===
When equality operators are used in reference-type variables, they check if the references are the same. 
``` jsx
let arr1 = ['Hi'];
let arr2 = ['Hi'];
console.log(arr1 === arr2); // false

console.log([10] === [10]); // false
```
To check if the properties of the object are same, 
``` jsx
let arr1 = ['Hi'];
let arr1str = JSON.stringify(arr1);
let arr2 = ['Hi'];
let arr2str = JSON.stringify(arr2);
console.log(arr1str === arr2str); // true
```
We have changed it to string, which is primitive data type.