Ad

JavaScript Function Hoisting In My Object

- 1 answer

I have created an object and am attaching a bunch of functions to the object. I am concerned about how the ordering of the functions effects when I can call my functions. In my example below, I must define my functions first before I can use them. My problem with this is that I cannot call init() immediately until I have defined it. Init() will contain a bunch of other functions that it will need to call, which will have to be placed above init(). So in the end, init() will have to be the very last function defined in my object. I believe this is related to Hoisting.

My question is if there is a way for me to call a function before defining it? Is there some sort of way to create a 'placeholder' function like in C?

https://jsfiddle.net/13hdbysh/1/

(function() {

  foo = window.foo || {};

  //this will not error
  foo.helloWorld = function() {
    console.log('helloWorld()');
  };
  foo.helloWorld();

  //this will error
  foo.init();
  foo.init = function() {
    console.log('init()');
  };

})();
Ad

Answer

What you're asking deals with how objects store member data. This can be seen in a weird light because of prototypal inheritance. Javascript by default will parse naked functions before they execute.

Example:

(function() {
  init();
  function init()
  {
        console.log("Init");
  }
)}; 

This gets muddied when storing behavior as a member to an object. Because prototypal inheritances dynamic functionality you need to declare your members before accessing them. This is Javascript's main difference from traditional OOP languages.

You mentioned, "is there a way to create a 'placeholder' function like in C." You can, but not in the same way. You can assign it to a naked function and assign that to your object. Look in my example, the hello function.

Alternatively you can store the behavior on the prototype of your object and override it when necessary.

Example:

function hello() 
{
  console.log("Hello my name is "+this.name);
}

(function() {  
  var something = function(name) {
        this.name = name;
    };

  something.prototype.initTwo = function() {
    console.log("My Name is: "+this.name);
  };

    var thingOne = new something("Thing One");
  thingOne.init = "SomeThing";

  var thingTwo = new something("Thing Two"); 
  thingTwo.init = function() {
     console.log(this.name);
  };

  thingTwo.initTwo = function() {
    console.log("SomethingTwo is Named: "+this.name);
  };

  thingTwo.hello = hello;

  console.log(thingOne.init);
  thingTwo.init();

  thingOne.initTwo();
  thingTwo.initTwo();
  thingTwo.hello();
}) ();

Demo: Fiddle

Documentation on objects in javascript.

Ad
source: stackoverflow.com
Ad