Getters setters for dummies

Question

I ve been trying to get my head around getters and setters and its not sinking in  I ve read JavaScript Getters and Setters and Defining Getters and Setters and just not getting it   Can someone clearly state    What a getter and setter are meant to do  and  Give some VERY simple examples

User · Answer

I think the first article you link to states it pretty clearly:

The obvious advantage to writing JavaScript in this manner is that you can use it obscure values that you don't want the user to directly access.

The goal here is to encapsulate and abstract away the fields by only allowing access to them thru a get() or set() method. This way, you can store the field/data internally in whichever way you want, but outside components are only away of your published interface. This allows you to make internal changes without changing external interfaces, to do some validation or error-checking within the set() method, etc.

User · Answer

Getters and setters really only make sense when you have private properties of classes   Since Javascript doesn t really have private class properties as you would normally think of from Object Oriented Languages  it can be hard to understand   Here is one example of a private counter object    The nice thing about this object is that the internal variable  count  cannot be accessed from outside the object   var counter   function         var count   0       this inc   function             count                this getCount   function             return count             var i   new Counter    i inc    i inc       writes  2  to the document document write  i getCount       If you are still confused  take a look at Crockford s article on Private Members in Javascript

User · Answer

I was also somewhat confused by the explanation I read  because I was trying to add a property to an existing prototype that I did not write  so replacing the prototype seemed like the wrong approach  So  for posterity  here s how I added a last property to Array   Object defineProperty Array prototype   last         get  function     return this this length - 1          Ever so slightly nicer than adding a function IMHO

User · Answer

Although often we are used to seeing objects with public properties without any access control  JavaScript allows us to accurately describe properties  In fact  we can use descriptors in order to control how a property can be accessed and which logic we can apply to it  Consider the following example   var employee         first   Boris       last   Sergeev       get fullName             return this first         this last             set fullName value            var parts   value toString   split               this first   parts 0                 this last   parts 1                    email   boris sergeev example com       The final result    console log employee fullName     Boris Sergeev employee fullName    Alex Makarenko    console log employee first    Alex console log employee last    Makarenko console log employee fullName    Alex Makarenko

User · Answer

You d use them for instance to implement computed properties   For example   function Circle radius        this radius   radius     Object defineProperty Circle prototype   circumference         get  function     return 2 Math PI this radius         Object defineProperty Circle prototype   area         get  function     return Math PI this radius this radius         c   new Circle 10   console log c area      Should output 314 159 console log c circumference      Should output 62 832    CodePen

User · Answer

Getters and Setters in JavaScript  Overview  Getters and setters in JavaScript are used for defining computed properties  or accessors  A computed property is one that uses a function to get or set an object value  The basic theory is doing something like this   var user            object with getters and setters           user phone     1  123  456-7890      updates a database console log  user areaCode       displays  123  console log  user area       displays  Anytown  USA    This is useful for automatically doing things behind-the-scenes when a property is accessed  like keeping numbers in range  reformatting strings  triggering value-has-changed events  updating relational data  providing access to private properties  and more   The examples below show the basic syntax  though they simply get and set the internal object value without doing anything special  In real-world cases you would modify the input and or output value to suit your needs  as noted above   get set Keywords  ECMAScript 5 supports get and set keywords for defining computed properties  They work with all modern browsers except IE 8 and below   var foo         bar   123      get bar    return bar         set bar  value    this bar   value       foo bar   456  var gaz   foo bar    Custom Getters and Setters  get and set aren t reserved words  so they can be overloaded to create your own custom  cross-browser computed property functions  This will work in any browser   var foo          bar   123      get   function  name    return this        name           set   function  name  value    this        name     value       foo set   bar   456    var gaz   foo get   bar       Or for a more compact approach  a single function may be used   var foo          bar   123      value   function  name     value               if  arguments length  lt  2    return this        name              this        name     value           foo value   bar   456    var gaz   foo value   bar       Avoid doing something like this  which can lead to code bloat   var foo          a   123   b   456   c   789      getA   function    return this  a         getB        getC        setA        setB        setC            For the above examples  the internal property names are abstracted with an underscore in order to discourage users from simply doing foo bar vs  foo get   bar    and getting an  uncooked  value  You can use conditional code to do different things depending on the name of the property being accessed  via the name parameter    Object defineProperty    Using Object defineProperty   is another way to add getters and setters  and can be used on objects after they re defined  It can also be used to set configurable and enumerable behaviors  This syntax also works with IE 8  but unfortunately only on DOM objects   var foo      bar   123    Object defineProperty  foo   bar         get   function    return this  bar         set   function  value    this  bar   value         foo bar   456  var gaz   foo bar      defineGetter      Finally    defineGetter     is another option  It s deprecated  but still widely used around the web and thus unlikely to disappear anytime soon  It works on all browsers except IE 10 and below  Though the other options also work well on non-IE  so this one isn t that useful   var foo      bar   123    foo   defineGetter     bar   function    return this  bar       foo   defineSetter     bar   function  value    this  bar   value         Also worth noting is that in the latter examples  the internal names must be different than the accessor names to avoid recursion  ie  foo bar calling foo get bar  calling foo bar calling foo get bar        See Also  MDN get  set   Object defineProperty      defineGetter        defineSetter     MSDN IE8 Getter Support

