JavaScript Primitive vs Non-Primitive Data Types
References vs Values
in , ,

JavaScript Primitive vs Non-Primitive Data Types

JavaScript Primitive vs Non-Primitive Data Types: Hello there, I’m glad you’re with us! I have an interesting JavaScript concept to share with you, which is about JavaScript References (Non-Primitive) And Values (Primitive). Having to comprehend this can be overwhelming for beginners, so please take your time to understand. Now let’s start by discussing primitive data types. 

What are primitive data types (value)?

They are: string, number, Bigint, Boolean, undefined, symbol, NaN and null.

primitive


Basically, these data types exist in a variable and aren’t stored in memory, they also are immutable and cannot be edited.  

Let’s look at some examples to get a better understanding of primitive data types!

let a = 4;
let b = a;
b = b + 1;
console.log(a); //4
console.log(b); //5

In this example, "a" has the value of 4 and "b" has the value of "a" which is 4. Because this is a primitive type, "a" was not stored in memory, and the value of "a" is not the address of "a" memory location containing 4. Because "b" has a copy of the value of "a", if we interfere with "b", it won’t affect "a". It’s obvious that this example works with other primitive data types as well, what I gave was just an example that was based on the primitive data type "Number"

let a = undefined;

function define(variable, value) {
  console.log(variable);
  variable = value;
  console.log(variable); //value (5)
}

define(a, 5);

console.log(a); //undefined

Have you ever encountered a situation where you used a function to define a variable or modify its value, and wondered why it didn’t work? Previously I explained that this was because primitive types aren’t stored in memory, hence the copy won’t have the same address to interfere with, but here it seems different in some ways?

Yep, even though I didn’t create a variable here, it still follows the logic of primitive values. As you probably have noticed, when you pass a primitive data type to a function, it duplicates that, and inserts it as another variable in its scope. Consequently, the value of “variable” in the scope of the function is “5”.

As mentioned earlier, primitive data types are immutable and cannot be edited. The reason it duplicated it instead of interfering is because it cannot be edited. However, I will explain how to fix this problem in the next section. 

What are non-primitive data types (references)?

They are: objects, arrays and classes.

non-primitive

Non-primitive data types are stored in a memory location. These variables represent the memory location in which the value of a non-primitive variable could be stored. It is easy to edit and modify non-primitive data types.  

Let’s look at some examples to get a better understanding of non-primitive data types!

let a = [3, 4, 5]; //0x01
let b = a; //0x01
b.push(6);
b = [12,13]; //0x02
b.push(14);

Let’s be clear about this! Since arrays are non-primitive data types, the variable "a" isn’t storing the value "[3,4,5]". Let’s assume that the address is 0x01 which has the value of "[3,4,5]", this indicates that it stores the memory address of "[3,4,5]". Now that variable "a" is assigned the value "b", what do you think is the value of "b"

As I told you earlier, the value of "a" is the memory address, not the value itself. In this case, "b" is assigned 0x01, which stores "[3,4,5]" in memory; and the next line states: 

With "6" being pushed to "b" you would expect that "a" will also become "[3,4,5,6]" along with "b" Is that correct? Indeed, it will, since "a" and "b" both point to the same address in memory and we are changing the value there.

Next, we will overwrite "b" and change it’s value. You might believe a will also change to "[12,13]", but no, because the value of "b" was 0x01 and after overwriting it, we changed it to 0x02, which is a memory location that stores "[12,13]", now in the last line, no matter what we push to "b", it will not interfere with "a" and change it to "[12,13,14]", it will just be "b".

Now as I said to give the solution for the "define" function in the previous section, here we go!

let a = { value: undefined };

function define(variable, value) {
  console.log(variable.value); //undefined
  variable.value = value;
  console.log(variable.value); //value (5)
}

define(a, 5);

console.log(a.value); //5

Here’s how we can solve the problem. Since an object is a non-primitive data type, it will be stored in memory and the variable that it is assigned to will store the memory address of it. By using that logic, we created a function to change the “value” property of the object in the variable "a".

Assigning the "value" property from an object to a value inputted in a function parameter is all that I need to do. When explaining this problem in the previous section, I said that the function copies the variable passed to it. Well, not here, in this case, we passed the reference (memory address) of the object in the function arguments, thus the "variable (in the function)" and the "a (global scope)" pointed to the same memory address.

Unlike primary data types, which are immutable and cannot be edited, non-primitive data types are mutable and can be edited, which is why it did not duplicate, instead it passed the memory address of the variable.  

I hope you learnt a lot in this blog and I was able to clear all your confusions and if there were some bugs in your codes related to variables/data types, I hope you were able to fix them. Thank you for reading and being here and if you want to contact me on discord then my username is JUGisMUG#4849

Message from CTK : Mind joining our server 😉 ( Ctk’s Server )

Related Posts

Written by jug

Leave a Reply

One Comment