I’ve learnt a few new JS things recently so I’m going over them in the hope they will be further embedded in my brain.

Returning objects to global scope

Say I have functions, variables or anything that I wanted to access throughout my script, something like this.

var BitOfJS = BitOfJS || {};

BitOfJS.init = function() {

  BitOfJS.sayHello.speak();
  //BitOfJS.sayHello.speak is not a function

}

BitOfJS.sayHello = function() {

  this.speak = function() {

    alert('hello');

  }

}

BitOfJS.init();

(http://codepen.io/anon/pen/EVPQWP)

I’m unable to access that speak function to say hello so I need to return it back to the global scope in order to gain access.
(Going forwards the code will be shortened. Please see the CodePen demo links for the full code).

BitOfJS.init = function() {

  BitOfJS.sayHello().speak();
  // Alert Hello

}

BitOfJS.sayHello = function() {

  var saySomething = {};

  saySomething.speak = function() {

    alert('hello');

  }

  return saySomething;

}

BitOfJS.init();

(http://codepen.io/anon/pen/OyyZyp)

Factories

However when I call BitOfJS.sayHello().speak() it’s running two functions, first ‘hello’ and then ‘speak’. If we need to call ‘speak’ multiple times we’re loading the whole of ‘hello’ too, let me show you an example.

BitOfJS.init = function() {
  
  this.sayHello = BitOfJS.sayHelloFactory();
  
  this.sayIt();
  
}

BitOfJS.sayIt = function() {
  
   BitOfJS.sayHelloFactory().tellMeASaying();
   BitOfJS.sayHelloFactory().tellMeASaying();
   BitOfJS.sayHelloFactory().tellMeASaying();
  
}

BitOfJS.sayHelloFactory = function() {
  
  console.log('called');
  
  var saySomething = {};
  
  saySomething.tellMeASaying = function() {
    
    console.log('Success is not final, failure is not fatal: it is the courage to continue that counts.');
    
  }
  
  return saySomething;
  
}

(http://codepen.io/anon/pen/BojJRW)

It’s not a very practical example but if I wanted to call ‘tellMeASaying’ three times the code runs ‘called’ in the console each time too. Imagine this function was a large one, it would have to run everything each time. I can use a JS Factory to make things a bit more efficient.

BitOfJS.init = function() {
  
  this.sayHello = BitOfJS.sayHelloFactory();
  
  this.sayIt();
  
}

BitOfJS.sayIt = function() {
  
   BitOfJS.sayHello.tellMeASaying();
   BitOfJS.sayHello.tellMeASaying();
   BitOfJS.sayHello.tellMeASaying();
  
}

BitOfJS.sayHelloFactory = function() {
  
  console.log('called');
  
  var saySomething = {};
  
  saySomething.tellMeASaying = function() {
    
    console.log('hello my dear');
    
  }
  
  return saySomething;
  
}

(http://codepen.io/anon/pen/dYGJLX)

I created a variable containing the ‘sayHelloFactory’. By doing this I can then use ‘sayHello’ and access the required parts of the object without initiating – and calling – the whole thing repeatedly. ‘called’ is logged in the console once and ‘hello my dear’ three times.

Polymorphism

Finally I needed a solution to call a function using either all, or part of an object. Lets look at another example.

BitOfJS.init = function() {
  
  this.sayHello = BitOfJS.sayHelloFactory();
  
  this.sayIt();
  
}

BitOfJS.sayIt = function() {
  
   BitOfJS.sayHello.tellMeASaying();
  
}

BitOfJS.sayHelloFactory = function() {
  
  var saySomething = {};
  
  saySomething.tellMeASaying = function() {
    
    var sayings = {
      saying1: {
        inventor: 'Lee Eel',
        saying: 'Hello my dear'
      },
      saying2: {
        inventor: 'Shane Prendergast',
        saying: 'Well smack my bottom and call me Roger'
      }
    }
    
    speakUp(sayings['saying1']);
    speakUp(sayings['saying2']);
    
    function speakUp(info) {
      
      console.log('inventor was ' + info.inventor + ". Saying was....." + info.saying);
      
    }
    
  }
  
  return saySomething;
  
}

(http://codepen.io/anon/pen/qObxEZ)

Here I’m outputting the two sayings from the object. I needed a setup that would allow me to use part, or all of the object. Here was my solution.

BitOfJS.init = function() {
  
  this.sayHello = BitOfJS.sayHelloFactory();
  
  this.sayIt();
  
}

BitOfJS.sayIt = function() {
  
   BitOfJS.sayHello.tellMeASaying();
  
}

BitOfJS.sayHelloFactory = function() {
  
  var saySomething = {};
  
  saySomething.tellMeASaying = function(whatToSay) {
    
    whatToSay = whatToSay || ['saying1', 'saying2'];
    
    var sayings = {
      saying1: {
        inventor: 'Lee Eel',
        saying: 'Hello my dear'
      },
      saying2: {
        inventor: 'Shane Prendergast',
        saying: 'Well smack my bottom and call me Roger'
      }
    }
    
    for(var i = 0; i < whatToSay.length; i++) {
      
      speakUp(sayings[whatToSay[i]]);
      
    }
    
    function speakUp(info) {
      
      console.log('inventor was ' + info.inventor + ". Saying was....." + info.saying);
      
    }
    
  }
  
  return saySomething;
  
}

(http://codepen.io/anon/pen/RWWyjK)

The whatToSay variable is either using the passed parameter (if it exists), or just whole object. I then loop through the ‘whatToSay’ array and call the ‘speakUp’ function with the desired parts of the object. So If I only wanted to hear what Lee Eel had to say I could do something like the following.

BitOfJS.sayIt = function() {
  
   BitOfJS.sayHello.tellMeASaying(['saying1']);
  
}

(http://codepen.io/anon/pen/MaKQjM)

And that’s it! As always many thanks to for his assistance. If anyone has any suggestions or reccomendations feel free to shout up .

• JS/jQuery
• Learning