The Quite Nice and Fairly Accurate Intro to JavaScript Objects (pt. 2)
Tags: javascript, beginners, webdev
Published: 2019-06-16 15:29:22


JavaScript has two data types: Primitives, and objects. I made an article with an introduction in JavaScript Primitives in [The Quite Nice and Fairly Accurate Introduction to JavaScript Primitive Data Types](https://dev.to/ale3oula/the-quite-nice-and-fairly-accurate-introduction-to-javascript-primitive-data-types-e99). 

So, let's now see the Objects basics. :sunglasses:

**The objects**

In JavaScript or general in programming, objects can model real-world things, e.g. an animal, a car or a human. Objects are used to store key-value collections and represent more complex entities.

We can define (and create) a JavaScript object with an *object literal* by using curly braces, {}:

<img src="https://i.ibb.co/C10SLmy/carbon-1.png" alt="Empty Object" border="0">

**Key: value**

We can fill an object with *unordered* data, called **properties**. A *property* is a **key: value** pair, where a key is a string (also *property name*), and value can be of any data type. A key is similar to a variable name that points to a location in memory that holds a value. The value can be any data type (including functions or other objects).

<img src="https://i.ibb.co/McRw4rj/Group-1.png" alt="Object with properties" border="0">

**Accessing the Properties**

There are two ways to access the object properties: **Dot notation** and **Bracket Notation**.

With the *dot notation*, we write the object’s name, the dot operator and then the property name:

<img src="https://i.ibb.co/WnLJNhL/Group-5.png" alt="Dot notation" border="0">

With the *bracket notation*, we pass in the property name (key) as a string:

<img src="https://i.ibb.co/rKhtm07/Group-6.png" alt="Bracket notation" border="0">

**Assign to a property**

Objects are **mutable**, which means that we can *update* them. We can use *dot or bracket notation* to select the property and with the help of the assignment operator, we can add new key-value pairs (if there was no property with that name) or change an existing property (if the property already exists). We can also delete a property from the object with the delete operator.

<img src="https://i.ibb.co/rxpsN05/carbon-3.png" alt="carbon-3" border="0">

**Methods as Properties**

We can also include *methods* in our object literals; With the ES6 syntax we can include them in the object as: 

<img src="https://i.ibb.co/WBBJLJN/carbon-4.png" alt="carbon-4" border="0">

**Pass by what? **

In JS when a function is called, it directly passing the value of the variable as the argument. Changing the variable inside the function doesn’t affect the variable passed. However, objects are **passed by reference**. When we pass a variable assigned to an object into a function, this is interpreted as pointing to the space in memory holding that object. As a result, functions can change this object permanently.

<img src="https://i.ibb.co/ZLX6Jx6/carbon-5.png" alt="carbon-5" border="0">

**Iterating through Objects**

JavaScript provides us with the for...in statement to iterate through the properties of an object. 

<img src="https://i.ibb.co/DQv9pRz/carbon-6.png" alt="carbon-6" border="0">

References: 

[Objects](https://javascript.info/object)
[JavaScript Objects](https://www.w3schools.com/js/js_objects.asp)
[Working with Objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)
[4 ways to create an Object in JS (with examples)](https://www.developerdrive.com/2018/11/4-ways-to-create-an-object-in-javascript-with-examples/)