Understanding Javascript objects with OB the property developer

Kylo Robs
Kylo Robs
Sep 5, 2018 · 4 min read

As an object-orientated language, learning the fundamentals about objects is crucial for any aspiring javascript / web developer.

The following describes the basics of javascript objects in a fun, imaginative and MEMORABLE way.

Unfortunately learning development concepts can sometimes be a dry, colourless exercise. Our brains don’t function at their best when trying to decipher long and complicated documentation — especially as a beginner coder! It is also annoying when you have to keep referring to the documentation to remember basic basic details, like how keys and values are separated by a colon in an object.

So I challenge you to follow the story below ans have fun with it! The more ridiculous, sensational and funny you can make the story, the easier it will be to remember. If you want to learn more about this memory process, read my past blogs on learning to visualise and mnemonic memory techniques.

Picture this:

Objects are going to be introduced to us by someone called “OB” — an obese, bearded, and jingling man.

He is ‘jingling’ because OB is carrying dozens of keys. There are so many, he hangs them everywhere on himseld — down the side of his face, down his cloths, from his hair, and even from his shoelaces. He is covered in keys!

There is a reason for all the keys….

OB is a property developer, and he specialises in developing entire neighbourhoods. He will fill a new neighbourhood with properties, manage how each is accessed, and determine the interior decoration of each — remind you of anything?

OB is currently developing a residential neighbourhood comprising five properties.

Think of the neighbourhood as an OBJECT, containing properties.

OB wants to visit his properties.

He drives to the first property. Damn, he thinks, which key should I use? He has to rummage around his waste until he eventually finds the right one. His keys are… peculiar. They only have two iron rods.

Even better, the doors on all his properties are the same. There is a name, followed by two vertical dots for the key — sort of like a colon!

To use the key, you must insert the key into dots, and rotate. OB calls it Dot Rotation. This is how OB accesses the property. to get inside.

Dot rotation — of course we mean dot notation ! This is one way properties are accessed.

Of course, he has another way to access the property: his brilliant Square Brackets device. This is a square machine OB carries around. All he has to do is type in the property name. EG jonesHouse. The door will now unlock and the properties contents can be accessed.

neighbourhood[jonesHouse]

In fact, OB loves to use his Square Brackets device, because he can save passwords for quick access to a key he wants to use.

The password is a variable you define. You can set the variable to look up an Object’s key.

He simply types in the password (variable name) inside the Square Brackets and the right key is used to open the property (as long as he names the password as the correct key in the first place!).

For this first property, OB has an idea. He wants to re-do the interior design and replace everything that is inside. Easy! He finds the right property, selects the key, uses dot rotation, and he begins redocorating. The content (value) of the properties now EQUALS what he had in mind.

neighbourhood.jonesHouse = [newCarpet, newKitchen, newPaint]

For the next property, he also wants to make some changes. But unlike the jonesHouse, he doesn’t want to replace everything. He just wants to throw out the old stuff and put something new and shiny in place.

We want to modify the property’s value.

So he accesses the property the same way using his key and dot rotation.

He steps inside, and while standing in the living room, he pulls out his Square Brackets device. This now displays a complete list of the properties contents, down to every chair! He can now simply erase and re-type items [values], and his interior team will be sure to remove and replace.

neighbourhood.smithHouse = [‘red chair’, ‘purple sofa’, ‘laminate floors’, ‘new mattress’]

There is a lot more OB can do — including methods, getters, setters, classes, and so much more. I will be posting more stories to cover these.

Let me know if you enjoyed the above, and if you find it useful!

Interested in a way to remember all those Git and Github commands? Read about the Github Space Station!


Originally published at thinktraincreate.com on September 5, 2018.

Kylo Robs

Written by

Kylo Robs

I am learning web development and javascript using visuals and stories.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade