10/1/13

John Resig - JavaScript Getters and Setters

Home Blog About Me

John Resig Contact, Subscribe

JavaScript Getters and Setters

It is with much happiness that I think I can finally say, without seeming like a fool, that: JavaScript Getters and Setters are now prevalent enough to become of actual interest to JavaScript developers. Wow, Ive been waiting a long time to be able to say that. I want to start by giving a whirlwind tour of Getters and Setters and why theyre useful. Followed by a look into what platforms now support Getters and Setters as to make them relevant.

Getters and Setters

Getters and Setters allow you to build useful shortcuts for accessing and mutating data within an object. Generally, this can be seen as an alternative to having two functions with an object that are used to get and set a value, like so:
1 . { 2 . 3 . 4 . 5 . 6 . 7 . 8 . } g e t V a l u e :f u n c t i o n ( ) { r e t u r nt h i s . _ v a l u e ; } , s e t V a l u e :f u n c t i o n ( v a l ) { t h i s . _ v a l u e=v a l ; }

The obvious advantage to writing JavaScript in this manner is that you can use it obscure values that you dont want the user to directly access. A final result looking something like the following (using a closure to store the value of a newly constructed Field):
u n c t i o nF i e l d ( v a l ) { 1 . f v a rv a l u e=v a l ; 2 . 3 . t h i s . g e t V a l u e=f u n c t i o n ( ) { 4 . r e t u r n v a l u e ; 5 . } ; 6 . 7 . t h i s . s e t V a l u e=f u n c t i o n ( v a l ) { 8 . v a l u e=v a l ; 9 .
ejohn.org/blog/javascript-getters-and-setters/ 1/5

10/1/13

John Resig - JavaScript Getters and Setters

1 0 . 1 1 . }

} ;

Some example results:

1 . 2 . 3 . 4 . 5 . 6 . v a rf i e l d=n e wF i e l d ( " t e s t " ) ; f i e l d . v a l u e / /= >u n d e f i n e d f i e l d . s e t V a l u e ( " t e s t 2 " ) f i e l d . g e t V a l u e ( ) / /= >" t e s t 2 "

Now, centered around this concept, is where getters and setters come into play. They allow you to bind special functions to an object that look like normal object properties, but actually execute hidden functions instead. The end result looks something like this:
1 . 2 . 3 . 4 . 5 . 6 . v a rf i e l d=n e wF i e l d ( " t e s t " ) ; f i e l d . v a l u e / /= >t e s t f i e l d . v a l u e=" t e s t 2 " ; f i e l d . v a l u e / /= >" t e s t 2 "

So lets look at how you would go about setting something like that up. Mimicking the hidden value property style of before, our code would look something like this:
u n c t i o nF i e l d ( v a l ) { 1 . f v a r v a l u e = v a l ; 2 . 3 . t h i s . _ _ d e f i n e G e t t e r _ _ ( " v a l u e " ,f u n c t i o n ( ) { 4 . r e t u r nv a l u e ; 5 . } ) ; 6 . 7 . t h i s . _ _ d e f i n e S e t t e r _ _ ( " v a l u e " ,f u n c t i o n ( v a l ) { 8 . v a l u e=v a l ; 9 . } ) ; 1 0 . 1 1 . }

Now, if we wanted to, instead, define getters and setters within the context of our object prototype (and where having private data is less of a concern) we can then use an alternative object syntax for that.
1 . 2 . 3 . 4 . 5 . 6 . 7 . 8 . 9 . 1 0 . 1 1 . 1 2 . f u n c t i o nF i e l d ( v a l ) { t h i s . v a l u e=v a l ; } F i e l d . p r o t o t y p e={ g e tv a l u e ( ) { r e t u r nt h i s . _ v a l u e ; } , s e tv a l u e ( v a l ) { t h i s . _ v a l u e=v a l ; } } ;

The syntax for getters and setters is typically what scare people the most about the feature. But after a little bit of
ejohn.org/blog/javascript-getters-and-setters/ 2/5

10/1/13

John Resig - JavaScript Getters and Setters

