JavaScript Objects Quickly Explained

You know about Arrays right? An array is a ordered collection of data. Similarly, an object is an un-ordered collection of data.

Let’s look at an array:

const justiceLeague = ['Batman', 'Superman', 'Martian Manhunter', 'Wonder Woman', 'Hawk Girl', 'Flash', 'Green Lantern'];

So I have this array (or ordered list called justiceLeague with 7 members in in.

An array is an ordered list, where:

[ 
0: 'Batman',
1: 'Superman',
2: 'Martian Manhunter',
3: 'Wonder Woman',
4: 'Hawk Girl',
5: 'Flash',
6: 'Green Lantern'
]

The first item is always placed at zero 0 because, binary!

So if I have to call the first member of the justice league, I will have to call justiceLeague[0]

Okay, now that you get an overview of Arrays, let’s talk about JavaScript objects.

In JavaScript, objects are typed inside curly braces {}

They are just like arrays, but they are not an ordered list.

Let’s have a look:

const crimeSyndicate = {
boss: 'Superwoman',
second_in_command: 'Owlman',
third_in_command: 'Ultraman',
sub_boss: 'Power Ring',
henchman: 'Johnny Quick',
second_henchman: 'White Martian',
third_henchman: 'Jessica Cruz'
}

So with this format, there is not first or last member, they are all designated with their respective key ‘s.

So if I were to call the boss of this object, I would do so like this: crimeSyndicate['boss'] which would return the value ‘Superwoman’.

Just like arrays, you can have sub properties of an object:

const superHero = {
name: 'Barry Allen',
super: {
super_hero_name: 'Flash',
power: 'Super Speed'
}
}

So if I do this: superHero['super']['power'] I will get an output of ‘Super Speed’.

There is another neat way to call this, superHero.super.power will output the same result, this is called a dot notation.

Objects can also have functions as its members, but I will talk about it in a future post. For now, let’s wrap this up!

Found this post helpful? Please give it a CLAP!

Want to read more from me? Follow me on twitter @tamalweb where I share my day to day learning and building experiences; also check out my blog where I share what I am building on the web >> TamalWeb.com

Like what you read? Give Tamal Anwar a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.