Quick Index
Overview


This page is about coding a rectangle object type.

We will next step through and explain each method (the complete code listing is at the bottom of this page).

Note that object systems are made up of large numbers of objects of various types, similar in complexity to this one.

Object Structure


What do we Have?
Firstly, we get familiar with our subject model.

A rectangle has a width and height.
Object Diagram
Using the previous step, we can derive a quickie object diagram.

We see that a rectangle object type will have will have two components (ivars) "width" and "height".
Simplified Object Diagram 💡
We simplify the diagram here to a simple textual diagram.
\-- Rectangle
	|
	|---- width ivar
	|
	|---- height ivar
Even Simpler
Simple is good. Your choice.

Keep an object sketch like this handy as you code an object type. Much of the coding will revolve around it.
Rectangle
	width ivars
	height
Finally Onward!
You get the point. The object is core. Let's finally move on with our diagram in hand.

Think ivars "width" and "height"
Rectangle
	width ivars
	height


Constructor


Our constructor will be in close sync with our completed object diagram (sketch), as is often the case. The constructor will initialize the ivars.

constructor
We set the object's two ivars with the passed params. Also see optional method parameters....
Message "setAsNumeric" simply sets these ivars as numeric types.
constructor(w, h) {
	super();
	this.width = (w !== undefined) ? w : 0;
	this.height = (h !== undefined) ? h : 0;
	this.setAsNumeric('width', 'height');
}

Getters (Ivar Getters)


An ivar getter simply return the associated ivar value.

getWidth
This getter method simply gets and returns the ivar "width"
getWidth() {
	return this.width;
}
getHeight
This getter method simply gets and returns the ivar "height"
getHeight() {
	return this.height;
}
getDiagonal
Compute rectangle diagonal which is the square root of the (w*w + h*h) where w and h are width and height, respectively. We tap into the js math library for sqrt (see "References" below)

getDiagonal() {
	const
		w = this.width,
		h = this.height;
	return Math.sqrt(w*w + h*h);
}

Setters (Ivar Setters)


An ivar setter simply sets the associaterd ivar value with the passed param.

setWidth
This setter method simply sets the ivar "width"
setWidth(value) {
	this.width = value;
}
setHeight
This setter method simply sets the ivar "height"
setHeight(value) {
	this.height = value;
}

Calcs


Here are a couple methods that calculate and return rectangle properties.

getArea
Compute area of rectangle as width * height
getArea() {
	return this.width * this.height;
}
getPerimeter
Compute perimeter (boundary length) of rectangle as total (sum) length of all edges.
getPerimeter() {
	return 2 * (this.width + this.height);
}

Actions


A couple methods that mutate (change) the object in different ways.

flip
Flip width and height
flip() {
	const w = this.width;
	this.width = this.height;
	this.height = w;
}
multiply
Increase each dimension by multiplying by the passed param "factor".
multiply(factor) {
	this.width = this.width * factor;
	this.height = this.height * factor;
}

References



Related Examples



Complete Source Code


class Rectangle extends Model {
	/*ivars
	width
	height*/
	
	//------------------------------------------------
	
	constructor(w, h) {
		super();
		this.width = (w !== undefined) ? w : 0;
		this.height = (h !== undefined) ? h : 0;
		this.setAsNumeric('width', 'height');
	}
	
	//------------------------------------------------
	//Getters (Basic)
	
	getWidth() {
		return this.width;
	}
	
	getHeight() {
		return this.height;
	}
	
	//------------------------------------------------
	//Setters
	
	setWidth(value) {
		this.width = value;
	}
	
	setHeight(value) {
		this.height = value;
	}
	
	//------------------------------------------------
	//Calcs
	
	getArea() {
		return this.width * this.height;
	}
	
	getPerimeter() {
		return 2 * (this.width + this.height);
	}
	
	getDiagonal() {
		const
			w = this.width,
			h = this.height;
		return Math.sqrt(w*w + h*h);
	}
	
	
	//------------------------------------------------
	//Actions
	
	flip() {
		const w = this.width;
		this.width = this.height;
		this.height = w;
	}
	
	multiply(factor) {
		this.width = this.width * factor;
		this.height = this.height * factor;
	}

}


































JavaScript Guide (Chapter 306 - UnitTests)










Chapter 306 - UnitTests Rectangle Model

Search Site Home Back To Top