tight vs loose coupling (js) | Chinese Rule of Eight

ref – https://www.reddit.com/r/learnjavascript/comments/30mnra/tight_vs_loose_coupling_examples/

In JS, tight coupling between methods and objects in which if you were to change property name to say naaaaame,
then method sayName will not work.

var person = {

name: "Jack",

sayName: function() {

alert(person.name);

}

};

Change from tight to loose

There is a tight coupling with Food and Fork. Because Fork was instantiated inside nomNomNom, you are forced to use a Fork for every Food.

function Food() {}

Food.prototype.nomNomNom = function() {

var utencil = new Fork();

console.log('Noms with ' + utencil.getType());

};

function Fork() {}

Fork.prototype.getType = function() {

return 'fork';

};

var pasta = new Food();

pasta.nomNomNom(); // -> Noms with fork

Let’s correct it by using a parameter object to pass in whatever tool we need to use. This way, we inject whatever tool we need into the eating function.

The only thing we need to make sure is that the tool has a getType function and conforms to a common interface. That way, we can get the name of the tool.

function Food() {} // create Food constructor function

// prototype function takes in utencil as parameter

Food.prototype.nomNomNom = function(utencil) {

console.log('Noms with ' + utencil.getType());

};

function Fork() {} // create Fork constructor function

// prototype function getType is satisfied

Fork.prototype.getType = function() {

return 'fork';

};

function Spoon() {} // create Spoon constructor function

// prototype function getType is satisfied

Spoon.prototype.getType = function() {

return 'spoon';

};

// create the food, and inject Spoon object

var soup = new Food();

var spoon = new Spoon();

soup.nomNomNom(spoon); // -> Noms with spoon

// create the food and inject Fork object

var pasta = new Food();

var fork = new Fork();

pasta.nomNomNom(fork); // -> Noms with fork