Understanding Objects in JavaScript

Imagine a phone book of your locality where we have phone and address of everyone. To find any information you don’t need to read line by line you just find a label or name like John Doe and you get their details like

• Name : John Doe

• Phone no: 123456789

• Address: New Delhi, India

Another example be like a contact card of a person which contents

• Name

• Phone no

• Address

• Business of that person

Instead of storing this details separately we store it in a single place, we group them together.

In the same way Objects are structured in JavaScript.

As a developers we constantly modelling the real world, and in real world we cannot just use simple numbers or list. We deal with entries like people, products etc. To represent these complex things accurately simple variable or array don’t work out we need more complex datatypes.

An Object is the right choice for this.

What is Object?

A Object is a dynamic data structure that stores data in key-value pair where each key uniquly identify each value.

• key: name of the property

• value: the actual data of that property associate with that unique key

Example

const obj = {
    name: "John Doe",
    phone: "1234567890",
    age: 28,
}

Here,

• name is the key

• John Doe is the value of the name key

Objects help organize related data in a single structure, making it easier to manage and access information.

Why Are Objects Needed?

Object are useful because

1. Organize Related Data

Instead of many variables

let name = "John Doe";
let phone = "1234567890";
let age = 28;

We grouped them into an object

const person = {
    name: "John Doe",
    phone: "1234567890",
    age: 28,
}

2. Make the code easier to manage

When working with user data, products, or students, objects help keep everything organized.

Creating Objects

Using Object literal syntax

The most common way to create an object is to create using Object literal syntax.

const person = {
    name: "John Doe",
    phone: "1234567890",
    age: 28,
}

Another way can be creating an empty object and properties later.

const person = {};
person.name = "John Doe";
person.phone = "1234567890";
person.age = 28;

Using Object Constructor Syntax

Another way to create an object is using Object Constructor.

const obj1 = new Object();
console.log(obj1);

It will create an empty object and the output will be

{}

To add values to the object we create the properties later.

obj1.name = "John";
obj1.city = "NYC";
console.log(obj1);

The output will becomes

{ name: 'John', city: 'NYC' }

Accessing Object Properties

How did we get the data from the object? JavaScript gives us two distinct way to retrieve value from an object that are

• Dot Notation

• Bracket Notation

Let the object is

const person = {
    name: "John Doe",
    phone: "1234567890",
    age: 28,
    address: "New Delhi",
}

1. Dot Notation

This is the most common way to access properties of the object. We use it exactly when we know the key or the property from beginning. The key should be valid variable name with no spaces in between and not starts with numbers.

// Dot Notation
console.log(person.name);
console.log(person.age);

Output

John Doe
28

2. Bracket Notation

Another way of accessing the objects are using bracket notations.

// Bracket Notation
console.log(person["name"]);
console.log(person["age"]);

Output

John Doe
28

We use bracket notations when

• Property name contains spaces

• property name stores in a variable

let key = "name";
console.log(person[key]);

Output

John Doe

Updating object properties

Objects are mutable. Once they are created, you can easily change the values stored within their properties. You can use either Dot or Bracket notation for updates.

let the object

const person = {
    name: "John Doe",
    phone: "1234567890",
    age: 28,
}

To update property we can use

person.age = 31;
person["phone"] = "4567891230";

console.log(person.age);
console.log(person.phone);

Output

31
4567891230

Adding properties

We aren’t restricted to the properties at the time of creation, we can dynamically grow them. You simply add a property by simply assigning a value to the new key. If value does not exist, JavaScript creates it.

person.favCol = "Red";

console.log(person.favCol);
console.log(person);

Output:

Red
{ name: 'John Doe', phone: '4567891230', age: 31, favCol: 'Red' }

Deleting Properties

We can shrink or delete a property of an object dynamically. We use delete keyword to delete a property.

delete person.favCol;
console.log(person.favCol);
console.log(person);

Output:

undefined
{ name: 'John Doe', phone: '4567891230', age: 31 }

Looping Through Object Keys

Sometimes we need to loop through an object and need to show a specific value or a show the whole data at once, for this purpose we need to loop through the object.

The most common way is to use a for…in loop

const person = {
    name: "John Doe",
    phone: "1234567890",
    age: 28,
}

for (const key in person) {
    const element = person[key];
    console.log(`\({key} : \){element}`);
}

It loop through the object and print all the key and value. So the output is

name : John Doe
phone : 1234567890
age : 28

Array vs. Object

It is very common in starting to confuse between the array and objects. Both are collection of data, but the structure and access of data is completely different.

Feature	Array	Object
Structure	An ordered list of items.	An unordered collection of labeled data.
Access Data	Using a numerical index (e.g., arr[0]).	Using a string key (e.g., obj.name).
Ideal For	Sequential data (lists, queues).	Complex entities (People, configurations).

Final Thoughts

In JavaScript Object is a very important concept of programming. It allow developers to

• Organize real world data

• Build real world models

• write cleaner and maintainable code.

Once you understand objects, you’ll find that almost everything in JavaScript revolves around them.

That's it, now you understand Objects in JavaScript. I’d love to hear your thoughts and feedbacks.

Thank You for your patients. ❤️