<center>![Objects in JavaScript](https://files.peakd.com/file/peakd-hive/albro/23w3CYwmfdeC78acXx68KvPfSyzRBFzYam8wEtcb4vjW8CAAwTsrXUcXCLMtY5T7FoaUf.jpg)</center>

<p>Let's take a new look at JavaScript; It's use! In other words, in a series of posts, after explaining some prerequisites, such as the types of functions and their calls, and the types of objects, I want to access the DOM. That's where the power of JavaScript is shown in practice and I can use the DOM to change the content of a page and its behavior.</p>
<h3>Defining objects in JavaScript</h3>
<p>It can be said that objects in JavaScript are everything in JavaScript! If you understand things, many issues will become easy for you and you will gain a lot of maneuvering power.
</p>
<p>Almost everything in JavaScript is an object:
</p>
<ul>
    <li><code>Boolean</code>s can be objects (using <code>new</code> ).</li>
    <li><code>Number</code>s can be objects (using <code>new</code>).</li>
    <li><code>String</code>s can be objects (using <code>new</code> ).</li>
    <li>
        <code>Date</code> is always an object.
    </li>
    <li>
        <code>Math</code> is always the object.
    </li>
    <li>
        Regular expressions are always objects.
    </li>
    <li>
        <code>Array</code>s are always objects.
    </li>
    <li>
        <code>Function</code>s are always objects.
    </li>
    <li>
        And finally, <code>object</code>s are also of object type.
    </li>
</ul>
<p>In other words, all JavaScript values (except primitive values) are objects.
</p>
<h3>primitive values
</h3>
<p>Primitive values are values that don't have any properties or methods:
</p>
<ul>
    <li>
        <code>string</code>
    </li>
    <li>
        <code>number</code>
    </li>
    <li>
        <code>boolean</code>
    </li>
    <li>
        <code>null</code>
    </li>
    <li>
        <code>undefined</code>
    </li>
</ul>
<p>Primitive values are immutable in JavaScript. You must be saying that we can easily change the numbers, so how are they immutable?
</p>
<p>Let me give you an example; You can change <code>x = 3.14</code> to <code>x = 2</code>. In this case, you have changed the <strong>variable</strong> (<code>x</code>) and not <code>3.14</code>. Another example is that the string <code>"Hello"</code> always remains the same as <code>"Hello"</code> and does not change, but you can give it to a variable or take it from a variable. You cannot change the string itself. JavaScript logic is like this.
</p>
<p><strong>Objects are also a variable type, but the difference is that variables can only hold one value, such as </strong><code>var person = "Hive Blockchain"</code><strong>, but objects can hold many values.</strong>
</p>
<p>These values are stored in the form of <code>name: value</code>:
</p>
<pre><code class="language-javascript">var person = {firstName:"Hive", lastName:"Blockchain", age:3, eyeColor:"red"};</code></pre>
<p>This object can also be written as follows:
</p>
<pre><code class="language-javascript">var person = {
  firstName : "Hive",
  lastName  : "Blockchain",
  age     : 3,
  eyeColor  : "red"
};</code></pre>
<p>We say that JavaScript objects are a collection of named values.
</p>
<h3>properties
</h3>
<p>I said above that values are stored in objects as <code>name: value</code>. We call these names <strong>property</strong>. Therefore, it can be said for the above object:
</p>
<center>
    <table>
        <tbody>
            <tr>
                <td>
                    <center>
                        <strong>Property</strong>
                    </center>
                </td>
                <td>
                    <center>
                        <strong>Value</strong>
                    </center>
                </td>
            </tr>
            <tr>
                <td>
                    <center>
                        firstName
                    </center>
                </td>
                <td>
                    <center>
                        Hive
                    </center>
                </td>
            </tr>
            <tr>
                <td>
                    <center>
                        lastName
                    </center>
                </td>
                <td>
                    <center>
                        Blockchain
                    </center>
                </td>
            </tr>
            <tr>
                <td>
                    <center>
                        age
                    </center>
                </td>
                <td>
                    <center>
                        3
                    </center>
                </td>
            </tr>
            <tr>
                <td>
                    <center>
                        eyeColor
                    </center>
                </td>
                <td>
                    <center>
                        red
                    </center>
                </td>
            </tr>
        </tbody>
    </table>
</center>

<p><strong>Note</strong>: The properties of an object can be primitive values, functions or other objects.
</p>
<h3>methods
</h3>
<p>Methods in JavaScript are actions performed on an object, but the object method is one of the object's properties that has the definition of a function. Pay attention to the following example:
</p>
<center>
    <table>
        <tbody>
            <tr>
                <td>
                    <center>
                        <strong>Property</strong>
                    </center>
                </td>
                <td>
                    <center>
                        <strong>Value</strong>
                    </center>
                </td>
            </tr>
            <tr>
                <td>
                    <center>
                        firstName
                    </center>
                </td>
                <td>
                    <center>
                        Hive
                    </center>
                </td>
            </tr>
            <tr>
                <td>
                    <center>
                        lastName
                    </center>
                </td>
                <td>
                    <center>
                        Blockchain
                    </center>
                </td>
            </tr>
            <tr>
                <td>
                    <center>
                        age
                    </center>
                </td>
                <td>
                    <center>
                        3
                    </center>
                </td>
            </tr>
            <tr>
                <td>
                    <center>
                        eyeColor
                    </center>
                </td>
                <td>
                    <center>
                        red
                    </center>
                </td>
            </tr>
            <tr>
                <td>
                    <center>
                        fullName
                    </center>
                </td>
                <td>
                    <center>
                        function() {return this.firstName + " " + this.lastName;}
                    </center>
                </td>
            </tr>
        </tbody>
    </table>
</center>

<p>So <code>fullName</code> is a method.
</p>
<h3>Create an object
</h3>
<p>There are several ways to create an object in JavaScript:
</p>
<ul>
    <li>Defining an object number manually (object literal)
    </li>
    <li>Define an object number using the <code>new </code>keyword
    </li>
    <li>Defining an object <code>constructor</code> (meaning "object builder" or "object maker") and then building different objects based on that constructor.
    </li>
</ul>
<h3>The first method (object literal)
</h3>
<p>This is the easiest way to create an object. In this method, you put a list of <code>name: values</code> (such as <code>age: 3</code>) inside <code>{}</code> signs. Example:
</p>
<pre><code class="language-javascript"> var person = {firstName:"Hive", lastName:"Blockchain", age:3, eyeColor:"red"};</code></pre>
<p>As I said, white space does not affect the execution, so you can write this object as follows:
</p>
<pre><code class="language-javascript">var person = {
  firstName: "Hive",
  lastName: "Blockchain",
  age: 3,
  eyeColor: "red"
};</code></pre>
<h3>The second method: using <code>new</code>
</h3>
<p>An object is defined simply as follows:
</p>
<pre><code class="language-javascript">var person = new Object();
person.firstName = "Hive";
person.lastName = "Blockchain";
person.age = 3;
person.eyeColor = "red";</code></pre>
<p>This method is the same as the first method. Due to the readability of the code and its faster execution, I suggest you never use this method and choose the first method instead.
</p>
<h3>A common mistake about objects
</h3>
<p>If we have an object called <code>person</code>, the following code cannot copy it:
</p>
<pre><code class="language-javascript">var x = person;</code></pre>
<p>In fact, variable <code>x</code> is not a copy of <code>person</code>, but it is itself, and both are the same. Any changes you make in <code>x</code> will also be made in <code>person</code>. So:
</p>
<pre><code class="language-javascript">var person = {firstName:"Hive", lastName:"Blockchain", age:3, eyeColor:"red"}
var x = person;
x.age = 4;</code></pre>
<p>This code (i.e. <code>x.age = 10</code>) changes both <code>x</code> and <code>person</code> because both are the same object.
</p>