<h1 id="javascript-primitive-vs-reference-values">JavaScript Primitive vs. Reference Values</h1>
<p>If this JavaScript tutorial saves you hours of work, please whitelist it in your ad blocker 😭 and</p>
<p><a href="https://www.javascripttutorial.net/donation/">Donate Now</a></p>
<p>to support us ❤️ in paying for web hosting and CDN to keep the site running.</p>
<p><strong>Summary</strong>: in this tutorial, you’ll learn about two different types of values in JavaScript including primitive and reference values.</p>
<p>JavaScript has two different types of values:</p>
<ul>
<li><p>Primitive values</p>
</li>
<li><p>Reference values</p>
</li>
</ul>
<p>Primitive values are atomic pieces of data while reference values are objects that might consist of multiple values.</p>
<h2 id="stack-and-heap-memory">Stack and heap memory</h2>
<p>When you declare <a href="https://www.javascripttutorial.net/javascript-variables/">variables</a>, the JavaScript engine allocates the memory for them on two memory locations: stack and heap.</p>
<p>Static data is the data whose size is fixed at compile time. Static data includes:</p>
<ul>
<li><p>Primitive values (<a href="https://www.javascripttutorial.net/object/javascript-null/">null</a>, <a href="https://www.javascripttutorial.net/javascript-undefined/">undefined</a>, <a href="https://www.javascripttutorial.net/javascript-boolean-type/">boolean</a>, <a href="https://www.javascripttutorial.net/javascript-number/">number</a>, <a href="https://www.javascripttutorial.net/string/">string</a>, <a href="https://www.javascripttutorial.net/es6/symbol/">symbol</a>, and <a href="https://www.javascripttutorial.net/es-next/javascript-bigint/">BigInt</a>)</p>
</li>
<li><p>Reference values that refer to objects.</p>
</li>
</ul>
<p>Because static data has a size that does not change, the JavaScript engine allocates a fixed amount of memory space to the static data and store it on the stack.</p>
<p>For example, the following declares two variables and initializes their values to a literal string and a number:</p>
<pre><code class="hljs language-js">
<span class="hljs-keyword">let</span> name = <span class="hljs-string">'John'</span>;
<span class="hljs-keyword">let</span> age = <span class="hljs-number">25</span>;<span class="hljs-title class_">Code</span> <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<p>Because <code>name</code> and <code>age</code> are primitive values, the JavaScript engine stores these variables on the stack as shown in the following picture:</p>
<p><a href="https://www.javascripttutorial.net/wp-content/uploads/2022/01/JavaScript-stack-memory.svg"><img src="https://www.javascripttutorial.net/wp-content/uploads/2022/01/JavaScript-stack-memory.svg" alt="img"></a></p>
<p>!!! NOTE that strings are objects in many programming languages, including Java and C#. However, strings are primitive values in JavaScript.</p>
<p>Unlike the stack, JavaScript stores objects (and functions) on the heap. The JavaScript engine doesn’t allocate a fixed amount of memory for these objects. Instead, it’ll allocate more space as needed.</p>
<p>The following example defines the <code>name</code>, <code>age</code>, and <code>person</code> variables:</p>
<pre><code class="hljs language-js">
<span class="hljs-keyword">let</span> name = <span class="hljs-string">'John'</span>;
<span class="hljs-keyword">let</span> age = <span class="hljs-number">25</span>;
<span class="hljs-keyword">let</span> person = {
<span class="hljs-attr">name</span>: <span class="hljs-string">'John'</span>,
<span class="hljs-attr">age</span>: <span class="hljs-number">25</span>,
};<span class="hljs-title class_">Code</span> <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<p>Internally, the JavaScript engine allocates the memory as shown in the following picture:</p>
<p><a href="https://www.javascripttutorial.net/wp-content/uploads/2022/01/JavaScript-heap-memory.svg"><img src="https://www.javascripttutorial.net/wp-content/uploads/2022/01/JavaScript-heap-memory.svg" alt="img"></a></p>
<p>In this picture, JavaScript allocates memory on the stack for the three variables <code>name</code>, <code>age</code>, and <code>person</code>.</p>
<p>The JavaScript engine creates a new object on the heap memory. Also, it links the <code>person</code> variable on the stack memory to the object on the heap memory.</p>
<p>Because of this, we say that the <code>person</code> variable is a reference that refers to an object.</p>
<h2 id="dynamic-properties">Dynamic properties</h2>
<p>A reference value allows you to add, change, or delete properties at any time. For example:</p>
<pre><code class="hljs language-js">
<span class="hljs-keyword">let</span> person = {
<span class="hljs-attr">name</span>: <span class="hljs-string">'John'</span>,
<span class="hljs-attr">age</span>: <span class="hljs-number">25</span>,
};
<span class="hljs-comment">// add the ssn property</span>
person.<span class="hljs-property">ssn</span> = <span class="hljs-string">'123-45-6789'</span>;
<span class="hljs-comment">// change the name</span>
person.<span class="hljs-property">name</span> = <span class="hljs-string">'John Doe'</span>;
<span class="hljs-comment">// delete the age property</span>
<span class="hljs-keyword">delete</span> person.<span class="hljs-property">age</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(person);<span class="hljs-title class_">Code</span> <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<p>Output:</p>
<pre><code class="hljs language-js">
{ <span class="hljs-attr">name</span>: <span class="hljs-string">'John Doe'</span>, <span class="hljs-attr">ssn</span>: <span class="hljs-string">'123-45-6789'</span> }<span class="hljs-title class_">Code</span> <span class="hljs-attr">language</span>: <span class="hljs-variable constant_">CSS</span> (css)
</code></pre>
<p>Unlike a reference value, a primitive value cannot have properties. This means that you cannot add a property to a primitive value.</p>
<p>JavaScript allows you to add a property to a primitive value. However, it won’t take any effect. For example:</p>
<pre><code class="hljs language-js">
<span class="hljs-keyword">let</span> name = <span class="hljs-string">'John'</span>;
name.<span class="hljs-property">alias</span> = <span class="hljs-string">'Knight'</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(name.<span class="hljs-property">alias</span>); <span class="hljs-comment">// undefined</span>
<span class="hljs-title class_">Code</span> <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<p>Output:</p>
<pre><code class="hljs language-js">
undefinedCode <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<p>In this example, we add the <code>alias</code> property to the <code>name</code> primitive value. But when we access the <code>alias</code> property via the <code>name</code> primitive value, it returns <code>undefined</code>.</p>
<h2 id="copying-values">Copying values</h2>
<p>When you assign a primitive value from one variable to another, the JavaScript engine creates a copy of that value and assigns it to the variable. For example:</p>
<pre><code class="hljs language-js">
<span class="hljs-keyword">let</span> age = <span class="hljs-number">25</span>;
<span class="hljs-keyword">let</span> newAge = age;<span class="hljs-title class_">Code</span> <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<p>In this example:</p>
<ul>
<li><p>First, declare a new variable <code>age</code> and initialize its value with <code>25</code>.</p>
</li>
<li><p>Second, declare another variable <code>newAge</code> and assign the <code>age</code> to the <code>newAge</code> variable.</p>
</li>
</ul>
<p>Behind the scene, the JavaScript engine creates a copy of the primitive value <code>25</code> and assign it to the <code>newAge</code> variable.</p>
<p>The following picture illustrates the stack memory after the assignment:</p>
<p><a href="https://www.javascripttutorial.net/wp-content/uploads/2022/01/JavaScript-copy-a-primitive-value.svg"><img src="https://www.javascripttutorial.net/wp-content/uploads/2022/01/JavaScript-copy-a-primitive-value.svg" alt="img"></a></p>
<p>On the stack memory, the <code>newAge</code> and <code>age</code> are separate variables. If you change the value of one variable, it won’t affect the other.</p>
<p>For example:</p>
<pre><code class="hljs language-js">
<span class="hljs-keyword">let</span> age = <span class="hljs-number">25</span>;
<span class="hljs-keyword">let</span> newAge = age;
newAge = newAge + <span class="hljs-number">1</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(age, newAge);<span class="hljs-title class_">Code</span> <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<p><a href="https://www.javascripttutorial.net/wp-content/uploads/2022/01/JavaScript-change-a-primitive-value.svg"><img src="https://www.javascripttutorial.net/wp-content/uploads/2022/01/JavaScript-change-a-primitive-value.svg" alt="img"></a></p>
<p>When you assign a reference value from one variable to another, the JavaScript engine creates a reference so that both variables refer to the same object on the heap memory. This means that if you change one variable, it’ll affect the other.</p>
<p>For example:</p>
<pre><code class="hljs language-js">
<span class="hljs-keyword">let</span> person = {
<span class="hljs-attr">name</span>: <span class="hljs-string">'John'</span>,
<span class="hljs-attr">age</span>: <span class="hljs-number">25</span>,
};
<span class="hljs-keyword">let</span> member = person;
member.<span class="hljs-property">age</span> = <span class="hljs-number">26</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(person);
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(member);<span class="hljs-title class_">Code</span> <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<p>How it works.</p>
<p>First, declare a <code>person</code> variable and initialize its value with an object with two properties <code>name</code> and <code>age</code>.</p>
<p>Second, assign the <code>person</code> variable to the <code>member</code> variable. In the memory, both variables reference the same object, as shown in the following picture:</p>
<p><a href="https://www.javascripttutorial.net/wp-content/uploads/2022/01/JavaScript-copy-a-reference-value.svg"><img src="https://www.javascripttutorial.net/wp-content/uploads/2022/01/JavaScript-copy-a-reference-value.svg" alt="img"></a></p>
<p>Third, change the <code>age</code> property of the object via the <code>member</code> variable:</p>
<p><a href="https://www.javascripttutorial.net/wp-content/uploads/2022/01/JavaScript-change-a-reference-value.svg"><img src="https://www.javascripttutorial.net/wp-content/uploads/2022/01/JavaScript-change-a-reference-value.svg" alt="img"></a></p>
<p>Since both <code>person</code> and <code>member</code> variables reference the same object, changing the object via the <code>member</code> variable is also reflected in the <code>person</code> variable.</p>
<h2 id="summary">Summary</h2>
<ul>
<li><p>Javascript has two types of values: primitive values and reference values.</p>
</li>
<li><p>You can add, change, or delete properties to a reference value, whereas you cannot do it with a primitive value.</p>
</li>
<li><p>Copying a primitive value from one variable to another creates a separate value copy. It means that changing the value in one variable does not affect the other.</p>
</li>
<li><p>Copying a reference from one variable to another creates a reference so that two variables refer to the same object. This means that changing the object via one variable reflects in another variable.</p>
</li>
</ul>