DEV Community

catch(js)
catch(js)

Posted on

02 - Primitive and Non-Primitive Data Types in Javascript

Data types in js is broadly classified into 2 types:

  1. Primitive types :
Type Description
string Used for denoting strings
number Used for denoting integers or floating-point
bigint Used for denoting whole numbers larger than 253 - 1
boolean Used for denoting true or false
undefined Used for denoting an unassigned value
symbol Used for denoting unique identifiers
null Used for denoting an intentional absence of a value
  1. Non-primitive types :
Type Description
object Used for denoting complex data structure with a collection of properties and methods
All JavaScript values, except primitives, are objects.

Mutable values are those which can be modified after creation
Immutable values are those which cannot be modified after creation

So the fundamental difference between primitive and non-primitive is that primitive values are immutable and non-primitive values are mutable and Primitives are stored by value while Non-Primitive (objects) are stored by reference.

It is important to note here that the variable in which the primitive value is stored can still be reassigned a new value as shown in Example 1, but the existing value can not be changed as shown in Example 2. A primitive value can be replaced, but it can't be directly altered.

Example 1

let string = 'hello world'
string = 'this is a string';
console.log(string) // Output -> 'this is a string'

Example 2

let string = 'this is a string'
string[0] = 'T'
console.log(string) // Output -> 'this is a string.'

How do primitive values such as strings have toUpperCase() method?

There are many things one would want to do with primitive values(number, string, etc...) such as finding the length of string, converting a string to uppercase or lowercase, and many more...
Thus Javascript allows us to work with Primitive as if they are objects. In order for that to work, a special “object wrapper” that provides the extra functionality is created because of which we can access those methods and then is destroyed after the work.

Primitives except null and undefined provide many helpful methods
The “object wrappers” are different for each primitive type and are called: String, Number, Boolean and Symbol. Thus, they provide different sets of methods.

Example 3

let str = "javascript";
console.log( str.toUpperCase() ); // JAVASCRIPT

In Example 3 when we accessing its property, a special object is created which has useful methods, like toUpperCase().
That method runs and returns a new string. After which
the special object is destroyed, leaving the primitive str alone.

How are Non-primitive values mutable

Example 4

let arr = [ 'one', 'two', 'three' ];
arr[0] = 'ONE';
console.log(arr) // Output -> [ 'ONE', 'two', 'three' ] 

In example 4 we are mutating the state of variable arr and changing the value itself as value at index 0 is changed from one to ONE

The typeof operator

typeof operator returns a string that tells the type of a JavaScript variable.

typeof "hello" // "string"

typeof 0 // "number"

typeof 1n // "bigint"

typeof true // "boolean"

typeof undefined // "undefined"

typeof Symbol("id") // "symbol"

typeof {} // "object"

typeof null // "object"

Why is null an object

This is a bug which states that null is an object and one that unfortunately can’t be fixed because it would break the existing code of people.

Top comments (5)

Collapse
 
muhammedmoussa profile image
Moussa

Can you share more resources about null bug

Collapse
 
suryathink profile image
Surya Prakash

You Can Read this Blog flexiple.com/javascript/undefined-...

it will solve all your doubts regarding null.
Hope you will like it.

Collapse
 
mgh2558 profile image
Mas

Thank you, this was helpful especially when interacting with memoization in React.

Collapse
 
kirti2198 profile image
Kirti2198

What is the difference between stored by value(primitive) and stored by reference (non-primtive)?

Collapse
 
nitin0703 profile image
NITIN 🇮🇳