What is an object in javascript?

• An object is a built-in data type for storing key-value pairs. Data inside objects are unordered, and the values can be of any type. keys are also called properties.

• Object is a non-primitive data type in javascript. In Object, you can store the name of an employee, employee id, employee department etc.

• An object can be created with figure brackets {…}

How to Create Object and Its Properties

Empty objects can be created in two ways.

let employee = {}  // object literal syntax
let employee = new Object (); // object constructor syntax

• In this example, we create an empty employee object. but if We want to add data in an object how we can let see with the next example,

• Object is made up of "key: value" pairs:

• Next example we create an employee object and the object's syntax is that all the key and value pairs are separated by commas and enclosed by the curly braces { key: value, key: value }.

let employee = {     // an object
  name: "Sachin",  // by key "name" store value "Sachin"
  id: 30,        // by key "id" store value 30
  department: "hr"    // by key "department" store value "hr"
};

Accessing values of an Object

There are two ways to access key properties in JavaScript.

Dot notation

// First with dot notation
console.log(employee.name);

Output:

Sachin

Square bracket notation

// Second with square bracket notation.
console.log(employee['id']);

Output:

30

---

Computed properties

Square brackets can be used in an object literal also to create object properties. Such properties are called computed properties.

See the example below:

const name = "myName" ;

const person = { 
    [name]: "Ramesh Kumar",
    age: 25,
    isDoctor: true
}

console.log(person.myName);  // Ramesh Kumar

---

Assign new Property and update object

It is possible to change and add new properties to objects. Objects are mutable. It denotes that objects may be changed. The current value of objects can also be changed to a new one. Now let's try this.

const employee= {
    employeeName: "Suresh",
    employeeId: 2,
    employeeDepartment: "Finance",
    employeeAttendance: true,   
    }  

// Creates a new property in the employee object
employee.employeePerformance= 100;

//Assigns a new value on an existing property 'employeeAttendance'
employee.presentAttendance = false;

// Removes employeeId property in the object;
delete employee.employeeId

// Printing Object
console.log(employee);

// Below Output: An updated 'employee' object
{
  employeeName: "Suresh",
  employeeDepartment: "Finance",
  employeeAttendance: false,
  employeePerformance: 100
}

Creating Nested Objects

JavaScript Nested objects are the objects that are inside another object. Dealing with nested objects often we’ll be needing to access the innermost nested values safely.

const user = {
    id: 101,
    email: 'abc@eyehunts.com',
    personalInfo: {
        name: 'John',
        address: {
            line1: '101',
            line2: 'Stree Line',
            city: 'NY',
            state: 'WX'
        }
    }
}

Access the name of the user

const name = user.personalInfo.name;
console.log(name);

Output:

John

Iteration in Object

The objects can be iterated in javascript until we meet the desired condition. It can be done using for in loops.

Syntax:

for (key in object) {
  // statements to loop through keys
}

Example:

const person = { 
    yourName: "Ramesh yadav", 
    age: 25,
    isDoctor: true
};

for (let key in person) {
    // keys
    console.log(key);  // yourName, age, isDoctor
    // values for the keys
    console.log(person[key]); // John Doe, 34, true
}

Output:

yourName, age, isDoctor

Ramesh yadav, 25, true

Creating a method in an object

The term "method" refers to an object's functions. We'll access the employee object's new get employee performance function.

const employee = {
    employeeName: "Gaurav",
    employeeDepartment: "Finance",
    presentAttendance: false,
    employeePerformance: 100,
    // Creating method 'getPerformance'
    getPerformance() {
        console.log(`Name of employee: ${employee.employeePerformance}`)
    }
    // Invoking method 'getPerformance'
    employee.getPerformance();
    }

Output:

Gaurav: 100

Conclusion

So this article covered all basics regarding a javascript object. I hope you found this article helpful for your web development journey.

• If you fill this article informative please like this article, if you have any suggestions please comment on this article, share it on social media and follow me on

• Hashnode - Gaurav Patil

• Twitter - @GauravYPatil