JavaScript Objects Explained With Practical Examples

JavaScript objects let you keep related information together using named properties.

A shopping website can store a product name, price, stock status, rating, and category inside one object. A user account can store a name, email, role, and preferences in the same structure.

Objects are one of the most important parts of JavaScript because real websites, APIs, browser features, and frameworks such as Angular use object-based data constantly.

Course Home: JavaScript Tutorial for Beginners
Previous Lesson: JavaScript Arrays Explained
Next Lesson: JavaScript DOM Manipulation Explained

Quick Answer

A JavaScript object stores related values as property and value pairs.

Example:

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

Access a property with dot notation:

console.log(product.name);

Output:

Laptop

Update a property:

product.price = 45000;

Add a new property:

product.rating = 4.5;

Delete a property:

delete product.rating;

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

What Is an Object in JavaScript?

An object is a collection of related data stored with named keys.

Consider:

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

This object contains three properties:

name
price
inStock

Each property has a value.

For example:

name → "Laptop"
price → 50000
inStock → true

Unlike an array, which uses numeric indexes, an object lets you access data by meaningful property names.

Why JavaScript Objects Matter

Objects are useful when several values describe one thing.

For example, one product might need:

Product name
Price
Category
Stock quantity
Rating
Image URL
SKU
Sale status

Instead of creating separate variables:

const productName = "Laptop";
const productPrice = 50000;
const productCategory = "Computers";
const productStock = 8;

you can group them:

const product = {
    name: "Laptop",
    price: 50000,
    category: "Computers",
    stock: 8
};

Now the data clearly belongs to one product.

How to Create a JavaScript Object

The most common way is object literal syntax:

const user = {
    name: "Riya",
    age: 28,
    city: "Delhi"
};

The object starts and ends with curly braces:

{
}

Properties are separated by commas.

Each property usually has:

key: value

For example:

name: "Riya"

Object Property Keys and Values

Consider:

const product = {
    name: "Keyboard",
    price: 1500,
    wireless: true
};

The keys are:

name
price
wireless

The values are:

"Keyboard"
1500
true

JavaScript objects can store many different value types.

Objects Can Store Different Data Types

An object may contain strings:

const user = {
    name: "Amit"
};

Numbers:

const product = {
    price: 500
};

Booleans:

const account = {
    verified: true
};

Arrays:

const product = {
    colors: ["Black", "White", "Blue"]
};

Other objects:

const user = {
    address: {
        city: "Delhi",
        pinCode: 110001
    }
};

Functions:

const user = {
    greet() {
        console.log("Hello");
    }
};

This flexibility makes objects useful for real application data.

Access Object Properties With Dot Notation

Dot notation is the simplest way to access most object properties.

Example:

const product = {
    name: "Laptop",
    price: 50000
};

console.log(product.name);

Output:

Laptop

Access another property:

console.log(product.price);

Output:

The pattern is:

objectName.propertyName

Access Object Properties With Bracket Notation

You can also use brackets:

const product = {
    name: "Laptop",
    price: 50000
};

console.log(product["name"]);

Output:

Laptop

Another example:

console.log(product["price"]);

Output:

The property name inside brackets is usually a string.

Dot Notation vs Bracket Notation

Use dot notation when you know the property name directly:

product.name

Use bracket notation when:

The property name comes from a variable
The property name contains spaces or special characters
You need dynamic property access

Example:

const key = "price";

console.log(product[key]);

Output:

This would not work the same way:

product.key

That looks for a property literally named:

key

not the value stored inside the variable.

Dynamic Property Access

Dynamic access is one of the main reasons bracket notation matters.

Example:

const product = {
    name: "Laptop",
    price: 50000
};

const propertyName = "name";

console.log(product[propertyName]);

Output:

Laptop

This becomes useful when property names come from forms, table columns, filters, or other program logic.

Property Names With Spaces

You can create a property name containing spaces:

const user = {
    "full name": "Riya Sharma"
};

Access it with:

console.log(user["full name"]);

Output:

Riya Sharma

This does not work:

user.full name

For your own JavaScript objects, simple camelCase property names are usually easier to work with.

Prefer:

fullName

over:

"full name"

Change an Object Property

You can update an existing property.

Example:

const product = {
    name: "Laptop",
    price: 50000
};

product.price = 45000;

console.log(product.price);

