Everyday Javascript: Objects.

January 31, 2017

Welcome

This is a new series on common Javascript problems, techniques and solutions I’ve encountered, in this first post, I’d like to talk a bit about Objects in Javascript, come along and learn by example.

Why Objects ?

Good question, you can write a program without ever making an object, in my mind, objects make sense when you want to make a bunch of things and want each of them to be a precious and unique snowflake.

Note: I will be using Isomer.js ( a cool tinsy isometric graphics library to render cubes) along with easel.js (a canvas management library used for hit detection) and some bootstrap ( to center and align content) these are entirely optional for learning about objects, if you need an introduction to Isomer, here's a related post:

Isometric Graphics with Javascript

Let’s first look at the following example where objects are NOT being used: 2 Isometric cubes are created, hit detection bitmaps created and mouseEvents attached, check it out:

See the Pen Isomer MouseOver Click Example by Eugenio Keno Leon (@k3no) on CodePen.

Just to reiterate, there is nothing wrong with this approach, and sometimes it is simpler and clearer to not use objects,especially as you are figuring out things,the main issue is that this example is not easily scalable as written and quickly becomes a nightmare to write and maintain if we increase the number of cubes from 2 to say 10, don’t believe me, you try it:

I Challenge you: Without using Objects increase the number of cubes from 2 to 3 and then 10; Hint: I commented the lines // you would need to write and modify a 3rd time first, and then another 7 times for around 112 extra lines of code.

Enter Objects

Like many things in programming, there are more than one way of doing things, so, Objects can be defined and created in a couple of ways, here are 3 common ways to do it.

See the Pen Isomer Objects by Eugenio Keno Leon (@k3no) on CodePen.

Fun Fact If you want to increase the number of cubes in any layer, you now only need to modify one variable and write no extra lines, you could also increase the cubes size, color etc, try it, the relevant lines are commented //

Note: ES6 the new and shinny version of Javascript brings yet another way you can create objects with the class syntax, here is an in depth comparison and introduction to classes in Javascript if you want to explore them :

ES6 Sampler #3: (Classes)

Object Methods

So now that we have explored how to create a bunch of objects, it is time to start working with them,wrangle them into submission if you will; a very common thing you might want to do, is modify every single object at the same time, in order to do this, you simply create a method in your object definition and call it for each instance, let’s look at an example:

Note: So out of the 3 (4 if you count classes) ways of creating objects, which one is the best ? I personally like object literals with in line methods, but, and this is a big butt, every method will be recreated along with the object, which arguably translates into less performance. I settled then (at least for the rest of the examples here), with a hybrid Constructor definition plus outside prototype methods to be on the safe side.

See the Pen Isomer Object Methods by Eugenio Keno Leon (@k3no) on CodePen.

Try it: So to continue expounding on why objects make things easier, there are 2 object methods in this example, one renders the cube, and the other animates it, so if you wanted to affect all your cubes, you would only need to change one update function and all the cubes would follow your orders, you can try this by modifying the commented lines //

Naming your Snowflakes

The next step towards object domination is figuring out a way to make each object a truly unique thing, in the next sample, we will name each one of the objects and later identify them so we can change them on a one by one basis.

Important Note: In order to keep track of our objects, we will need to create what is normally called a Dictionary, a place where we will keep references to other objects, while using an array is also possible at times, a dictionary allows you to store key value pairs ( in our case object name and object), the interesting and perhaps confusing thing, is that the syntax for the dictionary is the same as that of an object literal: var preciousSnowflakes = {}; , or more profoundly,objects are dictionaries of key/value pairs whose properties and methods can be added,removed and modified at runtime.

See the Pen Isomer Object properties by Eugenio Keno Leon (@k3no) on CodePen.

Power Tip: You can inspect your Dictionary and recently created objects in your console, just log them :
Object Console

Animating your objects

Another thing you might want to do with your objects,an example of a complex behavior is subscribe them to a render loop so you can animate them on an individual basis, the following example shows just how to do that by modifying the existing object definition and extending the draw method from the previous examples.

Note: As mentioned, there are a few ways to work with objects, to keep things simple, I am not using getters and setters, which allow you to return complex/computed properties after being calculated in a function within the object, so in theory you can also animate by using them, you can read more about them and other object features here: Working with Objects, Defining getters and setters

See the Pen Isomer Object Render Loop by Eugenio Keno Leon (@k3no) on CodePen.

Adding more complexity Using this strategy you can easily add complex and individualized behavior to your objects, you can try it by simply adding new behavior to the draw method.

Last words...

I still think that the easiest way to deal with objects as you are programming is to ask yourself, am I creating a lot of individual snowflakes ? , if the answer is yes, learning how to deploy, keep track and modify them will surely make your life easier and your Javascript coding more fun and effective.

Best,

Keno