The unit of JS thought.

The term “object” is used very loosely in JS. Let’s just consider the typical and most common meaning.

Like the other values we’ve seen so far (strings and numbers) objects too are values. Consequently, they can be assigned to and be referred by variables.

Without further ado, let’s just create one.

var flub = {};

That’s it. Creating an object is as simple as that.

This one is empty, thus of not much use. The real purpose of an object is as a: collection of key – value pairs . A key value pair is a name (key) and the value (any JS value) that the key refers to. Thus it is very much like a variable and the value it refers to. So a collection of those is quite like a collection of variables.

Why do we need collections? For almost all the same reasons we need collections in real life. Primarily to fit stuff into our head and forget details.

A computer is a collection of parts and functions. So is a car. Do we need to know all the complicated details of their implementation to use these objects? Surely, nobody likes to manipulate and think about the myriad constituents of such complicated machines to use them and get something done.

Collections appear to be a feature of our brain. We certainly do extend that to the physical world. We combine and group things in the physical world and we let the world worry about the storage, maintenance and mirroring our ideas. We go on in our daily lives, operating on top of layers upon layers of such convenient forgetfulness (abstractions) and don’t give much thought to it.

JS allows us to transplant those skills into the digital realm and objects play the central role in allowing us to do so. After all, everything IRL is an object with a name.. right?

Two forms to manipulate objects.

Lets visualize these two “ “, “ ” to be JS values (remember values could be any of string, number, object etc)

Then this var blob = , spike = ; will give us

To add a key-value pair to flub , we could use either of the following syntax.

flub["friend"] = blob;

flub.enemy = blob;

Giving us.

Don’t worry we can fix that. To fix flub, we need to update one of its keys. We could do that either..

flub["enemy"] = spike; this way.

this way. flub.enemy = spike; or this way.

Accessing values of members is also quite intuitive. You do either

var flubsEnemy = flub["enemy"]; this.

this. var flubsEnemy = flub.enemy; or this,

The form of these manipulations with the dot separating the object name and the key is called the surprise surprise dot notation. The other with the square brackets flanking the expression that stands for the key is called the subscript notation (also known as the bracket notation).

Hmm… “the expression that stands for the key”..

Here, take a look at this.

Conveniences all around.

To quickly create and populate an object, JS gives us a colon separated notation for key-value pairs which you can delimit by commas and flank by a pair of matched curly braces.

var score = { player : “you”, points : 1, avatar : blob, inventory : {} //object inside another object. };

The curly braces syntax including the empty one that initially created flub is called the object literal syntax. Why literal? Because it stands for what it is.. no funky manipulation here.

Summary.

Collect stuff together and give it a name.

Simplify problems by breaking it up.

Share this: Twitter

Facebook

Like this: Like Loading...

Tags: abstraction, dot notation, grouping, JavaScript, object literal, objects, subscript notation