User · Answer

If you re referring to the concept of accessors  then the simple goal is to hide the underlying storage from arbitrary manipulation   The most extreme mechanism for this is  function Foo someValue        this getValue   function     return someValue        return this     var myFoo   new Foo 5      We can read someValue through getValue    but there is no mechanism    to modify it -- hurrah  we have achieved encapsulation      myFoo getValue      If you re referring to the actual JS getter setter feature  eg  defineGetter defineSetter  or   get Foo        code         then it s worth noting that in most modern engines subsequent usage of those properties will be much much slower than it would otherwise be   eg  compare performance of  var a     getValue  function    return 5       for  var i   0  i  lt  100000  i        a getValue      vs   var a     get value    return 5       for  var i   0  i  lt  100000  i        a value

User · Answer

In addition to  millimoose s answer  setters can also be used to update other values   function Name first  last        this first   first      this last   last     Name prototype         get fullName             return this first         this last              set fullName name            var names   name split               this first   names 0           this last   names 1              Now  you can set fullName  and first and last will be updated and vice versa   n   new Name  Claude    Monet   n first    Claude  n last    Monet  n fullName    Claude Monet  n fullName    Gustav Klimt  n first    Gustav  n last    Klimt

User · Answer

You can define instance method for js class  via prototype of the constructor   Following is the sample code      BaseClass  var BaseClass   function name           instance property     this name   name         instance method BaseClass prototype getName   function         return this name     BaseClass prototype setName   function name        return this name   name          test - start function test         var b1   new BaseClass  b1        var b2   new BaseClass  b2        console log b1 getName         console log b2 getName          b1 setName  b1 new        console log b1 getName         console log b2 getName        test       test - end   And  this should work for any browser  you can also simply use nodejs to run this code

User · Answer

Sorry to resurrect an old question  but I thought I might contribute a couple of very basic examples and for-dummies explanations   None of the other answers posted thusfar illustrate syntax like the MDN guide s first example  which is about as basic as one can get   Getter   var settings         firstname   John       lastname   Smith       get fullname     return this firstname         this lastname        console log settings fullname         will log John Smith  of course   A getter behaves like a variable object property  but offers the flexibility of a function to calculate its returned value on the fly   It s basically a fancy way to create a function that doesn t require    when calling   Setter   var address         set raw what            var loc   what split   s   s             area   loc 1  split     s   w 2   s     d 5               this street   loc 0           this city   area 0           this state   area 1           this zip   area 2             address raw    123 Lexington Ave  New York NY  10001   console log address city         will log New York to the console   Like getters  setters are called with the same syntax as setting an object property s value  but are yet another fancy way to call a function without      See this jsfiddle for a more thorough  perhaps more practical example   Passing values into the object s setter triggers the creation or population of other object items   Specifically  in the jsfiddle example  passing an array of numbers prompts the setter to calculate mean  median  mode  and range  then sets object properties for each result

User · Answer

What s so confusing about it    getters are functions that are called when you get a property  setters  when you set it  example  if you do  obj prop    abc     You re setting the property prop  if you re using getters setters  then the setter function will be called  with  abc  as an argument   The setter function definition inside the object would ideally look something like this   set prop var          do stuff with var        I m not sure how well that is implemented across browsers  It seems Firefox also has an alternative syntax  with double-underscored special   magic   methods  As usual Internet Explorer does not support any of this

User · Answer

I ve got one for you guys that might be a little ugly  but it does get er done across platforms  function myFunc       var  myAttribute    default    this myAttribute   function         if  arguments length  gt  0   myAttribute   arguments 0       return  myAttribute        this way  when you call  var test   new myFunc    test myAttribute      - gt   default  test myAttribute  ok      - gt   ok  test myAttribute      - gt   ok    If you really want to spice things up   you can insert a typeof check   if  arguments length  gt  0  amp  amp  typeof arguments 0      boolean    myAttribute   arguments 0   if  arguments length  gt  0  amp  amp  typeof arguments 0      number    myAttribute   arguments 0   if  arguments length  gt  0  amp  amp  typeof arguments 0      string    myAttribute   arguments 0     or go even crazier with the advanced typeof check  type of   code at codingforums com

[javascript] Getters \ setters for dummies

Examples related to javascript

Examples related to setter

Examples related to getter