Modules

This exercise is to convert the calculator from Closure (PART 3) into a module.

We’re not adding any additional functionality to the calculator, only changing its interface. Instead of calling a single function calc(..), we’ll be calling specific methods on the public API for each “keypress” of our calculator. The outputs stay the same.

This module should be expressed as a classic module factory function called calculator(), instead of a singleton IIFE, so that multiple calculators can be created if desired.

The public API should include the following methods:

  • number(..) (input: the character/number “pressed”)
  • plus()
  • minus()
  • mult()
  • div()
  • eq()

Usage would look like:

  1. var calc = calculator();
  3. calc.number("4");     // 4
  4. calc.plus();          // +
  5. calc.number("7");     // 7
  6. calc.number("3");     // 3
  7. calc.minus();         // -
  8. calc.number("2");     // 2
  9. calc.eq();            // 75

formatTotal(..) remains the same from that previous exercise. But the useCalc(..) helper needs to be adjusted to work with the module API:

  1. function useCalc(calc,keys) {
  2.     var keyMappings = {
  3.         "+": "plus",
  4.         "-": "minus",
  5.         "*": "mult",
  6.         "/": "div",
  7.         "=": "eq"
  8.     };
  10.     return [...keys].reduce(
  11.         function showDisplay(display,key){
  12.             var fn = keyMappings[key] || "number";
  13.             var ret = String( calc[fn](key) );
  14.             return (
  15.                 display +
  16.                 (
  17.                   (ret != "" && key == "=") ?
  18.                       "=" :
  19.                       ""
  20.                 ) +
  21.                 ret
  22.             );
  23.         },
  24.         ""
  25.     );
  26. }
  28. useCalc(calc,"4+3=");           // 4+3=7
  29. useCalc(calc,"+9=");            // +9=16
  30. useCalc(calc,"*8=");            // *5=128
  31. useCalc(calc,"7*2*3=");         // 7*2*3=42
  32. useCalc(calc,"1/0=");           // 1/0=ERR
  33. useCalc(calc,"+3=");            // +3=ERR
  34. useCalc(calc,"51=");            // 51

Try the exercise for yourself, then check out the suggested solution at the end of this appendix.

As you work on this exercise, also spend some time considering the pros/cons of representing the calculator as a module as opposed to the closure-function approach from the previous exercise.

BONUS: write out a few sentences explaining your thoughts.

BONUS #2: try converting your module to other module formats, including: UMD, CommonJS, and ESM (ES Modules).