• JavaScript Functions are Variables

    Dec 29 2007

    JavaScript functions are variables, and this is a big difference between JavaScript and many other programming languages. It can be a bit of a paradigm shift for people new to JavaScript, but it allows for some really cool things you can't do in many other languages.

    When I say functions are variables, I mean that they're treated much the same as arrays, numbers, strings and objects. That means you can do some neat things.

    You can define and redefine functions as local variables:

    var myFunc;
    
    if (Math.random() < 0.5) {
        myFunc = function() {
            alert('heads');
        };
    } else {
        myFunc = function() {
            alert('tails');
        };
    }
    
    myFunc(); // alerts "heads" or "tails" depending on random value
    

    You can also pass functions as parameters to other functions, which is very useful for callback functions:

    function do_something(callback_function) {
        alert('hello');
    
        if (callback_function) {
            callback_function();
        }
    }
    
    var my_callback = function() {
        alert('goodbye');
    };
    
    do_something(my_callback); // alerts "hello" and then "goodbye"
    

    You can also return a function from a function:

    function get_multiplier(factor) {
        return function(num) {
            return num * factor;
        };
    }
    
    var times_5 = get_multiplier(5);
    var result = times_5(10);
    
    alert(result); // alerts "50"
    
    var six_times_two = get_multiplier(6)(2);
    
    alert(six_times_two); // alerts "12"
    

    You can also define "anonymous" functions without a name and even execute them:

    (function(first_name, get_last_name) {
        var last_name = get_last_name();
    
        alert(first_name + ' ' + last_name); // alerts "Jesse Skinner";
    })('Jesse', function(){ return 'Skinner'; });
    

    Note that in order to execute an anonymous function you have to wrap it in () parentheses first.

    So that's just some of the unusual stuff you can do with JavaScript. Once you get familiar with the concept, you can really start to reuse code in great new ways.

  • Comments

    1. nitinpai at 1:22am on January 3, 2008

    Hey Jesse,

    Aren't such functions referred to as closures?

    2. Jesse Skinner at 6:42am on January 3, 2008

    Sure, functions can be closures if they're used to create a new scope that anchors down some variables. But I think the word closure is referring to this effect alone - surely you can do lots of other cool stuff with functions :)

    3. Veeresh at 11:56pm on May 9, 2008

    Informative article, it helps allot for a static content for dynamic access.

    Thanks,

    Veeresh D.
    http://drveresh.googlepages.com

    4. andris at 7:35pm on October 22, 2008

    if (callback_function) {
            callback_function();
        }

    I better it replace with
    if( typeof callback_function == 'function' ) callback_function();

    5. Oscar at 6:59pm on January 23, 2009

    Nice and useful!

    6. Vijay Karla at 8:04am on April 11, 2009

    Nice article
    Is it possible to call a fuction doSomething with one of its parameter the the fuction poiter, and then execute the function pointed by the variable inside doSomething?

    7. Jesse Skinner at 1:54pm on April 12, 2009

    @Vijay - sure, that's basically what's happening in the 2nd example above.

    8. Zach at 12:57am on February 16, 2011

    Thanks for the post!  Quite helpful because I was wondering why some examples were using functions like within variables instead of just regular functions.

    9. Gavin Kistner at 11:57am on April 22, 2011

    The title of this entry and the terminology it uses are incorrect and confusing (at best) and misleading. Variables are not values, and values are not variables. A function is not a variable any more than an array is a variable. They may be referenced by variables.

    10. jP at 2:39pm on June 4, 2011

    Thanks for this post.  It was exactly what I've been wanting to know.

    11. Hug0 at 5:33am on September 29, 2011

    Gavin Kistner: Agree, glad that someone has pointed it out.

    Commenting is now closed. Come find me on Twitter.