Over a million developers have joined DZone.


· Agile Zone

Reduce testing time & get feedback faster through automation. Read the Benefits of Parallel Testing, brought to you in partnership with Sauce Labs.

I've been poking around in Javascript recently and one thing that's struck me is the habit of using the same function name for a getter and a setter. So if you want to find out the height of your banner in jQuery you would use $("#banner").height() and if you want to change the height you would use $("#banner").height(100).

This convention is familiar to me, as it was used by Smalltalk. You might get a value with banner height and change it with banner height: 100. Knowing it was a smalltalk convention is enough to expect me to like it, since I have an distant but abiding love for that language. But even the best things have flaws, and I can't hide my dislike for this coding style.

My principal objection is that the act of retrieving data is fundamentally different to that of setting a value, so the names should be more clearly different.

Another reason is the confusion between a setter and a getter that takes an argument. If I see $("#banner").css('height') the general expectation is that it's setting a css property to 'height'. It's only my knowledge of the jQuery API that tells me that css('height') gets the value of the height, which I would update with css('height', 100).

The lack of explictness between getter and setter is greater in Javascript than in Smalltalk because there's only one method. Smalltalk is an untyped language, but does overload based on the number of arguments to the method.[1] Javascript doesn't overload in the language, so the getter and setter shows up as a single method. Documentation can help, but the API itself doesn't distinguish between them. The presence of the extra argument acts as a FlagArgument, which is usually a Bad Thing.

I'm not proposing that Java's ugly getHeight() / setHeight(100) convention is better. I think using a bare value for the getter is usually the best way. My preference is to make any setter clearly stand out.

In general I like to do this through different syntax, so the property setting syntax of C# and Ruby scores best here. In these languages you can get a value with banner.height and change it with banner.height = 100.

This approach does, however, depend on a language that supports it. You can't do this with Javascript. In this cases I'd prefer a bare getter and prefixed setter, so you'd get the value with banner.height() and change it with banner.setHeight(100).

Despite this preference, you do have to follow the conventions of the language you're dealing with. If I were writing Smalltalk again I'd still use height:100 in order retain consistency with the conventions of the language. Javascript, however, isn't noted for having strong conventions, so here I'd prefer to avoid this convention, even if it is used by jQuery.

1: Technically it isn't an overload, as 'height' and 'height:' are different names (due to the colon). But it certainly feels like it.

The Agile Zone is brought to you in partnership with Sauce Labs. Discover how to optimize your DevOps workflows with our cloud-based automated testing infrastructure.


Published at DZone with permission of Martin Fowler, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}