JavaScript Objects Quickly Explained

Tamal Chowdhury
Frontend Weekly
Published in
2 min readJun 11, 2018

You know about Arrays right? An array is an ordered collection of data. Similarly, an object is an unordered 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, I talked about it in my next post: Creating The Infinity Gauntlet of Thanos with JavaScript Objects.

Found this post helpful? Please give it a CLAP!

Want to read more about JavaScript and Node JS? Check out my blog tamalweb.com/blog

--

--

Tamal Chowdhury
Frontend Weekly

Software Engineer working with React, JavaScript. Looking for my next role in tech. https://tamalchowdhury.com