The primitive type vs Non-primitive type in JavaScript

Primitive type

• number
• boolean
• string
• undefined
• null
• symbol

Non Primitive type (reference type)

• type of {} (object)
• type of [] (object)
• type of function(){} (function)

Arrays and functions are object in JavaScript.

function a() {
    return 5;
}
a.hi = "is it object?"
console.log(a.hi);

is it object?
const a = 5;

What is a primitive type?

It is a data that only represents a single value so that means the ‘number 5’ in memory. There is no ambiguity about a variable of a primitive type directly contains the value of the type.

How about Non Primitive type?

Non Primitive type does not contain the actual value directly.

const obj = {
    name: "jay"
}

• The obj does not contain the value directly. Instead it has a reference similar to pointer to somewhere in memory that the object.

Primitive types are immutable.

We can not really change them. In order to change them we need to completely remove the primitive type.

var a = 5;
var b = a;
b++;
console.log(a);
console.log(b);

5
6

variable a equals five. In order for me to change what that five value is i have to literally remove it from the memory and create something new a equals ten i can not really modify it just modify it just something new gets created and primitive types are exactly like that when i assign a variable a to five somewhere in memory.

However, Non primitive is mutable (reference)

let obj = {
    password: "000"
}

let new_obj = obj
new_obj.password = "chagned";

console.log(obj);
console.log(new_obj);

{ password: 'chagned' }
{ password: 'chagned' }

password has been changed both object. Object in JavaScript are stored in memory and are passed by reference which means that we do not copy the values like we did with primitive types. Thus, obj and new_obj are both pointing in memory.

So, How to copy object properly?

let c = [1, 2, 3, 4, 5];
let d = [].concat(c);
d.push(6);
console.log(c);
console.log(d);
// 2
let obj = { a: "a", b: "b", c: "c" };
let clone = Object.assign({}, obj);
obj.c = 5;
console.log(obj);
console.log(clone);
// 3
let obj1 = { a: "a1", b: "b1", c: "c1" };
let clone1 = { ...obj1 };
obj1.c = "x"
console.log(obj1);
console.log(clone1);

[ 1, 2, 3, 4, 5 ]
[ 1, 2, 3, 4, 5, 6 ]
{ a: 'a', b: 'b', c: 5 }
{ a: 'a', b: 'b', c: 'c' }
{ a: 'a1', b: 'b1', c: 'x' }
{ a: 'a1', b: 'b1', c: 'c1' }

However, If there is object inside object, object can not be copied perfectly.

let obj = { a: "a", b: "b", c: "c", d: { deep: "can be copied? perfectly?" } };
let clone = Object.assign({}, obj);
let clone1 = { ...obj }
clone.a = "clone-a";
clone1.b = "clone1-b";
obj.d.deep = "no";
console.log(obj);
console.log(clone);
console.log(clone1);

{ a: 'a', b: 'b', c: 'c', d: { deep: 'no' } }
{ a: 'clone-a', b: 'b', c: 'c', d: { deep: 'no' } }
{ a: 'a', b: 'clone1-b', c: 'c', d: { deep: 'no' } }

How can we deep cloning?

let obj = { a: "a", b: "b", c: "c", d: { deep: "can be copied? perfectly?" } };
let superclone = JSON.parse(JSON.stringify(obj));

obj.d.deep = "changed"
console.log(obj);
console.log(superclone);

{ a: 'a', b: 'b', c: 'c', d: { deep: 'changed' } }
{ a: 'a', b: 'b', c: 'c', d: { deep: 'can be copied? perfectly?' } }

you should be careful for using JSON.parse(JSON.stringify(());

because this can have some performance implications.