The ABCs of JavaScript: Primitive and Object types

In JavaScript, there is a common saying that "everything is an object" while objects are a fundamental concept in JavaScript, there are other data types that are not objects.

Primitive Data

primitive data types in JavaScript, including strings, numbers, booleans, bigints, symbols, and undefined. While these data types are not objects,

console.log( typeof "test")//string
console.log( typeof 3)//number
console.log(typeof true)//boolean
console.log( typeof null)//object
console.log( typeof 42n)//bigint
console.log(typeof Symbol()) //symbol 
console.log( typeof undefined)//undefined

Don't worry about the null type, even though it is displayed as an object, it is actually a primitive type. We will return to this topic in a future article.

Primtive vs Object

Understanding the difference between objects and primitive values in JavaScript is crucial. There are two main differences to note:

Primitive data does not have properties or methods, which is to be expected since they are not objects. This is a straightforward concept.

Objects are mutable, while primitives are immutable. This means that once a primitive value is created, its value cannot be changed. On the other hand, objects can be changed after they are created, and modifications to their properties or values will be reflected in the original object.

But what does 'mutable' and 'immutable' mean?

'Immutable' means that values cannot be modified after creation.

Let's take an example to better understand this approach.

let obj = {
    a:1
}

function incrementByOne(arg){
    arg.a = arg.a + 1
    console.log(arg.a) //2
 }

 incrementByOne (obj)//2

 console.log(obj.a)//2

We have an object called 'obj' that has a property named 'a' with a stored value of 1. We pass our object to the 'incrementByOne' function, which increments our property value by one. The first console log displays 2, and when we display our object outside the function, the console log displays the same value of 2. This demonstrates that the object's value was changed after creation from 1 to 2, We can easily modify its state.

*Is it still not clear? *

the concept may become clearer with the second example, which involves primitive values

let number = 3

function incrementByOne (arg){
   arg = arg + 1
   console.log(arg)//4
}

incrementByOne (number)// 4

console.log(number)//3

We're applying the same function, but this time we're using a number instead of an object. It's clear that the first console log displays 4, but outside the function, the number remains the same as its original value of 3. This is because primitive values pass a copy of themselves to the function, and because they're immutable, their values can't be changed after creation.

Maybe you will say : I can change its value after creation by assigning a new value as Let number = 3
number =4


Unfortunately, no. You are not changing its value or state of creation, but rather creating a new value for our data.

We should really understand that when we assign a value to our variable, we create space in memory for this data. We create a container where we store our value 3. But when you assign a new value to your primitive value, you will create a new container and store the number 4 for our variable. In contrast, if you modify or assign our object, you will just modify the first container that was created.

I hope that I have helped to explain the difference between immutable and mutable, and that you now understand the difference between objects and primitive values.