Output:

You can also update with bracket notation:

product["price"] = 42000;

Add a New Property

JavaScript lets you add new properties after creating an object.

Example:

const product = {
    name: "Laptop"
};

product.price = 50000;
product.inStock = true;

console.log(product);

The object now has:

name
price
inStock

Bracket notation also works:

product["rating"] = 4.5;

Delete an Object Property

Use the delete operator to remove a property.

Example:

const product = {
    name: "Laptop",
    price: 50000,
    discount: 10
};

delete product.discount;

console.log(product);

The discount property is removed.

Use property deletion when removing the property itself is really what you want.

Sometimes setting a value to null or another state is more meaningful than deleting the key.

const Objects Can Still Change

This is important.

Consider:

const product = {
    name: "Laptop",
    price: 50000
};

You can change a property:

product.price = 45000;

You can add a property:

product.stock = 5;

You can delete a property:

delete product.stock;

What you cannot do is reassign the variable:

product = {
    name: "Phone"
};

That causes an error.

const prevents reassignment of the variable. It does not freeze the object.

You first saw this rule in the JavaScript Variables tutorial.

Check Whether a Property Exists

Modern JavaScript provides:

Object.hasOwn()

Example:

const product = {
    name: "Laptop",
    price: 50000
};

console.log(Object.hasOwn(product, "price"));

Output:

true

Check a missing property:

console.log(Object.hasOwn(product, "rating"));

Output:

false

This checks whether the object itself owns the property.

The in Operator

JavaScript also has the in operator.

Example:

const product = {
    name: "Laptop",
    price: 50000
};

console.log("price" in product);

Output:

true

The in operator also checks properties available through the prototype chain.

For a simple own-property check, Object.hasOwn() is often more precise.

You will study prototypes later.

Object Methods

An object property can contain a function.

When a function belongs to an object, it is commonly called a method.

Example:

