Advanced JavaScript Series - Part 6.1: Everything in JS is an Object? Weird JS behaviors revealed, Primitive Non-Primitive Types

pranav016

Pranav

Posted on January 17, 2022

Advanced JavaScript Series - Part 6.1: Everything in JS is an Object? Weird JS behaviors revealed, Primitive Non-Primitive Types

Introduction-

  • There are two types of datatypes in JavaScript namely the primitive and non-primitive data-types.
  • Primitive data types means that are immutable, cannot be further broken down since they are the smallest unit any data can be in. Non-primitive are opposite to this and can consist of different primitive types.

DataTypes
Credits- Deepali

Primitive type includes-

  1. Boolean
  2. Null
  3. Undefined
  4. Number
  5. BigInt
  6. String
  7. Symbol

Non-Primitive Types includes-

  1. Objects
  • You must be wondering what about arrays and functions? Well, in JavaScript both arrays and functions are a form of object even though when we do typeof on a function it returns function but it is an object. Check these examples to understand better.

Examples-

Code 1-

function a(){
  console.log("hello world")
}

a.hi = "hi"
console.log(a.hi)
Enter fullscreen mode Exit fullscreen mode

Output 1-

"hi"
Enter fullscreen mode Exit fullscreen mode

You can see here how a function is behaving like an object. How we were able to add a new property to the function.

Code 2-

typeof []
Enter fullscreen mode Exit fullscreen mode

Output 2-

'object'
Enter fullscreen mode Exit fullscreen mode

You can see here how an array is returning object as its type.

  • But in real, everything in JavaScript behaves as an object. Check out this documentation and see how Number, String and many more are listed as built-in objects in JavaScript.
  • Let's see this with the help of an example.

Example-

Code-

console.log(true.toString())
Enter fullscreen mode Exit fullscreen mode

Output-

'true'
Enter fullscreen mode Exit fullscreen mode

You can see how a boolean value is acting like an object.

This is because behind the scenes, JS adds a wrapper to it and the code becomes console.log(Boolean(true).toString()) and as we know everything acts like an object hence we are able to call the toString() function from Boolean.

If an array is an object, how would we differentiate incase we need to-

  • There are many different functions available in JS that help us differentiate the types from one anther.
  • For example, in JS a new function was introduced that helps differentiate array from objects.

Example-

Code-

var x=[1,2,3]
Array.isArray(x)
Enter fullscreen mode Exit fullscreen mode

Output-

true
Enter fullscreen mode Exit fullscreen mode

Connect with me-


Appendix-

  1. Advanced JavaScript Series - Part 1: Behind the scenes (JavaScript Engine, ATS, Hidden Classes, Garbage Collection)
  2. Advanced JavaScript Series - Part 2: Execution Context and Call Stack
  3. Advanced JavaScript Series - Part 3: Weird JS behavior, Strict Mode and Hoisting, Temporal Dead Zone
  4. Advanced JavaScript Series - Part 4.1: Global, Function and Block Scope, Lexical vs Dynamic Scoping
  5. Advanced JavaScript Series - Part 4.2: Scope Chains and their working, Lexical and Variable Environments
  6. Advanced JavaScript Series - Part 5: IIFE & 'this' keyword in JS(tricky Eg.), call(), apply(), bind(), Currying(Functional Prog)
  7. Advanced JavaScript Series - Part 6.1: Everything in JS is an Object? Weird JS behaviors revealed, Primitive Non-Primitive Types
  8. Advanced JavaScript Series - Part 6.2: Pass by Value & Pass by Reference, Shallow & Deep Copy, Type Coercion
  9. Advanced JavaScript Series - Part 7: First Class Citizens & Higher Order Functions
  10. Advanced JavaScript Series - Part 8: The 2 Pillars~ Closures & Prototypal Inheritance
  11. Advanced JavaScript Series - Part 9: Constructor Functions, Object Oriented, new keyword

References-

  1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures
πŸ’– πŸ’ͺ πŸ™… 🚩
pranav016
Pranav

Posted on January 17, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related