JavaScript Objects — Complete Guide

Phase 3 — Objects

Module 8 — Objects

Objects are the heart of JavaScript. Nearly everything in JavaScript is an object or behaves like one. Objects allow developers to store related data and functionality together, making applications modular, reusable, and easier to maintain.

Professional JavaScript applications rely heavily on objects for:

• User profiles
• API responses
• Configuration files
• DOM elements
• React props and state
• Database models
• Classes and instances
• Business logic

By the end of this module, you'll understand how JavaScript objects work internally and how to use them effectively in real-world applications.

What is an Object?

An object is a collection of key-value pairs, where each key is called a property and each value can be any JavaScript data type, including another object or a function.

textCopy
1Object
2
3{
4    key : value,
5    key : value
6}

Example

javascriptCopy
1const user = {
2    name: "Ankit",
3    age: 23,
4    city: "Delhi"
5};
6
7console.log(user);

Output

textCopy
1{
2    name: "Ankit",
3    age: 23,
4    city: "Delhi"
5}

Creating Objects

Object Literal (Most Common)

javascriptCopy
1const student = {
2    name: "Rahul",
3    marks: 90
4};

Using new Object()

javascriptCopy
1const student = new Object();
2
3student.name = "Rahul";
4student.marks = 90;

Using Object.create()

javascriptCopy
1const person = {
2    greet() {
3        console.log("Hello");
4    }
5};
6
7const user = Object.create(person);
8
9user.name = "Ankit";
10
11user.greet();

Output

textCopy
1Hello

Object Properties

Properties store data inside an object.

javascriptCopy
1const product = {
2    id: 1,
3    name: "Laptop",
4    price: 65000
5};

Access Properties

Dot Notation

javascriptCopy
1console.log(product.name);

Output

textCopy
1Laptop

Bracket Notation

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

Output

textCopy
165000

Bracket notation is useful for dynamic property names.

javascriptCopy
1const key = "name";
2
3console.log(product[key]);

Adding Properties

javascriptCopy
1const user = {
2    name: "Ankit"
3};
4
5user.age = 23;
6
7console.log(user);

Updating Properties

javascriptCopy
1user.name = "Rahul";

Deleting Properties

javascriptCopy
1delete user.age;

Object Methods

Functions stored inside an object are called methods.

javascriptCopy
1const user = {
2
3    name: "Ankit",
4
5    greet() {
6        console.log("Hello");
7    }
8
9};
10
11user.greet();

Output

textCopy
1Hello

The this Keyword

this refers to the object that calls the method.

javascriptCopy
1const user = {
2
3    name: "Ankit",
4
5    greet() {
6        console.log(this.name);
7    }
8
9};
10
11user.greet();

Output

textCopy
1Ankit

this with Arrow Functions

Arrow functions do not have their own this.

javascriptCopy
1const user = {
2
3    name: "Ankit",
4
5    greet: () => {
6        console.log(this.name);
7    }
8
9};
10
11user.greet();

Output

textCopy
1undefined

Use regular functions for object methods.

Prototype

Every JavaScript object has an internal link to another object called its prototype.

textCopy
1user
2
3↓
4
5Prototype
6
7↓
8
9Object.prototype
10
11↓
12
13null

Example

javascriptCopy
1const person = {
2
3    greet() {
4        console.log("Hello");
5    }
6
7};
8
9const student = Object.create(person);
10
11student.greet();

Output

textCopy
1Hello

Prototype Inheritance

Objects inherit properties and methods from their prototype.

javascriptCopy
1const animal = {
2
3    eat() {
4        console.log("Eating...");
5    }
6
7};
8
9const dog = Object.create(animal);
10
11dog.bark = function () {
12    console.log("Bark");
13};
14
15dog.eat();
16dog.bark();

Output

textCopy
1Eating...
2Bark

Object.create()

Creates a new object using another object as its prototype.

javascriptCopy
1const employee = {
2
3    company: "Tech3Space"
4
5};
6
7const developer = Object.create(employee);
8
9developer.name = "Ankit";
10
11console.log(developer.company);

Output

textCopy
1Tech3Space

Object.assign()

Copies properties from one or more objects into another object.

javascriptCopy
1const user = {
2    name: "Ankit"
3};
4
5const details = {
6    age: 23
7};
8
9const profile = Object.assign({}, user, details);
10
11console.log(profile);

Output

textCopy
1{
2    name: "Ankit",
3    age: 23
4}

Object.freeze()

Prevents an object from being modified.

javascriptCopy
1const user = {
2    name: "Ankit"
3};
4
5Object.freeze(user);
6
7user.name = "Rahul";
8
9console.log(user.name);

Output

textCopy
1Ankit

You cannot:

• Add properties
• Delete properties
• Modify properties

Object.seal()

Allows updating existing properties but prevents adding or deleting properties.

javascriptCopy
1const user = {
2    name: "Ankit"
3};
4
5Object.seal(user);
6
7user.name = "Rahul";
8
9console.log(user);

Output

textCopy
1{
2    name: "Rahul"
3}

Object.keys()

Returns an array of property names.

