If you can't use a getter/setter, which format do you prefer?

[rich]

If a framework was unable to offer you a direct getter/setter implementation, i.e:

 

alien.x = 50;if (alien.x > 320 && alien.health < 10) {   alien.destroy();}

 

Which of the following formats would you prefer?

 

The braces:

 

alien.x() = 50;if (alien.x() > 320 && alien.health() < 10) {   alien.destroy();}

 

Or the 'get' prefix:

alien.getX() = 50;if (alien.getX() > 320 && alien.getHealth() < 10) {   alien.destroy();}

 

Please assume for the sake of this question that x cannot be a simple variable and the method contains important update logic.

 

Do you have another style you prefer more?

 

Ideally we want to support getters/setters but the implementation (object.defineProperty) isn't supported in older browsers (IE7 for example).

[hima]

Definitely a get/set prefix for me. It's clearer and easier to maintain IMO.

[benny!]

Would this also be possible:

 

// Setteralien.x(50);// Getteralien.x(); 

 

This reminds me on how jQuery works - so I am kind of used to it.

[rich]

Yeah that was option 1 benny interesting its a 50/50 split so far!

[benny!]

...

The braces:

 

alien.x() = 50;

 

This confused me a bit. Assigning a value to a function.

 

Yeah that was option 1 benny interesting its a 50/50 split so far!

 

Yup, I guess a lot of pepole like the explicit usage of getter/setter which were broadly used in Java. I like em too - however I tend to more and more like implicit getter/setter e.g. introduced with Actionscript.

[rich]

Yeah my bad, I meant it as per your example.

[endel]

I prefer the Java-like getSomething/setSomething.

 

Do you tried the "onpropertychange" hack for older browsers?

There is a implementation that seems to work here: http://johndyer.name/native-browser-get-set-properties-in-javascript/

But probably should be much slower, since it rely on a fake DOM element.

[rich]

Yeah I've read about all the various hacks available but none of them seem worth it to be honest. I think what we'll actually do is branch the framework specifically for the IE7 build.

[Ezelia]

or combinning both

 

alien.x.get();alien.x.set(50); 

[rich]

Interesting, but... no

 

I think we simply ditch IE8 support at all for the framework, and then we can use proper getters/setters anyway. It just won't be backward compatible.

[Ezelia]

that's not a problem, HTML5 games are for modern browsers,

IE8- is for browsing Microsoft websites not for playing games

[rich]

You obviously don't have the same clients as I do

[Ezelia]

game dev is (still) a hobby for me, in my real work we have customers like yours who ask for cross-browsers support, by cross-browser they mean IE6+ ...

[rich]

It just makes things extra complicated and messy.

[alex_h]

I'd also vote for the 'set' 'get' prefix, on the grounds of clarity.

Having a function with the same name as the internal property it sets the value of just feels a little bit dirty somehow...ugh! 

[andrewjbaker]

get/set go!!!

[Quetzacotl]

In C I was using x() and setX() as most libraries use this naming convention, because x should be private anyway. In Python we can define properties, so set and get are just a waste of time and this is the best option for me. I would stick to defineProperty in JS.

[bmatusiak]

I think this format works

 

var _privAlien =  {    x:null};var alien = {    get x(){        return function(x){            if(!x)                return _privAlien.x;            else            _privAlien.x = x;        };    },    set x($var){        this.x($var);    }};alien.x(293);//oralien.x = 293;  window.document.writeln(alien.x()); // == "293"

[remvst]

Looks more like ActionScript than Javascript to me...

[bmatusiak]

Looks more like ActionScript than Javascript to me...

 

dont know what ActionScript looks like, Im all about javascript  

 

http://jsfiddle.net/bmatusiak/Ye4fS/3/

[Chris]

I would prefer the syntax already used by the famous Backbone framework:

alien.get('x'); 

or 

 

alien.set('x', 20); 

 

With this technique you can avoid appending a bazillion of new methods to the object (namely two for every attribute) and stay flexible for future additions of attributes.

Its also fast! Lets assume you hold an internal "attributes" object in the alien object:

 

function Alien(){	var attributes = {		x: 10,		y: 10	}	this.get(attr){		return attributes[attr];	}	this.set(attr, value){		attibutes[attr] = value;		return this;	}}

 

You can see: all attributes remain private to the object constructor and can only be accessed via the get/set methods. You can also add some validation to the set function (or emit some events when values have been changed), but the get() method is really really fast and easy to use outside the object.

 

I would adopt this pattern, since it worked very well for Backbone, which is a widely used and proven library.

 

Edit:

 

With a little tweak, you would also be able to use the set() method to set multiple values at once, like so:

alien.set({    x: 10,    y: 20});

 

 

[Quetzacotl]

Well, you have to ask yourself a question, why we use setters and getters in first place.

Because If you will need additional validation or operation on value, then you would have to replace every assignement

 

 obj.x = 1

 

 to 

 

set('x', 1)

 

  Now lets assume that we have a node of html and we want to add some text to it. In your example it would be 

 

node.set('text', text)

 

  but we need to truncate text to prevent users from code injection. So your set code would have to look like this:

function Node(){	var attributes = {		text: 10	}	this.get(attr){		return attributes[attr];	}	this.set(attr, value){                switch (attr) {                    case 'text':                         value = truncate(value);                         break;                }		attibutes[attr] = value;		return this;	}}

 

It has few flaws.

It's slow to check attr every time you set value. 

If you get more attr to validate your switch code will grow fast.

 

If you don't want bazillion of methods then use defineProperty, it's the best solution.

[Chris]

After thinking a bit about it, I think defineProperty is the best solution, too.

 

It supports get/set methods for the property (docs in MDN) and is widely supported in nearly all browsers, even IE.

 

It also brings the usage back to the simple:

 

alien.x = 20;

 

Which is shorter and clearer than:

alien.set('x', 20);

 

So +1 for @Quezacotl's suggestion for using defineProperty.

[rich]

defineProperty doesn't work in IE7/8 so couldn't be used for our purposes. TypeScript automatically uses it anyway for ES5 support, but we need ES3 so it wasn't an option sadly.

[Chris]

I suggest sticking to the single get/set method without validation, then.

You should take a look at backbones codebase for that.