OOP Cookbook - tdkehoe/blog GitHub Wiki

#1. Check that Spec Is Hooked Up From the project root directory, run

jasmine

Check that Jasmine runs and you get a big red F*. If not, check the path, etc. If you don't remember how to set up and use Jasmine see my tutorial Jasmine-TDD.

#2. Constructor Arguments In the app.js file, if the Constructor function has an argument, define the variable as

this.argument = argument;

this specifies the scope of a variable. Here this sets the scope of the variable to the Constructor function.

Don't do this:

// don't do this
Constructor.argument = argument;

That will set the variable to Constructor, which will be a problem if you use new with a different object name.

#3. Add More Properties

Look in spec.js for properties.

// spec.js
expect(car.gallons).toEqual(0);

//app.js
var Car = function Car (mpg) {
  this.mpg = mpg;
  this.gallons = 0;

Add the property to the Constructor in app.js, similar to above.

toEqual is semantic, just change toEqual to = and change car to _this.

#4. Add Methods

Look in spec.js for methods. Look for two types of methods:

directory.write("foo.txt", "w00t!");
expect(directory.ls()).toEqual(["foo.txt"]);

The first is a mutator method. The second is a return method.

##Mutator Methods

Mutator methods change state variables. Generally, mutator methods change values in objects and add objects to arrays. Mutator methods don't end in return. Mutator methods sometimes call other methods.

Mutator methods go at the bottom of app.js. Add mutator methods to _app.js_in this form:

Directory.prototype.mutator = function (arg1, arg2) {
  // Change values in objects
  // Add objects to arrays
};

##Return Methods

Return methods find a value in a state variable, and return it. Generally, return methods access values in objects in arrays. Return methods end in return.

##ECMA5 vs ECMA6 Methods in Constructors

A method in spec.js looks like this:

expect(robot.position()).toEqual([0,0]);

This is not semantic. Don't do this:

// don't do this in ECMA5
this.position = [0,0];
};

In ECMA5 you don't add the method to the Constructor function:

// don't do this in ECMA5
this.method = function () {
};

In ECMA5 you use prototype outside the Constructor function:

Constructor.prototype.method = function() {
};

Calling prototype enables prototypal inheritance. Putting methods in a Constructor function with this causes problems with inheritance.

ECMA6 fixes this issue. In ECMA6 put methods in the Constructor.

#5. Many State Variables vs. Single State Variable with Algorithms

In between mutator methods and return methods there are state variables. State variables start with this..

A Constructor can have many state variables, or you can make a single state variable with algorithms to derive the other state variables. Many state variables are less abstract are easier to write, but increase the likelihood of bugs. A single state variable is more abstract and harder to conceptualize and write, but reduces bugs.

Start with many state variables, then refactor with a single state variable.

Start _properties (state variables) with an underscore when the state variable should be accessed via its method. The underscore indicates that it shouldn't be changed directly by other methods.

With many state variables the mutator methods need to update each variable separately. The return methods simply return the variables.

A single state variable is an object with many properties. The mutator methods change the variables. The return methods access a property from the object.

The Big Red F Restaurant Group owns Jax Fish House, Zolo Grill, Centro, West End, and other noisy establishments.