Understanding JavaScript primitive types

Welcome to the Understanding Javascript basics series. On this blog we will try to understand primitive types in Javascript.

let's get to it 🙂

01Primitive and non-primitive types

Javascript has primitive types (primitive values) that are directly represented at the lowest level of the language implementation. Javascript in general has two types of data types - primitive and non-primitive (Object). Anything other than primitive types in JavaScript is an object. Functions, classes, arrays and user defined types are all objects.

Checking with typeof

You can tell this by using the typeof operator which might not be accurate at a time but it's a good enough approximation.

Copy
1typeof 'hello' // string
2typeof true // boolean
3typeof 1 // number
4typeof {} // object
5typeof null // object
6typeof undefined // undefined
7typeof function () {} // function
8typeof Symbol('hello') // symbol
Copy
1typeof 'hello' // string
2typeof true // boolean
3typeof 1 // number
4typeof {} // object
5typeof null // object
6typeof undefined // undefined
7typeof function () {} // function
8typeof Symbol('hello') // symbol

The typeof null quirk

But here typeof null is an object which is not actually true since null is a primitive type.

Copy
typeof null // object
Copy
typeof null // object

This is considered a bug in javascript.

02Primitive values are immutable

Javascript primitive types are not objects and their values are immutable. but variables can be reassigned to a new value. Doing so will create a new variable and the garbage collector will clean up the old one.

example of primitive type immutability

Copy
1let a = 1;
2let b = a;
3// changing a will not change b
4a = 2;
5console.log(a); // 2
6console.log(b); // 1
Copy
1let a = 1;
2let b = a;
3// changing a will not change b
4a = 2;
5console.log(a); // 2
6console.log(b); // 1

As both a and b are primitive types, they are not related to each other. when copying b from a Javascript will copy the value of a and assign it to b , so changing one will not change the other.

03What happens in memory

Let's dive deep into this

Creating a value

Copy

let a = 1;

Copy

let a = 1;

Initializing a variable with a primitive type will create a new value in stack and assign the variable to it. JavaScript creates primitive types in stack with fixed space while Objects are created in heap memory, This is because objects are mutable and can be changed at any time taking up more memory. This is true because you can mutate objects adding new properties or changing existing ones.

Copying a value

Copy

let a = 1;
let b = a;

Copy

let a = 1;
let b = a;

Copying a primitive type will create a new value in stack and assign the variable to it.At this point both a and b are pointing to different values in the stack.

Reassigning a value

Copy

1let a = 1;
2let b = a;
3a = 2;

Copy

1let a = 1;
2let b = a;
3a = 2;

Changing the value of a will not change the value of b since they are pointing to different address in the stack.At this point GC( Garbage Collector) will remove unreferenced addresses from the stack.

04Primitives and objects compared

Comparing primitive types to object 👇🏾

Copy
1let a = {
2    value: 1
3};
4let b = a;
5// changing a will change b as they have the same reference
6a.value = 2;
7console.log(a.value); // 2
8console.log(b.value); // 2
Copy
1let a = {
2    value: 1
3};
4let b = a;
5// changing a will change b as they have the same reference
6a.value = 2;
7console.log(a.value); // 2
8console.log(b.value); // 2

As you can see in the above example, Objects variables don't hold values but references, so changing a will change b as they have the same reference.

05How primitives act like objects

Well if primitives are not Objects you might ask how are we accessing properties off them like this example below ?

Copy
'hello'.length // 5
Copy
'hello'.length // 5

This is not a bug in javascript 😄.

Wrapper objects

This is actually one of the features of javascript. Primitives are not Objects but they act like they are 🤔 ? Well here is how it works

Javascript maps out primitive types to Wrapper Objects which is the reason we can see the length property of a string. Which will actually create a new object with value "hello", so you can access the length property ( or any-other String property ) off that object. This is actually true for Other two Primitive types Boolean and Number .

Copy
1let strObj = new String('hello')
2typeof strObj // object
3strObj.length // 5
4
5// access the value of the object , which is the primitive value
6strObj.valueOf() // hello
7typeof strObj.valueOf() // string
Copy
1let strObj = new String('hello')
2typeof strObj // object
3strObj.length // 5
4
5// access the value of the object , which is the primitive value
6strObj.valueOf() // hello
7typeof strObj.valueOf() // string

Boolean and Number wrappers

Boolean Object

Copy
1let boolObj = new Boolean(true)
2typeof boolObj // object
3boolObj.valueOf() // true
4typeof boolObj.valueOf() // boolean
Copy
1let boolObj = new Boolean(true)
2typeof boolObj // object
3boolObj.valueOf() // true
4typeof boolObj.valueOf() // boolean

Number Object

Copy
1let numObj = new Number(1)
2typeof numObj // object
3numObj.toFixed(2) // 1.00
4
5numObj.valueOf() // 1
6typeof numObj.valueOf() // number
Copy
1let numObj = new Number(1)
2typeof numObj // object
3numObj.toFixed(2) // 1.00
4
5numObj.valueOf() // 1
6typeof numObj.valueOf() // number

But once we had access to the property of the object, garbage Collector will remove unused objects from memory.

06The seven primitive types

Javascript has 7 primitive types:

• undefined
• null
• boolean
• number
• string
• symbol - es2015
• bigint - es2020

The symbol data type is new in es6. bigint is new in es2020.

How JavaScript differs from Java

JavaScript is different in the way it treats Numbers and Strings ( they are represented as a primitive type on their own) which is not as common in stablished programming languages like Java, Which for example represent numbers differently according to their size and properties. Float numbers have a float type in Java and integers as int while in javascript they are both just represent as Number.

07What's next

We will dive deeper into those primitive types and javascript implementation difference with other programming languages in the next blog of this series.

Big thanks for the people whom helped me review the wording in this blog.