Reveal Module Pattern

reveal-module.md

Reveal Module Pattern

A reveal module is an immediately-invoked function expression that returns an object who's methods have closure over the enclosing functions variable scope.

Breaking down the definition, there are 3 key aspects to reveal-module.

1. The outer function is executed using a the IIFE syntax (...)();. This has the benefit of preventing any polution of the global scope with extra unnecessary varaibles.

2. The outer function returns an object literal with functions as properties (methods). This is a factory that generates an object with methods (functions) and properties (variables).

3. Those methods create a closure over the scope so the retain (read, remember) the scope where they were defined. This effectively creates private properties and methods.

Some additional resources if you need them.

• https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
• https://coryrylan.com/blog/javascript-module-pattern-basics
• https://toddmotto.com/mastering-the-module-pattern/

Build a Reveal Module Calculator: Step-by-Step guide

1. Create an basic IIFE

(function() {
    'use strict';
    // Your code here
    // All function and variables are scoped to this function
}());

2. Update the IIFE to return a simple object literal.

var myCalc = (function() {
	'use strict';
	return {
		total: 0,
		foo: "bar"
	};
}());

console.log(myCalc.total);
console.log(myCalc.foo);

3. Modify the function so the returned object's properties refer to variables in closure. Note these are not _private, just in closure.

var myCalc = (function() {
	'use strict';
	
	var current = 0;
	var something = "bar";
	
	return {
		total: current,
		foo: something
	};
}());
	 
console.log(myCalc.total);
console.log(myCalc.foo);
myCalc.foo = "qux";
console.log(myCalc.foo); //notice how you can modify the enclosed variables

4. Next, change the object's properties to functions which return the variables.

var myCalc = (function() {
	'use strict';
  
	// I'm protected. can be accessed and changed but only through methods
	var _protected = 0; 
	
	return {
		getPrivate: function(){return _private},
		setPrivate: function(val){return _private = val}
	};
}());
	 
console.log(myCalc.getPrivate())
console.log(myCalc.setPrivate(10))
console.log(myCalc.getPrivate())

5. Let's start building the calculator. Here' we've created an .add() and .total() method which work with a private _current variable.

var myCalc = (function() {
	'use strict';
 	var _current = 0; //defaults to zero

	return {
		add: function(val) {
			return _current = _current + val;
		},
		total: function(val) {
			return _current;
		}
	};
}());
	 
console.log(myCalc.add(5));
console.log(myCalc.total());

6. Now, it's your turn. Add new methods to make the console.log() calls below work properly.

var myCalc = (function() {
	'use strict';
 	var _current = 0; //defaults to zero

	return {
		add: function(val) {
			return _current = _current + val;
		},
		total: function(val) {
			return _current;
		}
	};
}());

console.log(myCalc.add(5)); // should output ==> 5
console.log(myCalc.subtract(3)); // ==> 2
console.log(myCalc.multiply(5)); // ==> 10
console.log(myCalc.divide(2)); // ==> 5
console.log(myCalc.total()); // ==> 5
console.log(myCalc.clear()); // ==> 0
console.log(myCalc.total()); // ==> 0

Next Challenge

If you've completed the calculator and would like more practice. Try building the calculator from scratch without the instructions as a guide. Or try your hand at building the Employee Module below.

Employee Module

Private Properties

• name
• age
• salary

Private Methods

• getAge()
• getSalary()
• getName()

Public Methods:

• setAge(age)
• setSalary(salary)
• setName(name)
• increaseSalary(percentage) - calls getSalary() setSalary()
• incrementAge() - calls getAge() and setAge

Last Challenge

Finally, if you've completed all the above and would like a glimpse on how chaining works in jQuery you can modify the calculator to support chaining.

Note: Most jQuery methods actually returns the jQuery object which is a special jQuery set of elements similar to an array. In this way, jQuery can work on multiple elements.

Update the calculator to return the object. Complete the subtract method so the test returns 2. And then create your own versions of multiply, divide, and clear

Here's a starter version:

var myCalc = (function() {
	'use strict';
	var _current = 0; //defaults to zero

	var _add = function(val) {
		_current = _current + val;
		return this;
	};
	var _subtract = function(val) {
		// YOUR CODE HERE
	};
	var _total = function(val) {
		return _current;
	};
	return {
		add: _add,
		subtract: _subtract,
		total: _total
	};
	}());
	
console.log(myCalc.add(5).subtract(3).total()) // ==> 2