DEV Community

Frugence Fidel
Frugence Fidel

Posted on • Updated on

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'];
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

This is perfect use for an object.

=>By using Object

const person = {
  firstName: 'Frugence',
  lastName: 'Fidel',
  nationality: 'Tanzanian'
};
Enter fullscreen mode Exit fullscreen mode

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

const person = {
  lastName: 'Fidel',
  nationality: 'Tanzanian',
  firstName: 'Frugence'
};
Enter fullscreen mode Exit fullscreen mode

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"}
Enter fullscreen mode Exit fullscreen mode

ii. With it's data

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

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

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'
Enter fullscreen mode Exit fullscreen mode

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"}
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

Data type in object

Object can hold any javascript data types.

const person = {
  fullName: 'Frugence Fidel',
  isTanzanian: true,
  luckyNumber: 1
};
Enter fullscreen mode Exit fullscreen mode

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']
};
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
ann0nip profile image
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!

Collapse
 
frugencefidel profile image
Frugence Fidel

Ooohh!! Thanks for that buddy

Collapse
 
michaeloneal profile image
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.