Harness The Power Of JavaScript [ Array Notation ]

I’ve been following along with Jeffrey Way (who has a smokin’ hot wife - his words) and his 30 Days To Learn jQuery over on Tuts+.  I can’t say enough about this series.  

It’s. So. Good.  

His understanding of not just jQuery, but JavaScript in general and the ability to create relevant demos and examples is unmatched.  

OK.  Enough about Jeffrey.  I don’t get paid to talk about Tuts+.  But maybe I should… Hit me up Jeff.

Rewind

He did something in a recent episode that made me go. “WAIT!  WHAT!?!  You can do that?”.  Touch slider to rewind on iPad. Touch slider…touch slider….Finally - rewind and watch again.  Why is it so hard to grab the video scrubber on iOS sometimes?

He showed JavaScript Array Notation.  This also commonly referred to as “Square Bracket Notation”.  Now this was something that I sort of *knew* about in the back of my mind, but it never clicked really.  I never used it.

The concept is simple.  You have a JavaScript object.  That object has methods.  You already know that you can call these methods with the dot notation.

object.method();

Laaaaassssieeee!!!!

Let’s look at a simple demo.  In this example I have created an object called Lassie.  Lassie has some methods that she can execute.  Instead of just logging an event, I used pictures I stole off the internet.  Because it’s more fun.

In this rather bad example, I have two buttons.  Each time a button is clicked, I can fire a method on the lassie object.  Try it out.

That works, but we have 4 methods and we would need a button for each method.  It would be better to have a drop down of available actions and then execute the right method based on the selection.

What you might not realize is that JavaScript also allows you to call a method with Array Notation.  So instead of calling this…

lassie.bark();

You can call this…

lassie[“bark”]();

Did you catch that?  All you need is the string representation of the method name.  We could now refactor the above example to use a drop down list instead and then just use the value of the selected option to execute the right method.  Dynamically.

A Real World Example

Lets look at another less ridiculous example of array notation.

I’ve been working on an HTML5 application called HTML5 Camera.  This site uses bleeding edge WebRTC to capture video from your webcam and play it back through an HTML5 video tag.  It then captures the video output to a canvas element.  Once the image is on the canvas, I can manipulate the pixels to apply effects to the image.

I’m currently using a forked version of VintageJS from Robert Fleischman.  It allows you to apply vintage effects to an image with JavaScript.

In my version, each time I call the vintage() method on an image, I have to pass in an object which contains configuration values.  For instance, the standard vintage object looks like this…

Each of the effects presets look like this.  I have a JavaScript file that is full of these presets.  Now in my case, I will eventually be loading these effects objects from a remote URL and serializing them into JSON objects so my implementation will change slightly.  Well, probably a lot.

I need to call the vintage() method on the image and pass in the object containing the presets.  Normally, if I knew what preset to pass, I would just pass it.

$(“img”).vintage(effects.presets.default);

What I needed to do was have a drop down list that would display each of the effects dynamically as I add them and put them in a drop down list.  I could do that easy enough with a for loop and hasOwnProperty.

Then I can apply the effect by selecting the image, calling the .vintage() method (which is part of the VintageJS jQuery plugin) and passing in an effects object based on the value of the drop down list.

What follows is a working example.  You can set the effect on the image of me “raising the roof” by changing the drop down value.  There is no list of effects anywhere.  This drop down is populated directly off of the effects object and then the effect is applied using JavaScrpt array notation passing in the string value of the selected drop down list item.

And this is the code that both populates the drop down and executes retrieves the appropriate object for based on the user’s selection in the drop down.

So in this last example, I wasn’t calling a method - but rather retrieving an object based on it’s “string” representation.

If you have worked with static languages before, you know that in order to do something like this (pre-dynamics in .NET 4.0 and things like that), you had to use Reflection.  And it was not fun.  Kind of like the flu is not fun.

There is so much power in dynamic languages.  With JavaScript Array Notation, you can execute arbitrary methods or retrieve objects inside of other objects without having anything more than the string representation of the object/method name.  And that, is sexy.

blog comments powered by Disqus