tom c
tom c

Reputation: 329

When to use 'return' in javascript

I'm learning about javascript using various books and I'm noticing that I can't find an adequate explanation of when, exactly, you use return. I understand that you use it when you want to return a value from a function, but then there's examples such as this from Javascript: The Good Parts:

var quo = function(status) {
    return {
        get_status: function() {
            return status;
        }
    };
};

var myQuo = quo("amazed");

document.writeln(myQuo.get_status());

Why does status have to be returned when it is already available to the quo function as an argument? In other words, why does simply

return {
    get_status: status;
}

not work?

Another example on the page immediately following:

var add_the_handlers = function(nodes) {
    var helper = function(i) {
        return function(e) {
            alert(i);
        };
    };
    var i;
    for (i = 0; i<nodes.length; i+=1) {
        nodes[i].onclick = helper(i);
    }
};

Why are we returning alert(i) within a function instead of simply putting alert(i)?

Upvotes: 3

Views: 299

Answers (4)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382130

return {
    get_status: status
}

would not define a getter, that is a function returning the underlying value. It would only define a property.

You would use it as

var status = quo.get_status;

And any user could change the status with

quo.get_status = 'new status directly changed';

One of the reason to use

return {
    get_status: function() {
        return status;
    }
};

is that it makes status private : the users of the quo object can't change the internal status property of the quo object, they can only read it with

var status = quo.get_status();

Upvotes: 10

sabof
sabof

Reputation: 8192

The first example might be useful, if for instance you wanted to add some constraints on the status. Notice, that get_status is not meant to be called from within quo.

var quo = function(status) {
    return {
        get_status: function() {
            return status;
        }
        set_status: function(newValue) {
            if (newValue === 2 || newValue === 0) {
               status = newValue;
            }
        }
    };
};

The second is an example of a "function maker". Helper will return a different function depending on the value passed. Later the example binds these "made" functions to click events. Simply writing alert(i); would create alerts while in the loop.

Upvotes: 1

UweB
UweB

Reputation: 4110

I won't argue about why the code is as it is -it seems overly complicated to me too- but down to the technical side of things:

return {
    get_status: function() {
        return status;
    }
};

This will return a function in property get_status, that the caller of quo can call whenever he pleases (x.get_status()).

return {
    get_status: status;
}

This isn't valid javascript, if you adjust it to

return {
    get_status: status
};

quo will return an object with a single string property named get_status instead. And that'll work too! You will simply retrieve the value differently.

Check out the following (not very elegant) JSFiddle: http://jsfiddle.net/edw6a/1/

Upvotes: 1

twil
twil

Reputation: 6162

What you see in this example is closure demonstration (see) and status is saved inside object like private variable.

Upvotes: 1

Related Questions