Introducing JavaScript Objects
Tags: beginners, javascript, webdev
Published: 2018-06-17 10:46:10

---
title: Introducing JavaScript Objects
published: true
description: 
tags: #newbies #javascript #webdev
---

This post is originally published to [my blog](http://frugencefidel.com/blog/introducing-javascript-objects).

Object is the way of storing group of data in key-value pairs. Object is denoted by symbol { }.

Let say we have to list someone first name, last name and his/her nationality.

=>By using Array

```javascript
const person = ['Frugence', 'Fidel', 'Tanzanian'];
```

here it is difficult to understand which value is first and last name, perhaps by guessing. What if array values are interchanged 

```javascript
const person = ['Fidel', 'Tanzanian', 'Frugence'];

// access person's first name
person[2]; // This is not meaningful
```

This is perfect use for an object.

=>By using Object

```javascript
const person = {
  firstName: 'Frugence',
  lastName: 'Fidel',
  nationality: 'Tanzanian'
};
```

Now it is simple to read data even if position are interchanged.

```javascript
const person = {
  lastName: 'Fidel',
  nationality: 'Tanzanian',
  firstName: 'Frugence'
};
```

**Create Object**

There are two common way of creating an object. You can create an empty object and adding data later or you can create with it's data.

i. By empty object, add data later

```javascript
// create empty object
const person = {};

// add data to object
person['firstName'] = 'Frugence';
person['lastName'] = 'Fidel';
person['nationality'] = 'Tanzanian';

console.log(person); // output {firstName: "Frugence", lastName: "Fidel", nationality: "Tanzanian"}
```

ii. With it's data

```javascript
const person = {
  firstName: 'Frugence',
  lastName: 'Fidel',
  nationality: 'Tanzanian'
};

console.log(person); // output {firstName: "Frugence", lastName: "Fidel", nationality: "Tanzanian"}
```

**Accessing object's data**

There are two common ways of accessing data from object, namely bracket and dot notation.

```javascript
const person = {
  firstName: 'Frugence',
  lastName: 'Fidel',
  nationality: 'Tanzanian'
};

// bracket notation
const first = person['firstName'];
console.log(first); // output 'Frugence'

// dot notation
const last = person.lastName;
console.log(last); // output 'Fidel'
```
**Update object's data**

You can update object by using either dot notation or bracket notation

```javascript
const person = {
  firstName: 'Frugence',
  lastName: 'Fidel'
};

// bracket notation
person['firstName'] = 'John';

// dot notation
person.lastName = 'Doe';

console.log(person); // output {firstName: "John", lastName: "Doe"}
```

**Adding method to Object**

Methods are functions inside the object.

```javascript
const person = {
  firstName: 'Frugence',
  lastName: 'Fidel',
  nationality: 'Tanzanian',
  sayHi() {
    return `Hi!! My name is ${person.firstName} ${person.lastName}, and I'm ${person.nationality}`;
  }
};

// sayHi is the method
console.log(person.sayHi()); // output "Hi!! My name is Frugence Fidel, and I'm Tanzanian"
```

**Data type in object**

Object can hold any javascript data types.

```javascript
const person = {
  fullName: 'Frugence Fidel',
  isTanzanian: true,
  luckyNumber: 1
};
```

**Nesting object and array**

Sometime you may need to nesting Object and Array to meet your need.

```javascript
const person = {
  fullName: 'Frugence Fidel',
  hobbies: ['Watch TV', 'Football', 'Reading', 'Coding']
};
```