<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xml:base="https://web-engineering.info"  xmlns:dc="http://purl.org/dc/elements/1.1/">
<channel>
 <title>web-engineering.info - ES6</title>
 <link>https://web-engineering.info/taxonomy/term/53</link>
 <description></description>
 <language>en</language>
<item>
 <title>Using JavaScript&#039;s Implicit Setters and Getters</title>
 <link>https://web-engineering.info/node/70</link>
 <description>&lt;div class=&quot;field field-name-body field-type-text-with-summary field-label-hidden view-mode-rss&quot;&gt;&lt;div class=&quot;field-items&quot;&gt;&lt;div class=&quot;field-item even&quot; property=&quot;content:encoded&quot;&gt;&lt;p&gt;The following example discussion is from the online book&amp;nbsp;&lt;a href=&quot;http://web-engineering.info/WebAppBook&quot;&gt;Web Applications with JavaScript or Java&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Already available from ES5.1 (and even supported by IE 9), JavaScript&#039;s &lt;code&gt;set&lt;/code&gt; and &lt;code&gt;get&lt;/code&gt; methods have not been used very widely. Their main use case is the implementation of a best practice in Object-Oriented Programming, which recommends not to allow direct value assignments to properties, but rather to control all value assignments in a&amp;nbsp;setter method (for instance, for validating the value or for logging the change event). But only with the new ES6 language element &lt;code&gt;class&lt;/code&gt; it becomes convenient defining setters (and getters) in a JavaScript class.&lt;/p&gt;

&lt;p&gt;Let&#039;s look at a simple example: defining a getter for the ISBN property of a Book class:&lt;/p&gt;

&lt;pre&gt;
class &lt;strong&gt;Book&lt;/strong&gt; {
  ...
  &lt;strong&gt;get&lt;/strong&gt; isbn () {
    return this._isbn;
  }
  ...
}&lt;/pre&gt;

&lt;p&gt;Notice that we use a property name like &quot;isbn&quot; for the name of such a getter method and we prefix it with the keyword &lt;code&gt;get&lt;/code&gt;, but this name only appears to be a property name. It can, however, not be used for storing a value. Rather, we need to complement it with an ordinary property (here we have chosen the name &lt;code&gt;_isbn&lt;/code&gt;) for storing a value.&lt;/p&gt;

&lt;p&gt;A JS getter method is implicitly invoked by a JS engine when there is a read access for the corresponding property, like through the expression &lt;code&gt;book.isbn&lt;/code&gt; in the following code:&lt;/p&gt;

&lt;pre&gt;
book = new Book(&quot;006251587X&quot;);
console.log(&quot;The ISBN is: &quot;+ book.isbn);&lt;/pre&gt;

&lt;p&gt;JavaScript&#039;s&amp;nbsp;setters and getters are implicit (you don&#039;t see them). They allow having the same semantics as explicit setter methods, but with the simple syntax of direct access. In addition to having the advantage of a simpler syntax, using implicit setters in JavaScript is also safer than using explicit setters because they decrease the likelihood of a JavaScript programmer circumventing a setter by using a direct property assignment when instead a setter should be used. In other OOP languages, like Java, this is prevented by declaring properties to be &#039;private&#039;. But JavaScript does not have this option.&lt;/p&gt;

&lt;p&gt;Let&#039;s build a more complete example: defining a class for &lt;em&gt;book&lt;/em&gt; objects having three properties (ISBN, title and year). We first define the constructor of the class like so:&lt;/p&gt;

&lt;pre&gt;
class &lt;strong&gt;Book&lt;/strong&gt; {
  constructor (i,t,y) {
    // assign default values to mandatory properties
    this._isbn = &quot;&quot;;
    this._title = &quot;&quot;;
    this._year = 0;
    // is constructor invoked with arguments?
    if (arguments.length &amp;gt; 0) {
      // assign properties by invoking implicit setters
      this.isbn = i;
      this.title = t;
      this.year = y;
    }
  }
  ...
  &lt;strong&gt;get&lt;/strong&gt; isbn () {
    return this._isbn;
  }
  &lt;strong&gt;set&lt;/strong&gt; isbn (i) {
    var validationResult = Book.checkIsbn( i);
    if (validationResult instanceof NoConstraintViolation) {
      this._isbn = isbn;
    } else {
      throw validationResult;
    }
  }
  ...
}&lt;/pre&gt;

&lt;p&gt;Notice that the implicit getters and setters normally access a corresponding internal property, like &lt;code&gt;_isbn&lt;/code&gt;. This approach is based on the assumption that this internal property is normally not accessed directly, but only via its getter or setter. Since we can normally assume that developers comply with such a rule (and that there is no malicious developer in the team), this approach is normally safe enough. However, it is also possible to increase the safety by generating random names for the internal properties with the help of ES6 symbols.&lt;/p&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;section class=&quot;field field-name-field-category field-type-taxonomy-term-reference field-label-above view-mode-rss&quot;&gt;&lt;h2 class=&quot;field-label&quot;&gt;Category:&amp;nbsp;&lt;/h2&gt;&lt;ul class=&quot;field-items&quot;&gt;&lt;li class=&quot;field-item even&quot;&gt;&lt;a href=&quot;/taxonomy/term/53&quot; typeof=&quot;skos:Concept&quot; property=&quot;rdfs:label skos:prefLabel&quot; datatype=&quot;&quot;&gt;ES6&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/section&gt;&lt;div class=&quot;easy_social_box clearfix horizontal easy_social_lang_und&quot;&gt;
            &lt;div class=&quot;easy_social-widget easy_social-widget-twitter first&quot;&gt;&lt;a href=&quot;http://twitter.com/share&quot; class=&quot;twitter-share-button&quot;
data-url=&quot;https://web-engineering.info/node/70&quot;
data-count=&quot;horizontal&quot;
data-lang = &quot;en&quot;
data-via=&quot;&quot;
data-related=&quot;:Check it out!&quot;
data-text=&quot;Using JavaScript&#039;s Implicit Setters and Getters&quot;&gt;Tweet&lt;/a&gt;&lt;/div&gt;
          &lt;div class=&quot;easy_social-widget easy_social-widget-facebook&quot;&gt;&lt;fb:like href=&quot;https://web-engineering.info/node/70&quot; send=&quot;true&quot; layout=&quot;button_count&quot; width=&quot;88&quot; show_faces=&quot;true&quot; action=&quot;like&quot; colorscheme=&quot;light&quot; font=&quot;&quot;&gt;&lt;/fb:like&gt;&lt;/div&gt;
          &lt;div class=&quot;easy_social-widget easy_social-widget-googleplus&quot;&gt;&lt;div class=&quot;g-plusone&quot; data-size=&quot;medium&quot; data-annotation=&quot;bubble&quot; data-href=&quot;https://web-engineering.info/node/70&quot;&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;div class=&quot;easy_social-widget easy_social-widget-linkedin last&quot;&gt;&lt;script type=&quot;in/share&quot; data-url=&quot;https://web-engineering.info/node/70&quot; data-counter=&quot;right&quot;&gt;&lt;/script&gt;&lt;/div&gt;
  &lt;/div&gt; &lt;!-- /.easy_social_box --&gt;</description>
 <pubDate>Wed, 24 May 2017 13:20:33 +0000</pubDate>
 <dc:creator>gwagner</dc:creator>
 <guid isPermaLink="false">70 at https://web-engineering.info</guid>
 <comments>https://web-engineering.info/node/70#comments</comments>
</item>
</channel>
</rss>
