JS Function Declaration vs Expression

JS Function Declaration vs Expression.markdown

JS Function Declaration vs Expression

A Pen by Dustin Rea on CodePen.

License.

script.js

/**
 * Mimic an Angular Data Service with 
 *  Revealing Module Pattern in Pure JS.
 *
 * @author: Dustin Rea
 * @param: pubx - A Public Global Var
 * @param: privx - Invoking Function Expression
 *     Returns Exposed Properties / Methods
 * @param: privateError - Bubbles Error Messages to User
 * @description: A representation of an Angular 
 *     Service with Hoisted Methods and Scope Conntrol.
 * ------------------------------------------------------------
 * TODO: Test Ways to not return the Function Definition
 * ------------------------------------------------------------
 */

var pubx = 10000; // Global Var

// Revealing Module Pattern 
var privx = (function() {
  // JSHINT: Function form of 'use strict'
  // Source: http://stackoverflow.com/questions/4462478
  'use strict'; 
  
  // Public Var
  var publicX = 10;
  
  // Private Var
  var privateX = 200;

  // Private Error Message
  var privateError = '';

  // Declare Service to be exposed
  var xService = {
    getPubX: getPubX,
    setPubX: setPubX,
    getPrivateX: getPrivateX,
    setPrivateX: setPrivateX,
    setReturnPrivateX: setReturnPrivateX,
    addGlobalandPrivate: addGlobalandPrivate
  };

  // Expose the Service
  return xService;

  //////////////////////

  // Public Functions
  function getPubX() {
    return publicX;
  }

  function setPubX(num) {
    if (typeof num !== 'number') {
      // Handle Type Check Error
      privateError = 'Sorry, Please Use Numbers Only.';
      return privateError;
    } else {
      // Setter Shouldn't Return Value
      publicX = num;
    }
  }

  // Private Functions
  function getPrivateX() {
    if (typeof privateX !== 'number') {
      // Handle Type Check Error
      privateError = 'Sorry, X needs to be a Number.';
      return privateError;
    } else {
      return privateX;
    }
  }

  function setPrivateX(num) {
    if (typeof num !== 'number') {
      // Handle Type Check Error
      privateError = 'Sorry, Please Use Numbers Only.';
      return privateError;
    } else {
      privateX = num;
    }
  }

  // Returning the Private Var in the Set function.
  // Is it better form to instead call getPrivateX()?
  // Cursor / Pointer / Scope / Inheritence Issues?
  function setReturnPrivateX(num) {
    if (typeof num !== 'number') {
      // Handle Type Check Error
      privateError = 'Sorry, Please Use Numbers Only.';
      return privateError;
    } else {
      privateX = num;
      return privateX;
    }
  }
  
  // Adds a Global Var to CLASS Private Var
  function addGlobalandPrivate() {
    var privateSum = privateX + pubx;
    return privateSum;
  }

}());

// 1. Returns Original Value
console.log('1. pubx: ', pubx);

// 2. Returns the Service Function
var getPubX = privx.getPubX;
console.log('2. privx.getPubX', getPubX);

// 3. Inline Call to Function - Returns Value
console.log('3. privx.getPubX(): ', privx.getPubX());

// 4. No Return(void | undefined) - Sets publicX. Use getPubX() to get value.
console.log('4. VOID privx.setPubX(101)', privx.setPubX(101));

// 5. Return: getPubX() after a setPubX()
console.log('5. setPubX(101) privx.getPubX()', privx.getPubX());

// 6a. Breaks Output 
//   pubX is global
//   publicX and privateX are function(Class) members
//console.log('6a.PrivateX: ', privateX);

// 6. Returns Undefined because Private Scope Property.
console.log('6. PRIVATE privx.privateX: ', privx.privateX);

// 7. Returns the Service Function
console.log('7. privx.getPrivateX', privx.getPrivateX);

// 8. Returns Value of privateX
console.log('8. privx.getPrivateX()', privx.getPrivateX());

// 9. No Return(void | undefined) Method
//    The next call getPrivateX() will return the new Value
console.log('9. VOID privx.setPrivateX(299)', privx.setPrivateX(299));

// 10. Return: getPrivateX after a setPrivateX();
console.log('10. set(299) privx.getPrivateX ', privx.getPrivateX());

// 11. Returns A Error String to User
console.log('11. privx.setPrivateX(String)', privx.setPrivateX('ATTACK'));

// 12. Returns value of PrivateX before the setPrivateX(StringError)
console.log('12. set(String) privx.getPrivateX()', privx.getPrivateX());

// 13. Returns the Service Function RESULT
console.log('13. privx.setReturnPrivateX(399)', privx.setReturnPrivateX(399));

// 14. Inline Function Call - Returns Value of Get after Set and Return
console.log('14. set(399) privx.getPrivateX() : ', privx.getPrivateX());

// 15. Inline Function Call - Returns PrivateX + pubx(GLOBAL)
console.log('15. privx.addGlobalandPrivate() : ', privx.addGlobalandPrivate());

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />