Bare Minimum JS – Part 1 – Getting Classy

The Bare Minimum You Need To Know About Javascript

Part 1 -Getting Classy

These days, it seems JavaScript is taking over the whole earth. Chances are, if you’re starting a new project it’s probably going to involve some JavaScript.

A wise man once told me, “JavaScript is for hackers” and, that is both a blessing and a burden for the common developers relationship with the language. A common developer coming from a strict OOP language like C# or Java is going to be turned off by some of the functional concepts and the lack of an easy way to keep things modular and tidy.

With that in mind, let’s dive in by introducing one of the basics that will help keep your code organized.

Get Object Oriented

JavaScript has two common ways to create an object. First, let’s take a look at the quick and dirty way to make an object.

// The quick and dirty way

var baby1 = {

  name: "cutesy",

  sex: "F",

  speak: function() { 

    return "gaga"; // As in Lady

  }

};

// Functionally equivalent to this...

var baby1 = {}; // Or, even new Object();

baby1.name = "cutesy";

baby1["sex"] = "F"; // Notice what I did there?

baby1.speak = function() {

    return "gaga"; // Still, as in Lady.

};

That is the easiest way to just group a bunch of variables into a class. It’s quick and easy but has some downsides to keep an eye out for. If you need to make a lot of these you’re going to have to type that out a lot which could lead to fat-fingering it some place. There’s also the fact that the speak() function we created is an instance variable on each object, which means it will take up more memory than if we defined it in the more classical prototype fashion that would share the function across objects.

// The classical prototype way

/* Define a constructor */

function Baby(name, sex, says) {

  // Set some variables on the object

  this.name = name;

  this.sex = sex;

  this.says = says;

}

/* Define the baby.speak() method */

Baby.prototype.speak = function() {

  return this.says;

};

/* This is how we instantiate our Baby class */

var baby2 = new Baby("wootsy", "M", "googoo");  // As in Dolls

The classical prototype way is a little more verbose, but it comes with the benefit that we now have a way to really pump out some Baby objects if we needed to. Notice the way we use this in the constructor to make instance variables on the object (more on the magic of this in another post.

My rule of thumb is to use the quick and dirty way when I’m making a “one off” object that is just temporary and won’t have many instantiations.

I try to be strict about using the classical approach when I’m creating something that will have more than one instance of itself in my app.

Next time, we’ll talk about closures and some of the ways we can keep our newly created objects from banging into each other in the global scope.

Now Playing – The American Dollar – Anything You Synthesize

_