The difference between Primitive and Reference Data Types

In JavaScript, there are two types of data types: primitive and reference.

String: used to represent text, enclosed in single or double quotes.
Number: used to represent numeric values, including integers and floating-point numbers.
Boolean: used to represent true or false values.
Undefined: used to represent a variable that has been declared but not assigned a value.
Symbol: a new type in ECMAScript 6, used for creating unique identifiers.

Primitive data types are stored in the stack memory, and when a variable is assigned a primitive value, it is assigned a copy of that value. This means that when you change the value of a primitive variable, it does not affect any other variables that have the same value.

Reference data types, on the other hand, are objects and arrays. They are stored in the heap memory, and when a variable is assigned a reference value, it is assigned a reference to the object or array in the heap. This means that when you change the value of a reference variable, it will affect any other variables that reference the same object or array.

In summary, Primitive data types are basic data types in JavaScript which are stored in the stack memory, and when you change the value of a primitive variable, it does not affect any other variables that have the same value. While Reference data types are objects and arrays which are stored in the heap memory and when you change the value of a reference variable, it will affect any other variables that reference the same object or array.

Here are some examples of primitive and reference data types in JavaScript

Primitive data types

Example

let name = "Tutor Joes";  // String
let age = 30;           // Number
let isStudent = false;  // Boolean
let x;                  // Undefined
let id = Symbol();      // Symbol

Reference data types

Example

let user = {name: "Tutor Joes", age: 30};  // Object
let numbers = [1, 2, 3, 4, 5];             // Array
let today = new Date();                    // Object

Here's an example of how primitive and reference data types behave differently when assigned to multiple variables:

let x = 10;
let y = x;
x = 20;
console.log(x); // 20
console.log(y); // 10

let user = {name: "John Doe", age: 30};
let user2 = user;
user.age = 25;
console.log(user.age); // 25
console.log(user2.age); // 25

In the first example, the value of x is changed to 20, but the value of y remains 10, because x and y are primitive data types and they have different memory location.

In the second example, the value of user.age is changed to 25, and the value of user2.age also changes to 25, because user and user2 are reference data types, and they reference the same object in memory, so changing one of them will change the other.

Another Array example for reference data types

let arr1=[10,20,30];
let arr2=arr1;
console.log("Array 1 :",arr1);
console.log("Array 2 :",arr2);
arr1.push(40);
console.log("After Pushing element to arr1 : ");
console.log("Array 1 :",arr1);
console.log("Array 2 :",arr2);

In this code, the variable arr1 is assigned the value of an array, which is a reference data type. The variable arr2 is then assigned the value of arr1. This means that arr2 is a reference to the same array in memory as arr1.

When an element is pushed to arr1 using the push method, because both arr1 and arr2 are pointing to the same memory location, the change made to arr1 (i.e adding an element) is also reflected in arr2.

This behavior is different from primitive data types, where if you change the value of one variable, it does not affect the value of another variable that has the same value.

Object Clone use Spread and Object.assign() in JavaScript

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It returns the target object. Here is an example:

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = Object.assign({}, obj1, obj2);
console.log(obj3); // { a: 1, b: 2, c: 3, d: 4 }

The spread operator (...) can also be used to create a shallow copy of an object. Here is an example:

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = {...obj1, ...obj2};
console.log(obj3); // { a: 1, b: 2, c: 3, d: 4 }

It should be noted that both Object.assign() and the spread operator create a shallow copy, meaning that if the object being copied contains references to other objects, those references will still be present in the copy and any changes made to the original object will be reflected in the copy. If you want to create a deep copy, you can use a library such as lodash.

In conclusion, the above code demonstrates the difference between primitive data types and reference data types in JavaScript. Primitive data types are stored in memory as a single value, while reference data types are stored as a reference or pointer to the location in memory where the value is stored. This means that if two variables are assigned a reference data type, they will both point to the same location in memory and any changes made to one variable will also be reflected in the other variable. Understanding this concept is important for proper memory management and avoiding unexpected behavior in JavaScript.