Explaining the difference between an Array and an Object in Javascript with a Rick and Morty analogy.

ajitsinghkamal

Ajit Singh Kamal

Posted on May 30, 2020

Explaining the difference between an Array and an Object in Javascript with a Rick and Morty analogy.

An Object is a Morty. Every universe has its own version of Morty. There's lizard Morty, lawyer Morty, fat Morty, evil Morty, and so on.
So, if you are an omnipresent creator and you want to create a new Morty in one of the infinite timelines, you would simply do

const Morty = {};
Enter fullscreen mode Exit fullscreen mode

Cool, we just created a personality-less piece of crap. Every Object can have their own personality which sets them apart. These traits can be expressed as property and methods.
So, for a Morty these properties can be eyes, nose, limbs. The evil Morty has one eye, the lizard Morty has a tail, and the mutant Morty, well... you get the gist.

const Morty = {
  eyes: 2,
  hammerForHead: false,
};
Enter fullscreen mode Exit fullscreen mode

Similar to properties which defines the traits, an object's method defines the behavior. So, for a Morty,

const Morty = {
  eyes: 2,
  hammerForHead: false,
  ...,
  panic: function() {
      // console.log('find Rick for help')
  }
}
Enter fullscreen mode Exit fullscreen mode

You see, when creating a Morty with an objects, we can play around with the possibilities. An object is pretty flexible.

Now, suppose Rick wants an army of robot Mortys. So he decides to build a robot Morty maker machine with these traits.

const Morty = {
    eyes: 2,
    hand: 2,
    tail: 0 
 }
Enter fullscreen mode Exit fullscreen mode

Now as you see, the possibilities you can have for the kind of Morty reduces drastically from infinite to a fixed set because Rick's machine can only possibly make robot Mortys of a certain type. Each morty must have their eye at the proper position, their heads at their designated place, their tails between their legs. Basically, everything must go to their properly indexed position for the machine to build up a Morty.

So, if the eyes are assembled first, then the limbs, and so on and Rick being the lazy smartass as always just do this,

 const BotMorty = {
     0: 2,
     1: 2,
     2: 0,
 }
Enter fullscreen mode Exit fullscreen mode

Also, none of these robot Mortys have free will. Rick predefined their behavior and these Morty can only do so. To make this process easy, Rick can create this in this form and the machine would assign 2 to zeroeth position, 1 to first, and 2 to second position.

const BotMorty = [ 2, 2, 0 ];
Enter fullscreen mode Exit fullscreen mode

That's it, an array is also an object secretly but a special one. Its properties are defined as indexes. You can put anything in these indexes and can work with it using the methods it already provides.

💖 💪 🙅 🚩
ajitsinghkamal
Ajit Singh Kamal

Posted on May 30, 2020

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

Sign up to receive the latest update from our blog.

Related