JavaScript Objects
Tags: beginners, javascript
Published: 2019-12-26 14:36:54

---
title: JavaScript Objects
published: true
description: A beginners guide to JavaScript objects
tags: beginners, javascript
series: FrontEnd Development Zero to Hero 
---
Everything in JavaScript __excluding__  numbers, strings, booleans ( `true` and `false` ), `null` , and `undefined` are objects under the hood.

In JavaScript , arrays are objects, functions are objects, and, of course, objects are objects.

Technically speaking an __objects  in JavaScript are mutable keyed collections__.

The term _mutable_ from the last paragraph means __by default you can make changes to an objects by adding or removing an element__.

__Object contains properties where a property has a name and a value__. A property name can be any string, including the empty string (' '). A property value can be any JavaScript value except for `undefined`.

Objects are useful for collecting and organizing data. They can contain other objects.

_All screenshots are from <b>Firefox 71.0</b> and its Developer Tools. One particular feature in Firefox 71.0 that's worthy of mention is the <b>multi-line code editor</b> in the console._

<hr>

In JavaScript objects can be created using two syntax:

* Declarative
* Constructed

The literal syntax is defined as:

```javascript
var bioData = {
  key: value,
  // other properties and values
}
```

The constructed syntax is defined as:

```javascript
// create the object using the constructed
// syntax 
var bioData = new Object();

// add a property name and value
bioData.key = value;
```

__The literal syntax is the most common__ and easiest way of creating objects (explored later). __The constructed form on the other hand has one drawback &mdash; you will have to add object values one by one__.

Here are the things you should take note when creating objects:

* If the property name contains hyphens or spaces, wrap the name in quotes (" ")
* You separate each key value pair with commas ( , )
* If the property name or value is a reserved  word, wrap the name in quotes (" "). 

Time for some code. Switch over to your browser console and type the following code:

```javascript
/**
  * An object with three properties
  */
var bioData = {
  first_name: "Habdul",
  last_name: "Hazeez",
  field: "Computer Science"
};
```

Type in the console and run it:

![JavaScript Objects](https://thepracticaldev.s3.amazonaws.com/i/r41h6g3v65zfjdtius0u.PNG)

Next, we confirm the object has been created.

![JavaScript Objects](https://thepracticaldev.s3.amazonaws.com/i/g8kod2s1u16j8ot38wck.PNG)

The constructed syntax equivalent is:

```javascript
var bioData = new Object();
```

Type in the console, run it and confirm the object is created.

![JavaScript Objects](https://thepracticaldev.s3.amazonaws.com/i/7lftliewg1wfwd7ihk7c.PNG)

I mentioned earlier that object can also contain another object, here is an  example:

```javascript
var bioData = {
  first_name: "Habdul",
  last_name: "Hazeez",
  field: "Computer Science"
  skills: {
     programming_languages: "JavaScript, C, C++",
     other_fields: "Computer Security, Artificial Intelligence"
  }
};
```

###__Data Retrieval__

Values can be retrieved from an object by wrapping the object name in square brackets `[ ]` or using __dot notation__. If the __property name is a reserved word__ like `name` then it's __best to use the dot notation because its easier to read__. Let's see some code.

```javascript
// retrieve the first_name using square
// brackets notation 

bioData['first_name'];
```

In the console:

![JavaScript Objects](https://thepracticaldev.s3.amazonaws.com/i/kgmpgevo9m2jz4zqlig8.PNG)

You can also use the dot notation.

```javascript
biodata.'first_name'
```

In the console:

![JavaScript Objects](https://thepracticaldev.s3.amazonaws.com/i/39ao2i2ibcnomviyguxt.PNG)

How to retrieve data from an object that contains another object is summed up in the image below.

![JavaScript Objects](https://thepracticaldev.s3.amazonaws.com/i/gobvhzidj7vq1jwqtbgd.PNG)

If you attempt to retrieve a non-existence property you will get `undefined`.

###__Data Update__

__A value in an object can be updated by assignment__. If the property name already exists in the object, the property value is replaced:

In code:

```javascript
bioData['first_name'] = "Ben";
```

In the console:

![JavaScript Objects](https://thepracticaldev.s3.amazonaws.com/i/xkq9tvxvp84kc3f7z9bw.PNG)

You can confirm the update with the following code:

```javascript

// check the object

bioData;
```

In the console:

![JavaScript Objects](https://thepracticaldev.s3.amazonaws.com/i/71ye9to1df2j3ww6vjpw.PNG)

<hr>

The `delete` operator is used to remove a property from an object. It will remove a property from the object if it has one.

```javascript

// This will delete the first_name property

delete bioData.first_name;
```

In the console:

![JavaScript Objects](https://thepracticaldev.s3.amazonaws.com/i/i6kw3rifupk9y7n1l1d0.PNG)

Confirm the deletion:

```javascript

// check the object to confirm the deletion

bioData;
```

In the console:

![JavaScript Object property deleted](https://thepracticaldev.s3.amazonaws.com/i/qn477hcg0tjtd3yn6qh5.PNG)

<hr>

This is just an introduction to JavaScript Objects and i have left out the following among others:

* Object enumeration
* Object References
* Reflection

Up next, Numbers.