Still having difficulty getting your head around passing function values as arguments to other functions? Try these examples with explanantions.
// doSomething defined as a function expression var doSomething = function (passedFunction) { // call the function parameter that was passed as // an argument to doSomething passedFunction(); // i.e. hello(), goodbye() or any other function }; // just a normal function declaration which we // will pass to doSomething function hello() { alert("Hello"); } // another function we could pass to doSomething function goodbye() { alert("Goodbye"); } // run doSomething with hello as its argument doSomething(hello); // hello is passed to the passedFunction param of doSomething // inside of doSomething its as if it said hello() instead of // passedFunction(). By using the passedFunction variable we // can pass any function we like to doSomething
In the previous example we simply ran a function inside doSomething. We didn’t need to return it, we just executed it because it was just a simple function that alerted a string of text. Its simple enough for illustration purposes but more likely we would have a different kind of function and we would want to return a value. Consider this modified example.
// hello function modified to RETURN a value instead of alerting // so we'll make doSomething return THOSE values var doSomething = function(paramOne, paramTwo, passedFunction) { // return the result of calling the function return passedFunction(paramOne, paramTwo); }; function hello(a, b) { return "Hello " + a + " " + b; } // run doSomething with hello as its argument var foo = doSomething("Tedwood", "Peacock", hello); alert(foo); // What did we just do? // we execute doSomething with 3 arguments // the third of those arguments will go into the // passedFunction param // in other words the function that runs inside doSomething // will be the hello function // the first 2 arguments to doSomething will become the 2 // arguments supplied to the hello function // the hello function returns the string "Hello" concatenated // with the other 2 arguments // so what we end up doing inside doSomething is effectively // the following: return hello("Tedwood", "Peacock"); // This returns the string "Hello Tedwood Peacock" // that string then gets returned from doSomething and placed //into the foo variable // then we alert the contents of that variable
If thats still not clear, consider the following:
var doSomething = function(paramOne, paramTwo, passedFunction) { // execute the passed function and put result in bar var bar = passedFunction(paramOne, paramTwo); return bar; }; function hello(a, b) { var str = "G,day " + a + " " + b; return str; } // declare empty variable foo var foo; // run doSomething and put result in foo foo = doSomething("Tedwood", "Peacock", hello); // now do whatever you want with foo. // Alert it, log it, write it to the page or // pass it to another variable or function etc alert(foo); // I like to visualise it by working backwards // run hello("Tedwood", "Peacock"); // that gives the string "G,day Tedwood Peacock" // put that string in the variable bar // return that string to the variable foo