You all remember parts of speech, right? Nouns, verbs, adjectives, pronouns, and so on from elementary school, right?

Well, some of you do.

This came up during a discussion of object-based programming with JavaScript. I was searching for a way to best describe how the various parts of JavaScript can work together in a structured, maintainable manner. Rather than trying to explain MVC to junior devs, I came upon the idea of using parts of speech. In particular: Verbs, Nouns, and Adjectives.

Objects as Nouns

Noun: A person, place, thing, or idea.

var room = {};

//or

var room = new Object();

Both with work, but will give us one instance of a room. But often, we want more than one room. So we build a constructor.

function room() {
//More code will go here.
}

var livingRoom = new room();
var kitchen = new room();
var bedroom = new room();

Now we have three separate instances of room, all  independent, but sharing a common set of functionality. Using this structure, you can create an infinite number of rooms while having just the one constructor.

Properties as Adjectives

Adjective: A word that describes a noun

We want to do more than just have a room. We need to describe it. We’re going to use properties to define what the room looks like and how big it is. These will get passed along as properties (arguments) to the constructor, new room();.

function room(height, width, length, color, lightsOn) {
   this.title = title;
   this. height = height;
   this.width = width;
   this.length = length;
   this.color = color;
   this.lightsOn = lightsOn;
}

var livingRoom = new room("living room", 10, 20, 20, "green", false);
var kitchen = new room("kitchen", 10, 15, 15, "purple", true);
var bedroom = new room("bedroom", 12, 10, 15, "blue", false);

Now each room has unique information about it. For example, livingRoom.color is a string with the value “green.” Whereas kitchen.color is “purple.” The height, width, and length of each room is set as a number and the state lightsOn is a Boolean.

Methods as Verbs

Verb: A word describing an action.

So, now we want to give some actions to the rooms, like repainting the color or turning the lights on and off. We do this by adding methods under the constructor.

function room(title, height, width, length, color, lightsOn) {
   this.title = title;
   this.height = height;
   this.width = width;
   this.length = length;
   this.color = color;
   this.lightsOn = lightsOn;

   this.display = function(){
      document.write("<p>The "+this.title+" is "+this.height+"ft high, "+this.width+"ft wide, and "+this.length+"ft long. It is painted a lovely shade of "+this.color+". ");
      if(this.lightsOn) {
         document.write("The lights are currently on.</p>");
      } else {
         document.write("The lights are currently off.</p>");
      }
   }

   this.turnLightsOn = function() {
      this.lightsOn = true;
      document.write("<p>The lights in the "+this.title+" are now on.</p>");
   }

   this.turnLightsOff = function() {
      this.lightsOff = false;
      document.write("<p>The lights in the "+this.title+" are now off.</p>");
   }

   this.toggleLights = function(){
      if(this.lightsOn) {this.turnLightsOff();} else {this.turnLightsOn();}
   }

   this.repaint = function(newColor) {
      this.turnLightsOn();
      this.color = newColor;
      document.write("<p>The "+this.title+" is now an even beautiful shade of "+this.color+".</p>")
   }

}

var livingRoom = new room("living room", 10, 20, 20, "green", false);
var kitchen = new room("kitchen", 10, 15, 15, "purple", true);
var bedroom = new room("bedroom", 12, 10, 15, "blue", false);

Note: Our lines constructing each room don’t have to change after this point, but the rooms now gain five methods: display, turnLightsOn, turnLightsOff, toggleLights, and repaint.

Now try them out with this code:

livingRoom.display();
kitchen.display();
bedroom.display();
livingRoom.toggleLights();
livingRoom.display();
bedroom.repaint("orange");
kitchen.display();
/*Note how kitchen is unaffected by the
  changes to livingRoom and bedroom.*/

View final code on Plunker

Conclusion

While the code is pretty simple and could use a little cleanup, I wanted to show how the basic structures work. A more advanced example (possible coming soon) would be a news reader with multiple feeds and each having its own look and feel. Also, the constructor is making a lot of assumptions that you’ll provide the right data into it. Some user-proofing and possibly default properties (e.g. Make the color white and the lights are off by default) would go some way to making this object easier to use.

Bonus Part-of-Speech: Variables are basically pronouns. Though the analogy gets a little sloppier. Enjoy!