the Future of the Web
  • Home
  • Hire Us
  • Articles
  • About
  • Contact
  • 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.

    Tags: javascript functions
    View 7 Comments | Add a comment
  • Comments

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

    Hey Jesse,

    Aren't such functions referred to as closures?

    2. Jesse Skinner at 12:42pm 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 5:56am on May 10, 2008

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

    Thanks,

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

    4. andris at 1:35am on October 23, 2008

    if (callback_function) {
            callback_function();
        }

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

    5. Oscar at 12:59am on January 24, 2009

    Nice and useful!

    6. Vijay Karla at 2:04pm 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 7:54pm on April 12, 2009

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

    Add a Comment

    Note: HTML tags and entities will be converted so that they are displayed as you type them. This means if you type in <em>, people will see <em>, and if you type &lt;em&gt;, people will see &lt;em&gt;.

  • Request a Quote

  • Jesse Skinner

    Jesse Skinner
    • Hire Me
    • About Me
    • Email Me
    • RSS Feed RSS Icon
    • @JesseSkinner
  • Recent Articles

    • jQuery Live Events
    • I need web developers
    • buttons need type="submit" to submit in IE
    • Win $200 in a Web Dev Writing Contest
    • Use Arrays in HTML Form Variables
    • 5 Reasons Freelancers Can Succeed in a Shrinking Economy
    • Keeping a Live Eye on Logs
    • Using PHP's empty() Instead of isset() and count()
    • Testing Web Pages with Lynx
    • Stop CSS Background Flickering in Internet Explorer 6
    • See All...
  • Categories

    • javascript (39)
    • links (21)
    • about (19)
    • web (14)
    • html (12)
    • server (11)
    • css (8)
    • browsers (8)
    • carnival (7)
    • work (6)
    • design (4)
    • seo (4)
    • ads (4)
    • standards (4)
    • events (4)
  • Older Articles

    • February 2009
    • January 2009
    • December 2008
    • November 2008
    • October 2008
    • July 2008
    • June 2008
    • May 2008
    • April 2008
    • February 2008
    • January 2008
    • December 2007
    • November 2007
    • September 2007
    • August 2007
    • July 2007
    • June 2007
    • May 2007
    • April 2007
    • March 2007
    • February 2007
    • January 2007
    • December 2006
    • November 2006
    • October 2006
    • September 2006
    • August 2006
    • July 2006
    • June 2006
    • May 2006
    • April 2006
    • March 2006
    • February 2006
    • January 2006
    • December 2005
    • November 2005
    • October 2005
    • September 2005
    • August 2005
    • April 2005
    • See All...
Copyright © 2009 The Future of the Web