const user = {
    name: "Riya",

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

Call the method:

user.greet();

Output:

Hello

Method Syntax

A concise object method looks like:

const calculator = {
    add(a, b) {
        return a + b;
    }
};

Call:

console.log(calculator.add(5, 3));

Output:

Methods let data and related actions live together.

Real Website Example: Product Method

const product = {
    name: "Keyboard",
    price: 1500,

    getLabel() {
        return `${this.name} costs ₹${this.price}`;
    }
};

Call:

console.log(product.getLabel());

Output:

Keyboard costs ₹1500

The method uses:

this

to access properties on the current object.

What Does this Mean in an Object Method?

Inside a normal object method, this commonly refers to the object used to call the method.

Example:

const user = {
    name: "Amit",

    greet() {
        console.log(`Hello ${this.name}`);
    }
};

user.greet();

Output:

Hello Amit

Here:

this.name

reads:

user.name

in this method call.

this has more rules in JavaScript, so you will study it separately later.

Avoid Arrow Functions for this-Based Object Methods

Consider:

const user = {
    name: "Amit",

    greet: () => {
        console.log(this.name);
    }
};

An arrow function does not create its own this binding.

That means it does not behave like the normal method example above.

When a method needs the object’s this, use normal method syntax:

const user = {
    name: "Amit",

    greet() {
        console.log(this.name);
    }
};

Arrow functions are still useful in many other parts of JavaScript.

Review JavaScript Functions for function basics.

Nested Objects

Objects can contain other objects.

Example:

const user = {
    name: "Riya",

    address: {
        city: "Delhi",
        pinCode: 110001
    }
};

Access the nested city:

console.log(user.address.city);

Output:

Delhi

Access the PIN code:

console.log(user.address.pinCode);

Output:

Update a Nested Property

You can update nested data:

user.address.city = "Noida";

Now:

console.log(user.address.city);

Output:

Noida

Nested objects are common in user profiles, settings, API data, and configuration objects.

Optional Chaining

Trying to access a property on null or undefined can cause an error.

Example:

const user = {
    name: "Riya"
};

console.log(user.address.city);

Because address does not exist, this causes an error.

Optional chaining uses:

?.

Example:

console.log(user.address?.city);

Output:

undefined

JavaScript stops safely when address is missing.

Optional Chaining With Deeper Properties

Example:

const user = {
    profile: {
        name: "Riya"
    }
};

console.log(user.profile?.address?.city);

Output:

undefined

Optional chaining is useful when working with data where some nested properties may not exist.

It is especially common with API responses.

Nullish Coalescing for Missing Values

You may pair optional chaining with:

??

Example:

const user = {
    name: "Riya"
};

const city = user.address?.city ?? "Not provided";

console.log(city);

Output:

Not provided

The ?? operator uses the fallback when the left side is null or undefined.

This differs from ||, which also treats values such as 0, false, and "" as falsy.

You will study nullish coalescing in more detail later.

Arrays Inside Objects

Objects can contain arrays.

Example:

const product = {
    name: "T-Shirt",
    colors: ["Black", "White", "Blue"]
};

Access the colors:

console.log(product.colors);

Access the first color:

console.log(product.colors[0]);

Output:

Black

Loop through them:

for (const color of product.colors) {
    console.log(color);
}

You learned array basics in the JavaScript Arrays tutorial.

Objects Inside Arrays

Real application data often uses arrays of objects.

Example:

const products = [
    {
        name: "Laptop",
        price: 50000
    },
    {
        name: "Phone",
        price: 25000
    }
];

Access the first product:

console.log(products[0].name);

Output:

Laptop

Access the second product price:

console.log(products[1].price);

Output:

Loop Through an Array of Objects

Example:

const products = [
    { name: "Laptop", price: 50000 },
    { name: "Phone", price: 25000 },
    { name: "Mouse", price: 1000 }
];

for (const product of products) {
    console.log(`${product.name}: ₹${product.price}`);
}

Output:

Laptop: ₹50000
Phone: ₹25000
Mouse: ₹1000

This structure is extremely common when data comes from an API.

Real Website Example: Product Object

A more realistic product might look like:

const product = {
    id: 101,
    name: "Wireless Keyboard",
    price: 1500,
    category: "Accessories",
    inStock: true,
    colors: ["Black", "White"]
};

Display some information:

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

Output:

Wireless Keyboard
1500
true

Check stock:

if (product.inStock) {
    console.log("Available");
}

This combines objects with JavaScript if else.

Real Website Example: User Profile

const user = {
    id: 10,
    name: "Riya Sharma",
    email: "riya@example.com",
    verified: true,

    address: {
        city: "Delhi",
        country: "India"
    }
};

Access:

console.log(user.name);
console.log(user.address.city);

Output:

Riya Sharma
Delhi

This kind of nested structure is common in account dashboards.

Real Website Example: Shopping Cart Item

const cartItem = {
    productId: 101,
    name: "Keyboard",
    price: 1500,
    quantity: 2
};

Calculate the line total:

const lineTotal = cartItem.price * cartItem.quantity;

console.log(lineTotal);

Output:

An actual cart often stores several of these objects inside an array.

Object.keys()

Object.keys() returns an array of an object’s own enumerable property names.

Example:

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

const keys = Object.keys(product);

console.log(keys);

The array contains:

name
price
inStock

Because the result is an array, you can loop through it.

for (const key of Object.keys(product)) {
    console.log(key);
}

Loop Through Object Properties With Object.keys()

You can also use each key to read the value:

for (const key of Object.keys(product)) {
    console.log(product[key]);
}

Output:

Laptop
50000
true

Bracket notation is required because key is a variable.

Object.values()

Object.values() returns an array containing the object’s own enumerable property values.

Example:

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

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

The result contains:

Laptop
50000
true

Use this when you need values without their property names.

Object.entries()

Object.entries() returns an array of key-value pairs.

Example:

const product = {
    name: "Laptop",
    price: 50000
};

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

The result is similar to:

[
    ["name", "Laptop"],
    ["price", 50000]
]

This makes it convenient to loop through both the property name and value.

Loop Through Object.entries()

Example:

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

for (const [key, value] of Object.entries(product)) {
    console.log(`${key}: ${value}`);
}

Output:

name: Laptop
price: 50000
inStock: true

This example uses destructuring:

[key, value]

You will study destructuring more deeply later.

for…in Loop With Objects

You can also loop over object property keys using for...in.

Example:

const product = {
    name: "Laptop",
    price: 50000
};

for (const key in product) {
    console.log(key);
}

Output:

name
price

Access the values:

for (const key in product) {
    console.log(product[key]);
}

Output:

Laptop
50000

For many modern tasks, Object.keys(), Object.values(), or Object.entries() make the intent clearer.

Object.keys vs Object.values vs Object.entries

Use:

Object.keys(object)

when you need property names.

Use:

Object.values(object)

when you need property values.

Use:

Object.entries(object)

when you need both keys and values.

Example:

const user = {
    name: "Amit",
    city: "Noida"
};

Object.keys(user);

returns keys.

Object.values(user);

returns values.

Object.entries(user);

returns key-value pairs.

Object Property Shorthand

Suppose you already have variables:

const name = "Laptop";
const price = 50000;

You could create:

const product = {
    name: name,
    price: price
};

Modern JavaScript allows shorthand when the property name matches the variable name:

const product = {
    name,
    price
};

The result is the same.

This shorthand is common in modern JavaScript and APIs.

Computed Property Names

Bracket syntax can create dynamic property names inside an object literal.

Example:

const field = "price";

const product = {
    name: "Laptop",
    [field]: 50000
};

console.log(product.price);

Output:

The variable field supplies the property name.

This can be useful when building objects from dynamic form fields or data.

Object Destructuring

Object destructuring lets you copy property values into variables.

Example:

const product = {
    name: "Laptop",
    price: 50000
};

const { name, price } = product;

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

Output:

Laptop
50000

Without destructuring, you might write:

const name = product.name;
const price = product.price;

Destructuring makes repeated property access shorter.

You will learn destructuring in more detail later.

Rename a Destructured Property

You can choose a different variable name:

const user = {
    name: "Riya"
};

const { name: userName } = user;

console.log(userName);

Output:

Riya

The original object property is still called:

name

Only the new local variable is called:

userName

Default Values in Object Destructuring

Example:

const user = {
    name: "Riya"
};

const { city = "Unknown" } = user;

console.log(city);

Output:

Unknown

The fallback is used because city is missing.

Spread Syntax With Objects

Spread syntax can copy properties into a new object.

Example:

const product = {
    name: "Laptop",
    price: 50000
};

const copy = {
    ...product
};

Now copy is a different outer object with the same property values.

You can add another property:

const saleProduct = {
    ...product,
    discount: 10
};

Update an Object With Spread Syntax

You can also replace one property while copying the rest.

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

const updatedProduct = {
    ...product,
    price: 45000
};

updatedProduct now has the new price.

The original object remains unchanged.

This pattern is common in modern frontend development and Angular applications.

Spread Creates a Shallow Copy

Just like array spread, object spread creates a shallow copy.

Example:

const user = {
    name: "Riya",

    address: {
        city: "Delhi"
    }
};

const copy = {
    ...user
};

The outer object is new.

But the nested address object is still shared.

If you write:

copy.address.city = "Noida";

then:

console.log(user.address.city);

also returns:

Noida

You will learn deeper copying strategies later when your projects require them.

Object.assign()

You may also see:

Object.assign()

used to copy or combine object properties.

Example:

const product = {
    name: "Laptop"
};

const details = {
    price: 50000
};

const combined = Object.assign({}, product, details);

The result contains both:

name
price

Modern code often uses object spread because it is easier to read:

const combined = {
    ...product,
    ...details
};

Comparing Objects

Two separate objects are not strictly equal just because their contents look the same.

Example:

const user1 = {
    name: "Amit"
};

const user2 = {
    name: "Amit"
};

console.log(user1 === user2);

Output:

false

They are different object references.

This returns true:

const user1 = {
    name: "Amit"
};

const user2 = user1;

console.log(user1 === user2);

Output:

true

Both variables refer to the same object.

You first saw this rule in the JavaScript Comparison Operators tutorial.

Objects Are Reference Values

Consider:

const original = {
    name: "Laptop"
};

const second = original;

These variables refer to the same object.

Now:

second.name = "Phone";

console.log(original.name);

Output:

Phone

The object itself was changed.

This is different from assigning simple primitive values such as numbers or strings.

Primitive Copy vs Object Reference

Primitive example:

let first = 10;
let second = first;

second = 20;

console.log(first);

Output:

Changing second does not change first.

Object example:

const first = {
    value: 10
};

const second = first;

second.value = 20;

console.log(first.value);

Output:

Both variables refer to the same object.

This difference is important as your JavaScript projects grow.

Object.freeze()

JavaScript provides:

Object.freeze()

to prevent many direct changes to an object.

Example:

const product = Object.freeze({
    name: "Laptop",
    price: 50000
});

Code such as:

product.price = 45000;

will not update the frozen property.

However, Object.freeze() is shallow.

Nested objects are not automatically deeply frozen.

Beginners do not need to freeze every object. It is simply useful to know the feature exists.

Object.seal()

You may also encounter:

Object.seal()

A sealed object prevents adding or deleting properties, but existing writable properties can still be changed.

This is more advanced and is not required for normal beginner projects.

Focus first on creating, reading, updating, and looping through objects.

JSON Looks Similar to JavaScript Objects

You will often see data like:

{
    "name": "Laptop",
    "price": 50000
}

This is JSON, not a JavaScript object literal.

They look similar, but JSON has stricter syntax.

For example, JSON property names use double quotes.

JavaScript object literals can use:

const product = {
    name: "Laptop",
    price: 50000
};

You will study JSON in JavaScript later before working deeply with APIs.

Real Website Example: API-Style Product Data

A server may provide data that becomes JavaScript objects after JSON parsing.

Example:

const product = {
    id: 101,
    name: "Laptop",
    price: 50000,

    category: {
        id: 5,
        name: "Computers"
    },

    images: [
        "laptop-front.jpg",
        "laptop-side.jpg"
    ]
};

Access:

console.log(product.category.name);

Output:

Computers

Access the first image:

console.log(product.images[0]);

Output:

laptop-front.jpg

This combination of objects and arrays is extremely common in API data.

Real Website Example: User Permissions

const user = {
    name: "Amit",
    role: "editor",
    active: true
};

Check permission:

if (user.active && user.role === "editor") {
    console.log("Editing allowed");
}

This combines object properties with logical and comparison operators.

Real Website Example: Update Cart Quantity

const cartItem = {
    name: "Keyboard",
    price: 1500,
    quantity: 1
};

cartItem.quantity++;

const total = cartItem.price * cartItem.quantity;

console.log(total);

Output:

Objects make it easy to keep a product’s related values together.

Real Website Example: Build a Product Label Function

function getProductLabel(product) {
    return `${product.name} - ₹${product.price}`;
}

const product = {
    name: "Monitor",
    price: 12000
};

console.log(getProductLabel(product));

Output:

Monitor - ₹12000

Passing objects into functions is common because one argument can carry several related values.

Real Website Example: List User Details

const user = {
    name: "Riya",
    email: "riya@example.com",
    city: "Delhi"
};

for (const [key, value] of Object.entries(user)) {
    console.log(`${key}: ${value}`);
}

Output:

name: Riya
email: riya@example.com
city: Delhi

This pattern can help when building simple detail lists.

Common Beginner Mistakes

Using Array Indexes on an Object

Wrong:

const user = {
    name: "Riya"
};

console.log(user[0]);

Objects do not automatically use numeric indexes like arrays.

Use the property name:

console.log(user.name);

Using Dot Notation for a Dynamic Property

Suppose:

const key = "price";

Wrong:

console.log(product.key);

That looks for a property literally named key.

Use:

console.log(product[key]);

Forgetting Quotes in Bracket Notation

Wrong:

product[name]

unless name is a variable.

To access the literal name property:

product["name"]

Expecting const to Freeze an Object

This works:

const product = {
    price: 500
};

product.price = 600;

const prevents reassignment, not property changes.

Comparing Separate Objects With ===

This returns false:

{ name: "Amit" } === { name: "Amit" }

The two objects are separate references.

Copying an Object by Assignment

This does not create a new object:

const copy = original;

Both variables point to the same object.

Use object spread for a shallow outer copy:

const copy = {
    ...original
};

Forgetting That Spread Is Shallow

Nested objects remain shared after a shallow spread copy.

Do not assume:

const copy = {
    ...original
};

deeply duplicates every nested object.

Using an Arrow Function When a Method Needs this

Avoid:

const user = {
    name: "Amit",

    greet: () => {
        console.log(this.name);
    }
};

Use normal method syntax when you need object-based this:

const user = {
    name: "Amit",

    greet() {
        console.log(this.name);
    }
};

Accessing a Missing Nested Property Directly

This can throw an error:

user.address.city

when address is missing.

Use optional chaining when the property may not exist:

user.address?.city

Using for…of Directly on a Plain Object

This does not normally work:

for (const value of product) {
    // ...
}

Plain objects are not directly iterable with for...of.

Use:

Object.keys(product)

Object.values(product)

or:

Object.entries(product)

Confusing an Object Method With a Property

Property:

user.name

Method:

user.greet()

Methods need parentheses when you want to call them.

Forgetting Commas Between Properties

Wrong:

const user = {
    name: "Riya"
    age: 25
};

Correct:

const user = {
    name: "Riya",
    age: 25
};

Best Practices for JavaScript Objects

Use clear property names:

const product = {
    productName: "Laptop",
    productPrice: 50000
};

When the surrounding object already provides context, shorter names are often cleaner:

const product = {
    name: "Laptop",
    price: 50000
};

Use dot notation for simple known properties.

Use bracket notation for dynamic property names.

Group related values inside one object.

Use arrays of objects for collections of records.

Prefer method shorthand for normal object methods:

const user = {
    greet() {
        // ...
    }
};

Use optional chaining when nested data may be missing.

Use Object.hasOwn() when you specifically need to check an object’s own property.

Use Object.keys(), Object.values(), or Object.entries() when looping through object data.

Remember that spread syntax creates a shallow copy.

Avoid huge objects that combine unrelated jobs and data.

Beginner Exercise

Create this object:

const student = {
    name: "Amit",
    age: 20,
    course: "JavaScript"
};

Complete these tasks:

Print the student’s name.
Print the course.
Change the age to 21.
Add a property named city.
Set city to "Noida".
Check whether the object has a course property.
Print all property names with Object.keys().
Print all values with Object.values().

Then loop through the object with Object.entries().

Challenge Exercise

Create:

const product = {
    name: "Monitor",
    price: 12000,
    quantity: 2,
    inStock: true
};

Create a function:

function calculateProductTotal(product) {
    // your code
}

It should return:

price × quantity

The result should be:

Then add:

product.discount = 10;

Create another function that calculates the final price after the percentage discount.

Extra Challenge

Create:

const user = {
    name: "Riya",

    address: {
        city: "Delhi"
    },

    skills: ["HTML", "CSS", "JavaScript"]
};

Print:

The user’s name.
The city.
The second skill.
Every skill using for...of.

Then safely try to access:

user.company.name

using optional chaining so the program does not throw an error.

Frequently Asked Questions

What is an object in JavaScript?

A JavaScript object is a collection of related properties stored as key-value pairs.

How do I create an object in JavaScript?

A common object literal looks like:

const user = {
    name: "Riya",
    age: 25
};

How do I access an object property?

Use dot notation:

user.name

or bracket notation:

user["name"]

What is the difference between dot and bracket notation?

Dot notation is simpler for known property names.

Bracket notation is required when the property name is dynamic or cannot be written as a normal identifier.

How do I add a property to an object?

Assign a value to a new property:

user.city = "Delhi";

How do I update an object property?

Assign a new value:

user.city = "Noida";

How do I delete an object property?

Use:

delete user.city;

Can a const object change?

Yes.

Its properties can be added, updated, or deleted.

const prevents the variable from being reassigned to another object.

What is an object method?

An object method is a function stored as part of an object.

const user = {
    greet() {
        console.log("Hello");
    }
};

What does this mean in an object method?

In a normal method call such as user.greet(), this commonly refers to the object used for that call.

The full rules of this are more advanced and will be covered separately.

Can objects contain arrays?

Yes.

const product = {
    colors: ["Black", "White"]
};

Can arrays contain objects?

Yes.

Arrays of objects are extremely common in real websites and APIs.

What is a nested object?

A nested object is an object stored inside another object.

const user = {
    address: {
        city: "Delhi"
    }
};

What is optional chaining?

Optional chaining uses ?. to safely access a property when an earlier value may be null or undefined.

user.address?.city

What does Object.keys() do?

Object.keys() returns an array of an object’s own enumerable property names.

What does Object.values() do?

Object.values() returns an array of an object’s own enumerable property values.

What does Object.entries() do?

Object.entries() returns an array of key-value pairs.

What is Object.hasOwn()?

Object.hasOwn(object, property) checks whether the object itself has the specified property.

What is object destructuring?

Object destructuring lets you extract property values into variables.

const { name, price } = product;

What does object spread do?

Object spread copies enumerable own properties into a new object.

const copy = {
    ...product
};

This creates a shallow copy.

Why are two similar objects not equal with ===?

Separate objects have different references.

{ name: "A" } === { name: "A" }

returns false.

What is the difference between an object and an array?

An array is an ordered collection accessed mainly by numeric indexes.

An object stores named properties.

Arrays are also a special kind of JavaScript object.

What should I learn after JavaScript objects?

Learn JavaScript DOM manipulation next. The DOM lets JavaScript find and change HTML elements on a webpage.

Summary

JavaScript objects store related information with named properties.

Create an object like this:

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

Access properties with:

product.name

or:

product["name"]

You also learned how to:

Create objects
Read properties
Update properties
Add properties
Delete properties
Use dot notation
Use bracket notation
Access dynamic properties
Create object methods
Use this in normal methods
Work with nested objects
Use optional chaining
Store arrays inside objects
Store objects inside arrays
Use Object.keys()
Use Object.values()
Use Object.entries()
Use Object.hasOwn()
Use object destructuring
Use spread syntax
Understand shallow copies
Compare object references
Avoid common object mistakes

Objects are central to real JavaScript development because most structured website data is represented with objects, arrays, or both.

Continue Learning JavaScript

Previous Lesson: JavaScript Arrays Explained

Course Home: JavaScript Tutorial for Beginners

Next Lesson: JavaScript DOM Manipulation Explained

In the next lesson, you will learn how JavaScript finds HTML elements, changes text and styles, updates attributes, creates elements, and makes webpages respond dynamically.

James Parker

44 Posts

James Parker is a technology writer and WordPress enthusiast who shares practical guides on SEO, web development, AI tools, and digital growth. He focuses on creating easy-to-follow tutorials that help beginners and professionals build better websites and improve their online presence.

View All Posts

JavaScript Objects: Properties, Methods and Nested Data Explained

Quick Answer

What Is an Object in JavaScript?

Why JavaScript Objects Matter

How to Create a JavaScript Object

Object Property Keys and Values

Objects Can Store Different Data Types

Access Object Properties With Dot Notation

Access Object Properties With Bracket Notation

Dot Notation vs Bracket Notation

Dynamic Property Access

Property Names With Spaces

Change an Object Property

Add a New Property

Delete an Object Property

const Objects Can Still Change

Check Whether a Property Exists

The in Operator

Object Methods

Method Syntax

Real Website Example: Product Method

What Does this Mean in an Object Method?

Avoid Arrow Functions for this-Based Object Methods

Nested Objects

Update a Nested Property

Optional Chaining

Optional Chaining With Deeper Properties

Nullish Coalescing for Missing Values

Arrays Inside Objects

Objects Inside Arrays

Loop Through an Array of Objects

Real Website Example: Product Object

Real Website Example: User Profile

Real Website Example: Shopping Cart Item

Object.keys()

Loop Through Object Properties With Object.keys()

Object.values()

Object.entries()

Loop Through Object.entries()

for…in Loop With Objects

Object.keys vs Object.values vs Object.entries

Object Property Shorthand

Computed Property Names

Object Destructuring

Rename a Destructured Property

Default Values in Object Destructuring

Spread Syntax With Objects

Update an Object With Spread Syntax

Spread Creates a Shallow Copy

Object.assign()

Comparing Objects

Objects Are Reference Values

Primitive Copy vs Object Reference

Object.freeze()

Object.seal()

JSON Looks Similar to JavaScript Objects

Real Website Example: API-Style Product Data

Real Website Example: User Permissions

Real Website Example: Update Cart Quantity

Real Website Example: Build a Product Label Function

Real Website Example: List User Details

Common Beginner Mistakes

Using Array Indexes on an Object

Using Dot Notation for a Dynamic Property

Forgetting Quotes in Bracket Notation

Expecting const to Freeze an Object

Comparing Separate Objects With ===

Copying an Object by Assignment

Forgetting That Spread Is Shallow

Using an Arrow Function When a Method Needs this

Accessing a Missing Nested Property Directly

Using for…of Directly on a Plain Object

Confusing an Object Method With a Property

Forgetting Commas Between Properties

Best Practices for JavaScript Objects

Beginner Exercise

Challenge Exercise

Extra Challenge

Frequently Asked Questions

What is an object in JavaScript?