Skip to main content

Command Palette

Search for a command to run...

Understanding Object in JS

Published
4 min read
Understanding Object in JS

When you start learning Javascript, array helps you to store the list of data. But is there a possibility of storing structured information like details of an employee?

  1. name

  2. age

  3. salary

That’s where objects come in.

What Are Objects?

An object is a collection of data stored in key-value pairs.

Think of it like a real-world entity.

Example: A person has:

  • name

  • age

  • city

In JavaScript, we represent this using an object:

const person = {
  name: "Ashish",
  age: 25,
  city: "Delhi"
};

Here:

  • name, age, city are keys

  • "Ashish", 25, "Delhi" are their values

Why Do We Need Objects?

Arrays store data using indexes:

const user = ["Ashish", 25, "Delhi"];

But this is confusing. What if I don't know on which index the value actually exists?

Objects solve this by using keys:

person.name

You can directly access the value by using its key name.

Creating Objects

You can create an object using curly braces {}:

const student = {
  name: "John",
  age: 20,
  course: "BCA"
};

Accessing Properties

1. Dot Notation

The object values can be accessed using . (dot) notation:

console.log(student.name); // John

2. Bracket Notation

The object values can also be accessed using [] (bracket) notation. Inside the bracket, the key name will be specified as a string.

console.log(student["age"]); // 20

Dot notation vs Bracket notation

  • Dot notation → simple and common

  • Bracket notation → useful when the key is dynamic

const key = "course";
console.log(student.course) // BCA
console.log(student[key]);  // BCA

Updating Object Properties

Updating object value is simple and uses only dots. Just specify the . and keyname with the assignment operator and value

student.age = 21;
console.log(student.age); // 21

Breakdown:

  • age -> key

  • = -> assignment operator

  • 21 -> value

Adding New Properties

New properties can also be added using the same approach for updating the object.

student.city = "Mumbai";

console.log(student);

If the city doesn't exisits in object, it will add new property. Otherwise update exisiting.

Deleting Properties

Object properties can be deleted using delete keyword following with object property name.

delete student.course;

console.log(student);

Looping Through Object Keys

To loop through an object, we use for...in:

for (let key in student) {
  console.log(key, student[key]);
}

// Output:
// name Rahul
// age 21
// city Mumbai

Array vs Object (Simple Comparison)

Feature Array Object
Structure Ordered list Key-value pairs
Access Index (0, 1, 2) Key (name, age)
Use Case List of items Structured data
Example ["a", "b"] { name: "Ashish" }

Visual Representation (Mental Model)

Think of an object like a labeled box:

person = {
  name → "Ashish"
  age  → 25
  city → "Delhi"
}

Each value is stored with a label (key).

Assignment (Practice)

Create a student object and perform the following:

  1. Create an object named "employee"

  2. Add name, id, and salary fields

  3. Update the salary of the employee object.

  4. Loop through the employee object to print all properties.

Practice by converting real-life things (car, phone, user profile) into objects.

Conclusion

Objects are one of the most important concepts in JavaScript.

They help you:

  • Organize data in key-value format

  • Make code more readable

  • Represent real-world entities

Once you’re comfortable with objects, you’ll find it much easier to work with APIs, JSON data, and real applications.

Follow and learn more about Javascript!

JavaScript: Beginner to Advance 🚀

Part 3 of 11

This blog series is designed for professionals who want to learn JavaScript step by step. Starting from the basics like variables and data types, we gradually move to functions, DOM manipulation, and real-world mini projects.

Up next

Arrow Functions in JavaScript (Beginner-Friendly Guide)

Why arrow functions? Before arrow functions, writing a function felt like writing duplicate code again and again. Function Before Arrow Functions: function add(a, b) { return a + b; } Arrow functio