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']
};
Top comments (3)
Hey dude, I think you have a small typing mistake below ii. With its data, your example its incomplete.
Should be:
Cheers!
Ooohh!! Thanks for that buddy
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.