In other words, the value itself does not change—instead, a new value is created in memory, and the variable is reassigned to point to the new memory location.
This raises an important question:
What happens if a variable is reassigned 1,000 times?
JavaScript Primitive Type vs Object Type
CNHur HyeonBin (Max)
Reponses 01month ago( Both Korean and English Version )
자바스크립트에서의 타입이란 ?
자바스크립트는 크게 원시타입과 객체타입이 존재하고, 이 둘은 엄연히 다른 동작원리와 쓰임새를 가지고 있다.
To understand how primitive types and object types work in JavaScript, it is essential to know that JavaScript is a single-threaded language that manages execution contexts using the Heap and Stack. Additionally, understanding the difference between values and variables is crucial.
A value refers to what is commonly known as a "value" in programming. For example, in the statement let A = 1, the number 1 is the value, while A is the variable.
Once you are familiar with the fundamental concepts behind different types and their behavior, you can analyze how they function:
-
Primitive Types: Immutable, Copied by Value, stored in the Stack
-
Object Types: Mutable, Copied by Reference, stored in the Heap
Values and Variables
We often use expressions like "declaring a variable" or "assigning a value to a variable."
In this context:
-
A value refers to the actual data stored in memory.
-
A variable is a named identifier that points to the memory location where the value is stored.
let A = 1(As mentioned earlier, the values of primitive types are stored in the Stack. More details on this are explained below.)
Creating a value in memory and assigning a name to that memory location, as shown in the image above, is what we refer to as assigning a value to a variable.
Immutable vs Mutable
In JavaScript, primitive types are immutable, while object types are mutable.
This might lead to the question:
"But we use the "let" keyword to modify primitive values—doesn't that mean they are mutable?"
The key to understanding this is to separate the concepts of "variables" and "values."
Did we actually modify the value itself? No.
What we perceive as "changing a value" is actually:
-
Creating a new value in memory
-
Reassigning the variable to point to the new value
Thus, the original value remains unchanged, demonstrating the immutability of primitive types.
let A = 1;
A = 2
console.log(A) // 2
From a memory perspective, the execution of this code can be understood as follows:
let A = -1;
for(let i = 0 ; i < 1000; i ++){
A = i;
}
It involves regenerating 1,000 values in 1,000 different memory locations and reassigning variables. Wouldn't that lead to excessive memory waste? This is where the concept of a garbage collector comes in. There are many theories to understand within garbage collection, but I will cover those in a separate post.
With this principle, we have learned that primitive types do not modify values directly but instead regenerate values and reassign variables in memory. This leads us to the concept of garbage collection. Then, what about object types?
The way object types store variables differs from primitive types. While primitive types store values in the stack, object types store values in the heap, store the heap’s address in the stack, and assign that stack memory to a variable.
let A = {
name : "max"
}
Additionally, if there is code that modifies the value of A, it does not add a new value to the heap but directly modifies the existing value in the heap.
let A = {
name: "max"
}
A.name = "hb"
The creation and removal of primitive type values are not computationally expensive operations. However, the creation and removal of object type values require more computation. Therefore, modifying the existing value is more efficient than creating a new one.
Copy By Value vs. Copy By Reference
Once you understand how primitive and object types create, modify, and assign values to variables, grasping the concepts of Copy By Value and Copy By Reference becomes straightforward.
let A = 1;
let B = A;
A = 2;
console.log(A) // 2
console.log(B) // 1
From a coder’s perspective, this is an obvious piece of code. However, from a memory perspective, A and B are unrelated because once a value is assigned to a variable, any changes to the other variable do not affect it.
However, the situation is different for object types.
let A = {
name: "max"
}
let B = A
A.name = "hb"
console.log(A.name) // hb
console.log(B.name) // hb
From a memory perspective, this happens because the stack memory address assigned to A points to the same heap address as the stack memory address assigned to B. As a result, when A's value is modified, B's value also changes, leading to unexpected behavior.
Since they reference the same heap memory address, any change to one value affects the other. If you've coded in JavaScript, you've likely encountered this behavior before.
let A = {name: "max"}
let B = {name:"max"}
console.log(A === B ) // false
From a memory perspective, even if the values stored in the heap are identical, they are considered different because the addresses stored in the stack are different.
CNHur HyeonBin (Max)
Reponses 0