When to use 'return' in javascript

Question

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)?

i think you're confusing delayed execution with immediate. function(){ alert() } and alert() aren't the same thing. Also, if you made it get_status: status so now it's a property and not a method (so myQuo.get_status instead of myQuo.get_status()) and also is read-only instead of being modifiable. — Brad Christie
– Brad Christie, Commented Jul 27, 2013 at 15:20
Example two: you don't want to alert immediately, you want to alert later... You're not returning alert(I), you're returning a function that calls alert. — Dave Newton
– Dave Newton, Commented Jul 27, 2013 at 15:21

Denys Séguret · Accepted Answer · 2013-07-27 15:33:23Z

10

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();

edited Jul 27, 2013 at 15:33

answered Jul 27, 2013 at 15:20

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

twil · Accepted Answer · 2013-07-27 15:19:40Z

1

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

answered Jul 27, 2013 at 15:19

twil

6,1721 gold badge34 silver badges31 bronze badges

Comments

UweB · Accepted Answer · 2013-07-27 15:30:09Z

1

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/

answered Jul 27, 2013 at 15:30

UweB

4,1102 gold badges18 silver badges28 bronze badges

Comments

sabof · Accepted Answer · 2013-07-27 15:30:35Z

1

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.

answered Jul 27, 2013 at 15:30

sabof

8,2024 gold badges32 silver badges53 bronze badges

Collectives™ on Stack Overflow

When to use 'return' in javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related