Javascript Encapsulation and Compound Assignment Operator

Question

My aim to to create an object in Javascript where I can easily just go block.red = 128; or block.red += 5. Which could easily be done using this.red inside the object, but I want my object also be able to do which is stumping me is to ensure that the red value falls within the accepted range (i.e. not above 255 and not below 0).

I've had a bit of a look around, and one thing I thought might work was encapsulation. The problem being then is that I can't use the compound assignment operator. Obviously this isn't the end of the world, but I would like to know if there are any solutions that I haven't thought up.

function colours(r, g, b) {
    _r = r;
    _g = g;
    _b = b;

    this.red = red;

    function red(value) {
        if (value == undefined) {
            return _r;
        } else {
            if (value < 0) {
                _r = 0;
            } else if (value > 255) {
                _r = 255;
            } else {
                _r = value;
            }
        }
    }
}

// tests
colours(240, 120, 60);
alert(red());
red(120);
alert(red());
red(360);
alert(red());

// works up to here
red() -= 30;
alert(red());

So do you have any ideas of how I can keep the compound assignment operator while still ensuring the red value stays within range?

I think [this](http://stackoverflow.com/questions/5282507/how-to-run-a-function-in-javascript-every-time-a-variable-changes) is what you are looking for. — Fenixp, Oct 04 '13 at 12:22
The "Object Watch" looks like it would work, seems like an interesting debugging tool that could be useful. — timmsimpson, Oct 04 '13 at 12:49
Notice that you forgot [`var`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var) before the variables, and are not invoking your constructor with `new`. It should be `var c = new colours(240, 120, 60); alert(c.red()); …` — Bergi, Oct 04 '13 at 13:29

Joe Simmons · Accepted Answer · 2013-10-04T13:37:05.350

You can use getters and setters as one way to achieve this.

// our constructor function
function Color(r, g, b) {
    return {
        get red() {
            return r;
        },

        set red(value) {
            // let's make sure we get a number here
            if ( typeof value === 'number' && !isNaN(value) ) {
                // check the range
                if (value < 0) {
                    r = 0;
                } else if (value > 255) {
                    r = 255;
                } else {
                    r = value;
                }
            } else {
                // this gets set if they don't pass a number
                r = 255;
            }
        }
        // other color methods here
    };
}

// --------------------

var red = new Color(255, 0, 0);

alert(red.red); // 255

red.red -= 55;  // assignment within range, success

alert(red.red); // 200

red.red -= 999; // assignment out of range, failure

alert(red.red); // 0

red.red += 999; // assignment out of range, failure

alert(red.red); // 255

jsFiddle example

Sorry, I kind of copied what he originally had and modified it. You're right, I can use those parameters like that. — Joe Simmons, Oct 04 '13 at 13:23

Javascript Encapsulation and Compound Assignment Operator

1 Answers1