Question

can anyone explain the following to me. I have two JavaScript functions defined in global scope as follows:

    var foo = function () {
        var that = this;

        that.toString = function () { return "foobar" };

        return that;
    }();

    alert(foo.toString());

    var foo2 = function (foo) {
        var that;

        that = $.extend(true, {}, foo);

        return that;
    }();

Alerting foo.toString() works as I would expect as foo is assigned the result of invoking the function. However I would have expected foo2 to have access to foo. Yet inside foo2 foo is undefined. Can anyone help?

Many Thanks,
Mike.

Answer 1

You’ve created a function which accepts an argument called foo. This local variable will override the global variable of the same name. If you don’t pass in anything for this argument, the local foo is automatically set to undefined. You can either remove the argument or pass the global foo.

var foo2 = function (foo) {
    var that;

    that = $.extend(true, {}, foo); // foo is from the local scope

    return that;
}(foo); // Pass in foo

Or

var foo2 = function () { // remove the argument
    var that;

    that = $.extend(true, {}, foo); // foo is from the global scope

    return that;
}();