Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Holiday Gift Guide
Holiday Gift Guide

A JavaScript Function That Returns a Function

A function is a block of code that returns a value. When your code calls a function, you may pass a value or values to the function. These values are called arguments or parameters. When execution of the code in a function comes to a return statement, the thread of execution will return to the code that invoked the function. Functions often return a value. The return value is returned back to the code that invoked the function.

function myMultiply(p1, p2)
{
   return p1 * p2;
}

The example above defines a function named myMultiply that takes two parameters, p1 and p2, and returns the product of p1 and p2.

A function's return statement can also return a function. The example below shows the use of the return statement to return a function.

function myWorker()
{
   return function myMultiply(p1, p2) { return p1 * p2; };
}

var func = myWorker();
var x = func(2, 5);
document.write(x);

When myWorker is called, the function myMultiply is returned and placed in a variable named func, then func is passed two parameters and it returns the product of the two parameters to the variable x.

These are sometimes called higher-order functions. A higher-order function is a function that returns a function, or a function that can take another function as an argument. Is there any practical use for a function that returns a function? Not really, but they can be used to compensate for poor programming practices. The example below shows a poor programming practice.

function myWorker()
{
   a = 2;
   var b = 5;
}

myWorker();

document.write(a);
document.write(b);

The function myWorker declares two variables, a and b. Without the var statement, a implicitly creates a global variable. With the var statement, b's visibility is constrained to within the function myWorker. The document.write(a) statement will write "2". The document.write(b) statement will not write because b is not defined outside myWorker.

Another poor programming practice a function that returns a function compensates for is weak global variable naming. All JavaScript code in a document, whether in a local script block, or included from an external file, share the same global namespace. So if you declare a global variable named count, it will collide with any other global variables named count even if they where included as external advertising or affiliate code.

The solution is, of course, to use variable names that are not likely to be commonly used. This can be achieved by attaching a prefix to your global variable names, e,g. ns_xtjpr_count. But you can also solve the problem by wrapping all your variables in functions that return functions that access the outer functions local variable(s).

The example below defines a function counterCreator() that returns the function incCount() which increments the variable count in it's outer function.

function counterCreator()
{
   var count = 0;
   return function incCount() { return ++count; };
}

var counter1 = counterCreator();

alert(counter1());

alert(counter1());

alert(counter1);

alert(count);

The statement below the function declaration places code for incCount() function in variable counter1. The following alert function executes incCount(), incrementing counter1 to 1. The next alert function executes incCount(), incrementing counter1 to 2. The next alert function does not increment, or even display counter1 because the variable count is local to counterCreator() and is not visible globally. same with the last alert function.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268