Introducing JavaScript Objects

This post is originally published to my blog.

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

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

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

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

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

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

// 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

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.

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

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.

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.

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.

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

Comments

[Juan Martin Gimenez]

Hey dude, I think you have a small typing mistake below ii. With its data, your example its incomplete.

Should be:

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

Cheers!

[Frugence Fidel]

Ooohh!! Thanks for that buddy

[MichaelONeal]

Fantastic, clear examples on the basic methods of manipulating objects.

I wish I would have run into this post a little earlier in my career. Would have smoothed out a number of speed bumps.