Value Types
In JavaScript, a value type is also referred to as a primitive type. These are the most basic data types in the language and include:
String
Number
Boolean
Null
Undefined
Symbol (added in ES6)
When a primitive value is assigned to a variable or passed as a function argument, a copy of the value is created. This means that changes made to the variable or argument in one part of the code do not affect the value of the original variable or argument in another part of the code.
For example, consider the following code:
let x = 10;
let y = x;
y = 20;
console.log(x); // Output: 10
console.log(y); // Output: 20
In this code, x is assigned the value 10, and then y is assigned the value of x. When y is changed to 20, it does not affect the value of x. When x is logged to the console, it still has the value 10.
Primitive types are immutable, meaning their values cannot be changed. Any operation that appears to modify a primitive value actually creates a new value.
For example:
let str = "hello";
str.toUpperCase(); // Returns "HELLO"
console.log(str); // Output: "hello"
In this code, the toUpperCase() method does not actually modify the value of str. Instead, it returns a new string with all characters in uppercase. The original value of str remains unchanged.
Reference Types
In JavaScript, reference types are more complex data types than value types. Reference types include:
Objects
Arrays
Functions.
When you assign a reference type to a variable or pass it as an argument to a function, a reference to the object is made, not a copy of the object itself. This means that any changes made to the object through one reference will be visible through all other references to the same object.
For example, if you have an array arr1 and you create a second reference arr2 that points to the same array:
let arr1 = [1, 2, 3];
let arr2 = arr1;
If you change the contents of the array through the arr2 reference:
arr2.push(4);
The contents of the array are changed for both the arr1 and arr2 references:
console.log(arr1); // Output: [1, 2, 3, 4]
console.log(arr2); // Output: [1, 2, 3, 4]
This is because arr1 and arr2 both references the same array in memory.
Note
Reference types work this way in Javascript because they are designed to be more efficient when working with large or complex data structures.
When you assign a value type to a variable, a copy of the value is made, which takes up memory space. This means that if you have a large array or object, making a copy of it every time you pass it to a function or assign it to a variable could be very inefficient and use up a lot of memory.
In contrast, when you assign a reference type to a variable, only a reference or pointer to the original data structure is stored in memory. This means that you can work with the data without duplicating it, which is much more efficient when dealing with large or complex data structures.
Additionally, reference types allow for more flexibility and dynamic behavior in your code, since you can modify the data structure and have those changes be reflected in all references to that structure. This is particularly useful when working with shared data structures in concurrent programming, as it ensures that all changes to the shared data are visible to all threads or processes accessing it.
Youtube Resources To Learn More: