Copy By Value And Reference

One of the fundamental differences of objects versus primitives is that objects are stored and copied “by reference”, whereas primitive values: strings, numbers, booleans, etc – are always copied “as a whole value”.

When you copy an object b = a both variables will point to the same address. This behavior is called copy by reference value. Strictly speaking in JavaScript everything is copied by value. When it comes to objects though, the values happen to be the memory addresses of those objects.

Whenever we are copying the value in premitive data types, the value itself gets copied. In non-premitive , whenever you are copy, you don't copy the whole value, you copy the reference or address to a specific location where that object exists. The value stays inside the variable in premitive, but in non-premitive the address stays inside the variable and the address is what holds the whole object somewhere in the memory.

Objects are assigned and copied by reference. In other words, a variable stores not the “object value”, but a “reference” (address in memory) for the value. So copying such a variable or passing it as a function argument copies that reference, not the object itself.

Copy by value

In a primitive data-type when a variable is assigned a value we can imagine that a box is created in the memory. This box has a sticker attached to it i.e. the variable name. Inside the box the value assigned to the variable is stored.

Copy by reference

In case of a non-primitive data-type the values are not directly copied. When a non-primitive data-type is assigned a value a box is created with a sticker of the name of the data-type. However, the values it is assigned is not stored directly in the box. The language itself assigns a different memory location to store the data. The address of this memory location is stored in the box created.

Pass by Value and Pass by Reference

Pass By Value: In Pass by value, function is called by directly passing the value of the variable as an argument. So any changes made inside the function does not affect the original value.

In Pass by value, parameters passed as an arguments create its own copy. So any changes made inside the function is made to the copied value not to the original value . Pass by Reference: In Pass by Reference, Function is called by directly passing the reference/address of the variable as an argument. So changing the value inside the function also change the original value. In JavaScript array and Object follows pass by reference property.

In Pass by reference, parameters passed as an arguments does not create its own copy, it refers to the original value so changes made inside function affect the original value.

Mutable and Immutable

Mutable values are those which can be modified after creation Immutable values are those which cannot be modified after creation

So the fundamental difference between primitive and non-primitive is that primitive values are immutable and non-primitive values are mutable and Primitives are stored by value while Non-Primitive (objects) are stored by reference.

Example 1

let string = 'hello world'
string = 'this is a string';
console.log(string) // Output -> 'this is a string'

It is important to note here that the variable in which the primitive value is stored can still be reassigned a new value as shown in Example 1, but the existing value can not be changed as shown in Example 2. A primitive value can be replaced, but it can't be directly altered.

Example 2

let string = 'this is a string'
string[0] = 'T'
console.log(string) // Output -> 'this is a string.'

Two discrepancies of Data Types in JavaScript

We know null is a data type in JavaScript. If we find out the data type of null it should return null but actually it returns an object data type.

Confusing isn’t it, the data type of ‘null’ is an object instead of null. Well technically it should be null, but this is a discrepancy in JavaScript which we will have to accept and abide by.

The other talking point is the data type of a function in JavaScript. When we find the data type of a JavaScript function it returns a function. We know that JavaScript does not have a function data type, then why it shows function data type.

The point is a function data type is actually an object. All functions in JavaScript has properties of an object. It is only a discrepancy in JavaScript that the data type of a function is returning a function, instead of an object. This too we have to accept and remember.