JavaScript Objects

Creating an object

 
var die = {
    faceValue: undefined,
    roll: function() {
        this.faceValue = Math.floor(Math.random() * 6) + 1;
    }
};
var die2 = {
    faceValue: undefined,
    roll: function() {
        this.faceValue = Math.floor(Math.random() * 6) + 1;
    }
};

die.roll();
die2.roll();
console.log(die.faceValue); // Outputs a random number between 1 and 6
console.log(die2.faceValue); // Outputs another random number between 1 and 6

The problem with this is that it’s not very scaleable if you would like to use a objects structure and only change a property of it we would have to recreate the whole codeblock. However it’s nothing wrong using this pattern if you know that you only going to create a single object.

Object with design pattern: Factory

var createDie = function() {
	var obj = {
		faceValue: undefined,
		roll: function() {
			this.faceValue = Math.floor(Math.random() * 6) + 1;
		}
	};
return obj;
};

var die = createDie();
var die2 = createDie();
die.roll();
die2.roll();
console.log(die.faceValue); // Outputs a random number between 1 and 6
console.log(die2.faceValue);// Outputs another random number between 1 and 6
console.log(typeof die); // Object
console.log(die.constructor); //function Object() { [native code] }

This is a bit better and makes it much easier to create a lot of similar objects without repeating code.
The problem with this is that you can’t check what type your object is it will just return object.

Object with design pattern: Constructor

function Die() {
    this.faceValue = undefined;
    this.roll = function() {
        this.faceValue = Math.floor(Math.random() * 6) + 1;
    };
}

var die = new Die();
var die2 = new Die();
die.roll();
die2.roll();
console.log(die.faceValue); // a random number between 1 and 6
console.log(die2.faceValue); // another random number between 1 and 6
console.log(typeof die); //object
console.log(die.constructor); // Function: Die

If you are using the keyword new before calling a function the function is called a constructor function and the object that gets created with new is an instance of a constructor.

Now we can see that the object is Die by die.constructor and it not longer returns object

The problem with this pattern is that for every object we create we make a new instance of all the properties which include the function roll in this case.

to deal with this problem we will use a combination of prototype and constructor pattern to get the best of both worlds

Object with design pattern: Constructor / Prototype

function Die() {
  this.faceValue = undefined;
}

Die.prototype.roll = function() {
  this.faceValue = Math.floor(Math.random() * 6) + 1;
};

var die = new Die();
var die2 = new Die();
die.roll();
die2.roll();
console.log(die.faceValue); // random number between 1 and 6
console.log(die2.faceValue); //another random number between 1 and 6
console.log(typeof die);   // object
console.log(die.constructor); //function: Die

The constructor only contains the property faceValue that are unique and duplicated for each instance of Die.
The method roll is using the prototype for Die and is a shared method for all objects invoked from Die.

Add your comment