use, its easy to get over. Heres another example, allowing a user to access an array of usernames (but denying them access to the original, underlying user objects.
u n c t i o nS i t e ( u s e r s ) { 1 . f t h i s . _ _ d e f i n e G e t t e r _ _ ( " u s e r s " ,f u n c t i o n ( ) { 2 . / /J S1 . 6A r r a ym a p ( ) 3 . r e t u r nu s e r s . m a p ( f u n c t i o n ( u s e r ) { 4 . r e t u r nu s e r . n a m e ; 5 . } ) ; 6 . } ) ; 7 . 8 . }

As a bonus, heres a method that Ive written that can help you to extend one object with another (a common JavaScript operation) while still taking into account getters and setters:
/H e l p e rm e t h o df o re x t e n d i n go n eo b j e c tw i t ha n o t h e r 1 . / u n c t i o ne x t e n d ( a , b ){ 2 . f f o r(v a rii nb){ 3 . v a rg=b . _ _ l o o k u p G e t t e r _ _ ( i ) ,s=b . _ _ l o o k u p S e t t e r _ _ ( i ) ; 4 . 5 . i f(g| |s){ 6 . i f(g) 7 . a . _ _ d e f i n e G e t t e r _ _ ( i ,g ) ; 8 . i f(s) 9 . a . _ _ d e f i n e S e t t e r _ _ ( i ,s ) ; 1 0 . } e l s e 1 1 . a [ i ]=b [ i ] ; 1 2 . } 1 3 . r e t u r na ; 1 4 . 1 5 . }

This code is from the Server-Side Browser Environment that I wrote about a week ago. Youll notice that, when looking through the code that I make liberal use of getters and setters to create this mock environment. Additionally, in my custom extend() method youll notice two new methods: __lookupGetter__ and __lookupSetter__. These are immensely useful, once you start dealing with getters and setters. For example, when I did my first pass at writing an extend() method, I started getting all sorts of errors I was thoroughly confused. Thats when I realized that two things were happening with the simple statement: a [ i ]=
b [ i ] ;

If a setter existed in object a, named i, and a getter existed in object b, named i, a[i]s value was being set not to the other setter function, but to the computed value from bs getter function. The two __lookup*__ methods allow you to access the original functions used for the methods (thus allowing you to write an effective extend method, for example). A couple things to remember: You can only have one getter or setter per name, on an object. (So you can have both one value getter and one value setter, but not two value getters.)
ejohn.org/blog/javascript-getters-and-setters/ 3/5

10/1/13

John Resig - JavaScript Getters and Setters

The only way to delete a getter or setter is to do: delete object[name]; Be aware, that this command is capable of deleting normal properties, getters and setters. (So if all you want to do is remove a setter you need to backup the getter and restore it afterwards.) If you use __defineGetter__ or __defineSetter__ it will silently overwrite any previous named getter or setter or even property of the same name.

Platforms
Now, here is where things get really interesting. Up until just recently, talking about actually using getters and setters (outside of the context of Firefox/Gecko) was pretty much not happening. However, look at this line up: Browsers Firefox Safari 3+ (Brand New) Opera 9.5 (Coming Soon) I used the following snippet to test browsers:
a v a s c r i p t : f o o = { g e tt e s t ( ) {r e t u r n" f o o " ;} } ; a l e r t ( f o o . t e s t ) ; 1 . j

Additionally, the following JavaScript environments support Getters and Setters SpiderMonkey Rhino 1.6R6 (New) And as do the following ECMAScript implementations ActionScript JScript.NET 8.0
Posted: July 18th, 2007

Subscribe for email updates: email address

Subscribe

If you particularly enjoy my work, I appreciate donations given with Gittip.

7 Comments (Show Comments)

Comments are closed. Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.
ejohn.org/blog/javascript-getters-and-setters/ 4/5

10/1/13

John Resig - JavaScript Getters and Setters

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

Ukiyo-e.org
Japanese woodblock print database and search engine.

Subscribe for email updates: email address

Subscribe

@jeresig
Infrequent, short, updates and links.

JavaScript Jobs
Campaign Monitor Send something beautiful

ads by BSA

via Ad Packs VPS Hosting Provided by Media Temple

ejohn.org/blog/javascript-getters-and-setters/

5/5