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

<p>In this post, I want to talk about properties in JavaScript objects. In many ways, it can be said that properties are the most important part of an object, so I will start with them.</p>
<h3>Properties in JavaScript objects</h3>
<p>Properties are values given to an object, and an object can be said to be an unordered set of properties. You must know that we can remove or add or change properties, but some of them are unchangeable. Let's take a look at these.</p>
<h3>Access properties</h3>
<p>How to access the properties of an object in JavaScript is as follows:</p>
<pre><code class="language-javascript">objectName.property         // hive.age</code></pre>
<p>Or</p>
<pre><code class="language-javascript">objectName["property"]      // hive["age"]</code></pre>
<p>Or</p>
<pre><code class="language-javascript">objectName[expression]      // x = "age"; hive[x]</code></pre>
<p>Consider the following two examples.</p>
<p>First example:</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;h2&gt;JavaScript Object Properties&lt;/h2&gt;
&lt;p&gt;There are two different ways to access an object property:&lt;/p&gt;
&lt;p&gt;You can use .property or ["property"].&lt;/p&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
var hive = {
  firstname:"Hive",
  lastname:"Blockchain",
  age:3,
  eyecolor:"red"
};
document.getElementById("demo").innerHTML = hive.firstname + " is " + hive.age + " years old.";
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<center>![Access properties](https://files.peakd.com/file/peakd-hive/albro/23u6YmoQbBzwUH7qXs2aa15foxoTTzKZ26JynPM89TdF3g9mHqTq96TG1dSWNG8dYqv8i.png)</center>

<p>Second example:</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;h2&gt;JavaScript Object Properties&lt;/h2&gt;
&lt;p&gt;You can use .property or ["property"].&lt;/p&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
var hive = {
  firstname:"Hive",
  lastname:"Blockchain",
  age:3,
  eyecolor:"red"
};
document.getElementById("demo").innerHTML = hive["firstname"] + " is " + hive["age"] + " years old.";
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<center>![Access properties](https://files.peakd.com/file/peakd-hive/albro/23u6YmnM2guXFFQDe5cu44A1kX2wtu3hQqRbMSXdrhFYp6bKsU22f6fFB3mbBx8bJRS7s.png)</center>

<p>As you can see, both methods return the same result and the choice is yours which method to use.</p>
<h3>Using the <code>for...in</code> loop</h3>
<p>The <code>for...in</code> loop in JavaScript cycles through all the properties of an object and performs a specific action based on the code you wrote for it.</p>
<pre><code class="language-javascript">for (variable in object) {
  // code to be executed
}</code></pre>
<p>The code block placed inside the <code>for...in</code> loop is executed on each object's properties. Consider the following example:</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;h2&gt;JavaScript Object Properties&lt;/h2&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
var txt = "";
var platform = {fname:"Hive", lname:"Blockchain", age:3}; 
var x;
for (x in platform) {
  txt += platform[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<Center>![Access properties](https://files.peakd.com/file/peakd-hive/albro/23uFwMHi4mrFM2WzpnvwSHiQGcjopdqwgUEJhQobZtYmGgaAR4jLKq6wKCNoq5SA3cKYk.png)</center>

<h3>Add new properties</h3>
<p>To add new properties, just use the same property access rule. Example:</p>
<pre><code class="language-javascript">var platform = {
  firstname:"Hive",
  lastname:"Blockchain",
  age:3,
  eyecolor:"red"
};
platform.nationality = "English";
document.getElementById("demo").innerHTML =
platform.firstname + " is " + platform.nationality + ".";
&lt;/script&gt;</code></pre>
<p>The output of this code will be "Hive is English.".</p>
<p><strong>Note:</strong> You are not allowed to use reserved words to name properties of objects. The rules for naming variables are also true in the field of object properties. Reserved words in programming languages are special words that have been reserved by their developers for special purposes. For example, the word <code>function</code> is a reserved word that is used to define functions. You cannot name your variables <code>function</code>. Of course, you can add something to it; For example, <code>myFucntion</code> is fully accepted.</p>
<h3>Remove properties</h3>
<p>The <code>delete</code> keyword can remove a specific attribute from an object. Consider the following example:</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;h2&gt;JavaScript Object Properties&lt;/h2&gt;
&lt;p&gt;You can delete object properties.&lt;/p&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
var platform = {
  firstname:"Hive",
  lastname:"Blockchain",
  age:3,
  eyecolor:"red"
};
delete platform.age;
document.getElementById("demo").innerHTML =
platform.firstname + " is " + platform.age + " years old.";
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<center>![Remove properties](https://files.peakd.com/file/peakd-hive/albro/23uRL6XW4GFKtueJWfDzkW6ynEU5CwL8eks1JmLNdUTeoqyU5BqszGciYj2FmT3K5shc9.png)</center>

<p>As you can see, the output of this code is "<code>Hive is undefined years old.</code>", which means that Hive's <code>age</code> has been removed from the object and now the value of <code>undefined</code> has been returned to us.</p>
<p>A few tips about the <code>delete</code> keyword:</p>
<ul>
    <li>
        This keyword removes both the attribute and the value of that attribute.
    </li>
    <li>
        After using <code>delete</code>, you can no longer access that feature unless you create it again.
    </li>
    <li>
        This keyword is made to use properties of objects and has no effect on functions or variables.
    </li>
    <li>
        You should not use this keyword on default properties defined by JavaScript itself. If you do so, your program may stop altogether.
    </li>
</ul>
<h3>What is Attribute?</h3>
<p>All properties have a name and a value. Now this name is considered an attribute for that property. Other attributes include <code>enumerable</code>, <code>configurable</code>, and <code>writable</code>. In fact, the job of these attributes is to determine how a feature can be accessed. For example, is it readable? Is it also writable?</p>