blog

view all posts

Introducing JavaScript objects

Frugence | 9 months ago

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 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']
    };