JavaScript Objects

So far, we've worked with variables, arrays, strings, and other basic JavaScript concepts.

But imagine we're building a student management system. A student might have a name, age, email, course, and marks.

We could store each value separately:

let name = "John";
let age = 20;
let course = "Computer Science";

But as the amount of information grows, managing separate variables becomes difficult.

This is where objects become useful.

What is an Object?

An object is a data structure used to store related data and functionality as key-value pairs.

For example:

let student = {
    name: "John",
    age: 20,
    course: "Computer Science"
};

Here, student is an object containing three properties:

name   → "John"
age    → 20
course → "Computer Science"

Objects are one of the most important concepts in JavaScript because they're used everywhere—from simple applications to large frameworks and APIs.

Creating an Object

Objects are created using curly braces {}.

let person = {
    name: "John",
    age: 25,
    city: "Delhi"
};

Each piece of information has:

key → value

For example:

name → "John"
age  → 25
city → "Delhi"

The keys are also called properties.

Accessing Object Properties

There are two common ways to access object properties.

Dot Notation

The most common way is dot notation:

let person = {
    name: "John",
    age: 25
};

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

Output:

John
25

It's simple and easy to read.

Bracket Notation

We can also use square brackets:

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

Output:

John
25

Bracket notation becomes particularly useful when the property name is stored in a variable:

let property = "name";

console.log(person[property]);

Output:

John

Adding New Properties

We can add a new property to an existing object.

let person = {
    name: "John",
    age: 25
};

person.city = "Delhi";

console.log(person);

Now the object contains:

{
    name: "John",
    age: 25,
    city: "Delhi"
}

We can also use bracket notation:

person["country"] = "India";

Changing Properties

Object properties can be modified.

let person = {
    name: "John",
    age: 25
};

person.age = 26;

console.log(person.age);

Output:

26

Unlike a const variable itself, the properties of a const object can still be changed:

const person = {
    name: "John",
    age: 25
};

person.age = 26;

console.log(person.age);

This works because we're modifying a property of the object, not reassigning the person variable.

Removing Properties

We can remove a property using the delete operator.

let person = {
    name: "John",
    age: 25,
    city: "Delhi"
};

delete person.city;

console.log(person);

The city property is removed.

Objects Can Store Different Data Types

An object can contain different kinds of values.

let user = {
    name: "John",
    age: 25,
    isActive: true,
    score: 95.5,
    skills: ["JavaScript", "HTML", "CSS"]
};

Here:

• name → String

• age → Number

• isActive → Boolean

• score → Number

• skills → Array

Objects can even contain other objects.

Nested Objects

An object can contain another object.

let student = {
    name: "John",
    address: {
        city: "Delhi",
        country: "India"
    }
};

We can access the nested values like this:

console.log(student.address.city);

Output:

Delhi

Nested objects are very common when working with structured data such as API responses.

Objects with Methods

An object can also contain functions.

When a function is stored as a property of an object, it's called a method.

let person = {
    name: "John",

    greet: function() {
        console.log("Hello!");
    }
};

person.greet();

Output:

Hello!

We can also write the method using shorter syntax:

let person = {
    name: "John",

    greet() {
        console.log("Hello!");
    }
};

We'll explore methods and the this keyword more deeply later.

this in Objects

When working with object methods, you'll often see the this keyword.

For example:

let person = {
    name: "John",

    greet() {
        console.log("Hello, " + this.name);
    }
};

person.greet();

Output:

Hello, John

Here, this.name refers to the name property of the object that called the method.

The this keyword has some important rules in JavaScript, so we'll cover it separately.

Checking for Properties

We can use the in operator to check whether an object contains a particular property.

let person = {
    name: "John",
    age: 25
};

console.log("name" in person);
console.log("city" in person);

Output:

true
false

We can also use:

console.log(Object.hasOwn(person, "name"));

This checks whether name is an own property of the object.

Object Methods

JavaScript provides the built-in Object object with useful methods for working with objects.

Object.keys()

Returns an array containing the object's property names.

let person = {
    name: "John",
    age: 25,
    city: "Delhi"
};

console.log(Object.keys(person));

Output:

["name", "age", "city"]

Object.values()

Returns an array containing the object's values.

console.log(Object.values(person));

Output:

["John", 25, "Delhi"]

Object.entries()

Returns an array containing the object's key-value pairs.

console.log(Object.entries(person));

Output:

[
    ["name", "John"],
    ["age", 25],
    ["city", "Delhi"]
]

These methods become very useful when we need to loop through object data.

Objects and const

It's very common to create objects using const:

const user = {
    name: "John",
    age: 20
};

We can still change a property:

user.age = 21;

But we cannot replace the entire object:

user = {
    name: "Alex",
    age: 25
}; // ❌ Error

Again, const prevents reassignment of the variable, not modification of the object's properties.

Objects vs Arrays

Arrays and objects are both used to organize data, but they serve different purposes.

For example:

let fruits = ["Apple", "Banana", "Mango"];

let person = {
    name: "John",
    age: 20
};

Think of it this way:

Array → A list of things
Object → Details about a thing

A Practical Example

Let's create an object representing a product in an online store:

const product = {
    name: "Laptop",
    price: 50000,
    brand: "TechBrand",
    inStock: true
};

console.log(product.name);
console.log(product.price);

We can also update the stock status:

product.inStock = false;

console.log(product.inStock);

And add a new property:

product.category = "Electronics";

This is similar to how real applications represent products, users, orders, and other entities.

Conclusion

Objects are one of the most important data structures in JavaScript. They allow us to group related information and functionality together using key-value pairs.

The basic structure looks like this:

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

Remember the key ideas:

• Objects store data using key-value pairs.

• Keys are called properties.

• Properties can be accessed using dot or bracket notation.

• Objects can contain arrays, functions, and other objects.

• Functions inside objects are called methods.

• Object.keys(), Object.values(), and Object.entries() are useful for working with object data.

Objects become even more powerful when combined with arrays, functions, destructuring, and the this keyword, which we'll explore in the upcoming topics.