<center>![Methods and Accessors in JavaScript objects](https://files.peakd.com/file/peakd-hive/albro/23uFuC1qr3VcvwWoCV1r6zXFxxG1D7YLRvwMoCfRtKr4ddjDSZAUJwvtJWE6UJ4rkL3LQ.png)</center>

<p>
    In this post, I'm going to talk about two different aspects of JavaScript objects: methods and accessors.
</p>
<h3>
    Object methods in JavaScript
</h3>
<p>
    Methods in JavaScript are actions that are performed on an object, but object method (that is, methods that belong to objects) is one of the properties of the object that has a function definition. To put it more simply, the methods of objects in JavaScript are the same functions that are placed inside objects to perform certain actions. See the following example:
</p>
<pre><code class="language-javascript">var platform = {
  firstName: "Hive",
  lastName : "Blockchain",
  id       : 2020,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};</code></pre>
<p>
    In the <code>fullName</code> attribute, we have the definition of a function. We call this function definition a method.
</p>
<h3>
    <code>this</code> keyword
</h3>
<p>
    In the definition of a function, the this keyword refers to the owner of that function, so in the example above, this refers to the <code>platform</code> object because the owner of the <code>fullName</code> attribute is naturally that function. So it can be said that <code>this.firstName</code> means the <code>firstName</code> property of this object.
</p>
<h3>
    Access to object methods
</h3>
<p>
    To access the methods of an object, we use the following structure:
</p>
<pre><code class="language-javascript">objectName.methodName()</code></pre>
<p>
    <strong>Note:</strong> According to the example above, we call <code>fullName()</code> a method and we call <code>fullName</code> a property! Therefore, we have a property called <code>fullName</code>, which is called by putting parentheses in front of it and executes the method inside it.
</p>
<p>
    Let's look at some examples:
</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;p&gt;Creating and using an object method.&lt;/p&gt;
&lt;p&gt;A method is actually a function definition stored as a property value.&lt;/p&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
var platform = {
  firstName: "Hive",
  lastName : "Blockchain",
  id     : 2020,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
document.getElementById("demo").innerHTML = platform.fullName();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p>
    In this case, our output will be the definition of the function (method) itself!
</p>

<center>![Access to object methods](https://files.peakd.com/file/peakd-hive/albro/23u6YmnM2jbqb6FkytGekTgMUFv7Ti1RWhavqW6D3zebVJknaX8Vt7B8GU7agPRYQ83Yq.png)
</center>
<pre><code class="language-javascript">function() { return this.firstName + " " + this.lastName; }</code></pre>
<p>
    <i><strong>Question:</strong></i> Can we add methods to an object?
</p>
<p>
    <i><strong>Answer:</strong></i> Yes! This work is not difficult at all and is like adding properties to the object. The only difference is that you give it a function definition instead of a given value. Consider the following example:
</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
var platform = {
  firstName: "Hive",
  lastName : "Blockchain",
  id     : 2020,
};
platform.name = function() {
  return this.firstName + " " + this.lastName;
};
document.getElementById("demo").innerHTML =
"My father is " + platform.name(); 
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<center>![add methods to an object](https://files.peakd.com/file/peakd-hive/albro/23uRLJbjeYmjC5AduNzSC7X6pgMjTDcRB6tntg55weY5jz7jEGFKGSurH3pvpNwRGrac8.png)</center>

<h3>
    Prebuilt methods
</h3>
<p>
    In JavaScript, we have methods that have already been created by the developers of this language. I have given you an example of it so you can see how it works:
</p>
<p>
    This example uses the <code>toUpperCase()</code> method to convert a text string to an uppercase string:
</p>
<pre><code class="language-javascript">var message = "Hello world!";
var x = message.toUpperCase();</code></pre>
<p>
    By executing this statement, our initial string which is "<code>Hello world!</code>" will become "<code>HELLO WORLD!</code>".
</p>
<h3>
    Accessors in JavaScript
</h3>
<p>
    You may say to yourself, I'm fluent in JavaScript, but I don't know anything called <strong>Accessor</strong>! The reason is that few people use the word Accessor because it is a general term. Actually, we call <strong>Setters</strong> and <strong>Getters</strong> together as Accessors.
</p>
<p>
    In fact, Accessors were introduced in 2009 with ECMAScript 5, and they allow you to access some properties of objects, and that's why they are called accessors (they give you access).
</p>
<p>
    <code><strong>Get</strong></code><strong> keyword</strong>
</p>
<p>
    To better understand this keyword, it is better to go directly to its examples.
</p>
<p>
    In the following example, I use a property called <code>lang</code> to <code>get</code> the value of the <code>language</code> property, that is, to receive:
</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;h2&gt;JavaScript Getters and Setters&lt;/h2&gt;
&lt;p&gt;This example uses a lang property to get the value of the language property.&lt;/p&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
// Create an object:
var platform = {
  firstName: "Hive",
  lastName : "Blockchain",
  language : "en",
  get lang() {
    return this.language;
  }
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = platform.lang;
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<center>![Getters and Setters](https://files.peakd.com/file/peakd-hive/albro/23u6Yr8WFDFLfFW1U2VSsRo2CANggsNqagmaiAHyYuaNST4SLg1iQG8MxTeNtt3YZXA4t.png)</center>

<p>
    The output of this code will be en, but how? Let me explain to you step by step:
</p>
<ul>
    <li>
        We have an object called <code>platform</code>.
    </li>
    <li>
        This object has properties (such as <code>firstName</code>, <code>lastName</code>, <code>language</code>, etc.).
    </li>
    <li>
        We create a property called <code>lang</code> (which is actually a function) using the <code>get</code> keyword.
    </li>
    <li>
        <code>lang</code> returns the value of the <code>language</code> attribute.
    </li>
    <li>
        Its output was <code>en</code> (short for English).
    </li>
</ul>
<p>
    If we want to use setters in this example, we say:
</p>
<pre><code class="language-javascript">var platform = {
  firstName: "Hive",
  lastName : "Blockchain",
  language : "",
  set lang(lang) {
    this.language = lang;
  }
};
// Specifies a property for the object
platform.lang = "en";
// Retrieves and displays data from the object
document.getElementById("demo").innerHTML = platform.language;</code></pre>
<p>
    Yes, you guessed it right, using the <code>lang</code> attribute, we have set the <code>language</code> value. In this case, the output will be <code>en</code>.
</p>
<h3>
    The difference between accessors and methods
</h3>
<p>
    What do you think is the difference between the two examples below?
</p>
<pre><code class="language-javascript">var platform = {
  firstName: "Hive",
  lastName : "Blockchain",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
document.getElementById("demo").innerHTML = platform.fullName();</code></pre>
<p>
    &nbsp;
</p>
<pre><code class="language-javascript">var platform = {
  firstName: "Hive",
  lastName : "Blockchain",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};
document.getElementById("demo").innerHTML = platform.fullName;</code></pre>
<p>
    We access the <code>fullName</code> property in both examples, but in the first example this is done through a function (<code>platform.fullName()</code>) and in the second example through a property (<code>platform.fullName</code>). There is no difference between these two methods, except that writing the codes in the second method is a little easier.
</p>
<p>
    <strong>Note:</strong> You can also use method chaining in these examples. Pay attention to the following example:
</p>
<pre><code class="language-javascript">var platform = {
  firstName: "Hive",
  lastName : "Blockchain",
  language : "en",
  get lang() {
    return this.language.toUpperCase();
  }
};
document.getElementById("demo").innerHTML = platform.lang;</code></pre>
<p>
    In this example, I have used the <code>toUpperCase</code> method when defining <code>lang</code>, so its output will always be in capital letters, and we don't need to apply this statement to the output every time.
</p>
<p>
    This is no different for setters:
</p>
<pre><code class="language-javascript">set lang(lang) {
    this.language = lang.toUpperCase();
  }</code></pre>
<p>
    <strong>Note:</strong> You may have heard of the <code>Object.defineProperty()</code> statement. This statement can create the setters or getters you want. Pay attention to the following example:
</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;h2&gt;JavaScript Getters and Setters&lt;/h2&gt;
&lt;p&gt;Perfect for creating counters:&lt;/p&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
// Define the initial object
var obj = {counter : 0};
// Define Setters and Getters 
Object.defineProperty(obj, "reset", {
  get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", {
  get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", {
  get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
  set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", {
  set : function (value) {this.counter -= value;}
});
// Testing codes
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
document.getElementById("demo").innerHTML = obj.counter;
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<center>![Getters and Setters](https://files.peakd.com/file/peakd-hive/albro/23uFwWW5kySbomqjjnK6hmLns5P4RR8sMgc5TXUwB8ieibuXNQguhU3uZtft7pcN8US4i.png)</center>

<p>
    In the example, it is clear that this statement does not do anything special, but is another way to define setters and getters.
</p>