javascriptCopy
1const user = {
2    name: "Ankit",
3    age: 23
4};
5
6console.log(Object.keys(user));

Output

textCopy
1["name", "age"]

Object.values()

Returns an array of values.

javascriptCopy
1console.log(Object.values(user));

Output

textCopy
1["Ankit", 23]

Object.entries()

Returns key-value pairs.

javascriptCopy
1console.log(Object.entries(user));

Output

textCopy
1[
2  ["name","Ankit"],
3  ["age",23]
4]

Useful for loops.

javascriptCopy
1for (const [key, value] of Object.entries(user)) {
2
3    console.log(key, value);
4
5}

Object Destructuring

Extract properties into variables.

javascriptCopy
1const user = {
2
3    name: "Ankit",
4    age: 23
5
6};
7
8const { name, age } = user;
9
10console.log(name);
11console.log(age);

Output

textCopy
1Ankit
223

Rename Variables

javascriptCopy
1const {
2
3    name: username
4
5} = user;
6
7console.log(username);

Default Values

javascriptCopy
1const {
2
3    city = "Delhi"
4
5} = user;
6
7console.log(city);

Spread Operator with Objects

Creates shallow copies or merges objects.

javascriptCopy
1const user = {
2
3    name: "Ankit"
4
5};
6
7const profile = {
8
9    ...user,
10    age: 23
11
12};
13
14console.log(profile);

Output

textCopy
1{
2    name: "Ankit",
3    age: 23
4}

Rest Operator with Objects

Collect remaining properties.

javascriptCopy
1const user = {
2
3    name: "Ankit",
4    age: 23,
5    city: "Delhi"
6
7};
8
9const {
10
11    name,
12    ...others
13
14} = user;
15
16console.log(others);

Output

textCopy
1{
2    age: 23,
3    city: "Delhi"
4}

Object Comparison

javascriptCopy
1const a = {
2    name: "Ankit"
3};
4
5const b = {
6    name: "Ankit"
7};
8
9console.log(a === b);

Output

textCopy
1false

Objects are compared by reference, not by value.

Shallow Copy vs Deep Copy

Shallow Copy

javascriptCopy
1const copy = { ...user };

or

javascriptCopy
1Object.assign({}, user);

Deep Copy

javascriptCopy
1const deepCopy = structuredClone(user);

Modern browsers also support structuredClone() for deep cloning of many object types.

Best Practices

• Prefer object literals ({}) for creating objects.
• Use descriptive property names.
• Use regular functions for object methods that rely on this.
• Use Object.freeze() for immutable configuration objects.
• Use Object.seal() when updates are allowed but structure should remain fixed.
• Use destructuring for cleaner code.
• Use the spread operator to create copies instead of modifying original objects.
• Avoid mutating shared objects when possible.

Mini Project — Employee Management System

index.html

htmlCopy
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Employee Management</title>
6</head>
7<body>
8
9<h2>Employee Details</h2>
10
11<div id="output"></div>
12
13<script src="script.js"></script>
14
15</body>
16</html>

script.js

javascriptCopy
1const employee = {
2    id: 101,
3    name: "Ankit",
4    department: "Engineering",
5    salary: 75000,
6
7    getInfo() {
8        return `${this.name} - ${this.department}`;
9    }
10};
11
12const profile = {
13    ...employee,
14    experience: 3
15};
16
17const output = document.getElementById("output");
18
19output.innerHTML = `
20    <h3>${profile.getInfo()}</h3>
21    <p>ID: ${profile.id}</p>
22    <p>Salary: ₹${profile.salary}</p>
23    <p>Experience: ${profile.experience} Years</p>
24`;
25
26console.log(Object.keys(profile));
27console.log(Object.values(profile));
28console.log(Object.entries(profile));

Professional Example — Parsing API Response

javascriptCopy
1async function loadUser() {
2    const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
3    const user = await response.json();
4
5    const {
6        name,
7        email,
8        address: { city }
9    } = user;
10
11    console.log(name);
12    console.log(email);
13    console.log(city);
14}
15
16loadUser();

This demonstrates object destructuring with nested properties, a pattern commonly used in REST APIs and frontend frameworks like React and Next.js.

Summary

In this module, you learned:

• What JavaScript objects are and how to create them.
• How to work with object properties and methods.
• How the this keyword behaves in regular and arrow functions.
• How prototypes and prototype inheritance enable object reuse.
• How to use Object.create() and Object.assign().
• The differences between Object.freeze() and Object.seal().
• How to retrieve keys, values, and entries using built-in object methods.
• How object destructuring simplifies property extraction.
• How the spread and rest operators work with objects.
• Why objects are compared by reference rather than value.
• The difference between shallow and deep copies.
• Professional patterns for working with API responses and object-based application state.

Next Module: Arrays & Array Methods, where you'll learn every important array operation used in professional JavaScript development, including map(), filter(), reduce(), find(), sort(), flat(), flatMap(), every(), some(), splice(), slice(), concat(), and many more. This module is essential for building modern web applications with React, Next.js, Node.js, and other JavaScript frameworks.