4.10 Objects & Arrays

Updated Jul 24, 2026

4.10 Objects & Arrays

Updated Jul 24, 2026

4.10 Objects & Arrays

Objects and Arrays are two of the most commonly used data structures in JavaScript.

They allow us to store, organize, access, and manipulate data.

Examples:

const user = {
    name: "Samir",
    age: 21
};

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

Think of them like this:

Object
↓
Stores related information

Array
↓
Stores a list of values

Objects

An Object is a collection of related data stored as key-value pairs.

Example:

const user = {
    name: "Samir",
    age: 21,
    city: "Jhapa"
};

Here:

name → "Samir"
age  → 21
city → "Jhapa"

name, age, and city are called properties or keys.

Why Objects?

Without an object:

const name = "Samir";
const age = 21;
const city = "Jhapa";

These variables are related, but they are stored separately.

Using an object:

const user = {
    name: "Samir",
    age: 21,
    city: "Jhapa"
};

Now all information about the user is grouped together.

user
│
├── name → Samir
├── age  → 21
└── city → Jhapa

Object Syntax

Basic syntax:

const objectName = {
    key: value,
    key2: value2
};

Example:

const user = {
    name: "Samir",
    age: 21,
    isStudent: true
};

Objects can contain different data types:

const user = {
    name: "Samir",
    age: 21,
    isStudent: true,
    skills: ["HTML", "CSS", "JavaScript"]
};

Accessing Object Properties

There are two common ways to access object properties:

Dot Notation
Bracket Notation

Dot Notation

The most common method is dot notation.

const user = {
    name: "Samir",
    age: 21
};

console.log(user.name);

Output:

Samir

Another example:

console.log(user.age);

Output:

Syntax:

object.property

Bracket Notation

Properties can also be accessed using brackets.

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

Output:

Samir

Example:

console.log(
    user["age"]
);

Output:

Syntax:

object["property"]

Bracket notation is especially useful when the property name comes from a variable.

const property = "name";

console.log(
    user[property]
);

Output:

Samir

Dot vs Bracket Notation

Dot Notation	Bracket Notation
`user.name`	`user["name"]`
Cleaner syntax	Supports dynamic keys
Most commonly used	Useful with variables

Example:

const key = "age";

console.log(
    user[key]
);

Updating Properties

Object properties can be changed.

const user = {
    name: "Samir",
    age: 21
};

user.age = 22;

Now:

console.log(user.age);

Output:

The object becomes:

{
    name: "Samir",
    age: 22
}

Adding Properties

New properties can be added after an object is created.

const user = {
    name: "Samir"
};

user.country = "Nepal";

The object becomes:

{
    name: "Samir",
    country: "Nepal"
}

Another example:

user.age = 21;

Now:

{
    name: "Samir",
    country: "Nepal",
    age: 21
}

Deleting Properties

Use the delete operator to remove a property.

const user = {
    name: "Samir",
    age: 21
};

delete user.age;

Now:

console.log(user);

Result:

{
    name: "Samir"
}

Object Methods

Objects can also contain functions.

A function stored inside an object is called a method.

Example:

const user = {
    name: "Samir",

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

Calling the method:

user.greet();

Output:

Hello

Methods Using Object Data

Methods can access properties using this.

const user = {
    name: "Samir",

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

user.greet();

Output:

Hello Samir

Here:

this.name
↓
user.name

Nested Objects

Objects can contain other objects.

Example:

const user = {
    name: "Samir",

    address: {
        city: "Jhapa",
        country: "Nepal"
    }
};

Visual:

user
│
├── name → Samir
│
└── address
     │
     ├── city    → Jhapa
     └── country → Nepal

Access the city:

console.log(
    user.address.city
);

Output:

Jhapa

Access country:

console.log(
    user.address.country
);

Output:

Nepal

Objects Inside Objects

Objects can be nested multiple levels.

const user = {
    name: "Samir",

    address: {
        city: "Jhapa",

        location: {
            country: "Nepal"
        }
    }
};

Access:

console.log(
    user.address.location.country
);

Output:

Nepal

Arrays

An Array stores multiple values in a single variable.

Example:

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

Visual:

fruits
│
├── Apple
├── Mango
└── Banana

Arrays are useful for storing lists.

Examples:

Users
Products
Students
Messages
Orders
Posts
Images

Why Arrays?

Without an array:

const fruit1 = "Apple";
const fruit2 = "Mango";
const fruit3 = "Banana";

Using an array:

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

Now all the values are grouped together.

Array Syntax

Basic syntax:

const arrayName = [
    value1,
    value2,
    value3
];

Example:

const colors = [
    "Red",
    "Blue",
    "Green"
];

Arrays can contain different data types:

const values = [
    "Samir",
    21,
    true
];

Array Indexes

Array elements are accessed using indexes.

Indexes start from:

Example:

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

Indexes:

Index     Value

  0       Apple
  1       Mango
  2       Banana

Visual:

fruits
│
├── [0] → Apple
├── [1] → Mango
└── [2] → Banana

Accessing Array Elements

Use the index:

console.log(
    fruits[0]
);

Output:

Apple

Second element:

console.log(
    fruits[1]
);

Output:

Mango

Third element:

console.log(
    fruits[2]
);

Output:

Banana

Updating Array Elements

Array elements can be changed using their index.

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

fruits[1] = "Orange";

Now:

[
    "Apple",
    "Orange",
    "Banana"
]

Array Length

The length property returns the number of elements.

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

console.log(
    fruits.length
);

Output:

Adding Elements with `push()`

push() adds an element to the end of an array.

fruits.push("Orange");

Result:

[
    "Apple",
    "Mango",
    "Banana",
    "Orange"
]

Visual:

Before

Apple
Mango
Banana

      ↓ push("Orange")

After

Apple
Mango
Banana
Orange

Removing Elements with `pop()`

pop() removes the last element.

fruits.pop();

Example:

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

fruits.pop();

Result:

[
    "Apple",
    "Mango"
]

Adding at the Beginning with `unshift()`

unshift() adds an element to the beginning.

fruits.unshift(
    "Orange"
);

Result:

[
    "Orange",
    "Apple",
    "Mango",
    "Banana"
]

Removing from the Beginning with `shift()`

shift() removes the first element.

fruits.shift();

Example:

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

fruits.shift();

Result:

[
    "Mango",
    "Banana"
]

Basic Array Methods

Method	Purpose
`push()`	Add to end
`pop()`	Remove from end
`unshift()`	Add to beginning
`shift()`	Remove from beginning

Think of it like:

           ARRAY

unshift() → [ A, B, C ] ← push()

shift()   ← [ A, B, C ] → pop()

Looping Through Arrays

Arrays are commonly used with loops.

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

for (const fruit of fruits) {
    console.log(fruit);
}

Output:

Apple
Mango
Banana

Traditional `for` Loop

You can also use indexes.

for (
    let i = 0;
    i < fruits.length;
    i++
) {
    console.log(
        fruits[i]
    );
}

Output:

Apple
Mango
Banana

Common Array Methods

Modern JavaScript provides powerful methods for working with arrays.

Some of the most important are:

map()
filter()
find()
forEach()
includes()

`map()`

map() transforms every element and creates a new array.

Example:

const numbers = [
    1,
    2,
    3
];

const doubled =
    numbers.map(
        num => num * 2
    );

Output:

Visual:

[1, 2, 3]

     ↓ map()

× 2

     ↓

[2, 4, 6]

map() is extremely common in React.

Example:

const users = [
    "Samir",
    "Ram",
    "Hari"
];

const greetings =
    users.map(
        name => `Hello ${name}`
    );

Result:

[
    "Hello Samir",
    "Hello Ram",
    "Hello Hari"
]

`filter()`

filter() creates a new array containing only elements that match a condition.

Example:

const numbers = [
    1,
    2,
    3,
    4,
    5
];

const even =
    numbers.filter(
        num => num % 2 === 0
    );

Output:

Visual:

[1, 2, 3, 4, 5]

        ↓ filter()

Keep Even Numbers

        ↓

[2, 4]

`find()`

find() returns the first element that matches a condition.

const numbers = [
    1,
    2,
    3,
    4,
    5
];

const result =
    numbers.find(
        num => num > 3
    );

Output:

It stops after finding the first match.

`forEach()`

forEach() runs a function for every element.

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

fruits.forEach(
    fruit => {
        console.log(fruit);
    }
);

Output:

Apple
Mango
Banana

Unlike map(), forEach() is normally used for performing an action rather than creating a transformed array.

`includes()`

Checks whether an array contains a value.

const fruits = [
    "Apple",
    "Mango"
];

console.log(
    fruits.includes("Mango")
);

Output:

true

Arrays of Objects

One of the most common structures in real applications is an array of objects.

Example:

const users = [
    {
        id: 1,
        name: "Samir",
        age: 21
    },
    {
        id: 2,
        name: "Ram",
        age: 22
    },
    {
        id: 3,
        name: "Hari",
        age: 20
    }
];

Visual:

users
│
├── [0]
│    ├── id   → 1
│    ├── name → Samir
│    └── age  → 21
│
├── [1]
│    ├── id   → 2
│    ├── name → Ram
│    └── age  → 22
│
└── [2]
     ├── id   → 3
     ├── name → Hari
     └── age  → 20

This structure is extremely common in API responses.

Finding an Object in an Array

const user =
    users.find(
        user => user.id === 1
    );

Result:

{
    id: 1,
    name: "Samir",
    age: 21
}

Filtering Objects

Example:

const adults =
    users.filter(
        user => user.age >= 21
    );

This creates a new array containing matching users.

Mapping Objects

Suppose we only need user names:

const names =
    users.map(
        user => user.name
    );

Result:

[
    "Samir",
    "Ram",
    "Hari"
]

This pattern is extremely common in modern frontend development.

JSON

JSON stands for:

JavaScript Object Notation

JSON is a text-based format commonly used for exchanging data between systems.

Common flow:

Frontend
    ↓
API
    ↓
Backend
    ↓
Database

Servers frequently send data to frontends as JSON.

JSON Example

{
    "name": "Samir",
    "age": 21
}

Another example:

{
    "id": 1,
    "name": "Samir",
    "skills": [
        "HTML",
        "CSS",
        "JavaScript"
    ]
}

Object vs JSON

JavaScript Object:

const user = {
    name: "Samir",
    age: 21
};

JSON:

{
    "name": "Samir",
    "age": 21
}

Important differences:

JavaScript Object	JSON
JavaScript data structure	Text data format
Keys may omit quotes	Property names require double quotes
Can contain methods	Cannot contain functions
Used directly in JavaScript	Used for data exchange
Supports more JS value types	Supports JSON-compatible values

`JSON.stringify()`

JSON.stringify() converts a JavaScript value into a JSON string.

JavaScript Object
      ↓
JSON.stringify()
      ↓
JSON String

Example:

const user = {
    name: "Samir",
    age: 21
};

const json =
    JSON.stringify(user);

console.log(json);

Output:

{"name":"Samir","age":21}

`JSON.parse()`

JSON.parse() converts a JSON string into a JavaScript value.

JSON String
      ↓
JSON.parse()
      ↓
JavaScript Object

Example:

const json =
    '{"name":"Samir","age":21}';

const user =
    JSON.parse(json);

console.log(user.name);

Output:

Samir

JSON Conversion Flow

Remember:

Object
  ↓
JSON.stringify()
  ↓
JSON String

And:

JSON String
  ↓
JSON.parse()
  ↓
Object

Map

A Map stores key-value pairs like an object.

However, Map keys can be values of any type.

Create a Map:

const users =
    new Map();

Add values:

users.set(
    "name",
    "Samir"
);

users.set(
    "age",
    21
);

Getting Map Values

Use get():

users.get("name");

Output:

Samir

Example:

console.log(
    users.get("age")
);

Output:

Checking Map Keys

Use has():

users.has("name");

Output:

true

Removing Map Values

users.delete("age");

Remove everything:

users.clear();

Map Size

console.log(
    users.size
);

Returns the number of entries.

Map Methods

Method / Property	Purpose
`set()`	Add or update value
`get()`	Retrieve value
`has()`	Check key
`delete()`	Remove entry
`clear()`	Remove everything
`size`	Number of entries

Map vs Object

Object	Map
Common for structured records	Useful for key-value collections
Property keys are strings or symbols	Keys can be any value
Access with `.` or `[]`	Access with `get()`
Add with assignment	Add with `set()`
Very common in APIs	Useful for specialized collections

For most structured application data:

const user = {
    name: "Samir"
};

is usually simpler.

For specialized key-value collections:

const map =
    new Map();

can be more suitable.

Set

A Set stores unique values.

Duplicate values are automatically ignored.

Example:

const numbers =
    new Set([
        1,
        2,
        2,
        3
    ]);

Result:

Set(3) {1, 2, 3}

The duplicate:

appears only once.

Adding Set Values

Use add():

numbers.add(4);

Result:

Checking Set Values

Use has():

numbers.has(2);

Output:

true

Removing Set Values

numbers.delete(2);

Remove everything:

numbers.clear();

Set Size

console.log(
    numbers.size
);

Returns the number of unique values.

Set Methods

Method / Property	Purpose
`add()`	Add value
`delete()`	Remove value
`has()`	Check value
`clear()`	Remove everything
`size`	Number of values

Removing Duplicates Using Set

A common use of Set is removing duplicates from an array.

const numbers = [
    1,
    2,
    2,
    3,
    3,
    4
];

Create a Set:

const unique =
    new Set(numbers);

Result:

Convert back to an array:

const uniqueNumbers = [
    ...new Set(numbers)
];

Result:

Set vs Array

Array	Set
Allows duplicates	Unique values only
Uses indexes	No index-based access
Many transformation methods	Focused on unique collections
Maintains ordered values	Maintains insertion order
Great for lists	Great for uniqueness checks

WeakMap

A WeakMap is similar to a Map, but its keys must be objects or non-registered symbols.

Basic example using an object key:

const weakMap =
    new WeakMap();

const user = {};

weakMap.set(
    user,
    "Samir"
);

Retrieve:

weakMap.get(user);

Output:

Samir

WeakMap Characteristics

Object / eligible symbol keys
        ↓
Weakly Referenced
        ↓
Garbage Collection Friendly

Important characteristics:

Keys are weakly held
Commonly uses objects as keys
Not iterable
Does not provide size
Useful for attaching metadata without keeping objects alive unnecessarily

Why WeakMap?

Consider:

let user = {
    name: "Samir"
};

const data =
    new WeakMap();

data.set(
    user,
    "Private Data"
);

If the object becomes unreachable elsewhere:

user = null;

the WeakMap does not prevent that object from being garbage collected.

This can help with memory-sensitive patterns.

WeakSet

A WeakSet is similar to Set, but it stores only objects and non-registered symbols.

Example using an object:

const weakSet =
    new WeakSet();

const user = {};

weakSet.add(user);

Check:

weakSet.has(user);

Output:

true

WeakSet Characteristics

Stores weakly held objects or eligible symbols
Does not store primitive values such as strings and numbers
Not iterable
Does not provide size
Garbage collection friendly

WeakMap and WeakSet are more advanced structures and are used less frequently than Objects, Arrays, Maps, and Sets.

Real-World Example

Imagine an API returns users:

const users = [
    {
        id: 1,
        name: "Samir",
        role: "admin"
    },
    {
        id: 2,
        name: "Ram",
        role: "user"
    },
    {
        id: 3,
        name: "Hari",
        role: "user"
    }
];

Find one user:

const user =
    users.find(
        user => user.id === 1
    );

Result:

{
    id: 1,
    name: "Samir",
    role: "admin"
}

Filter Users

Get only normal users:

const normalUsers =
    users.filter(
        user =>
            user.role === "user"
    );

Result:

[
    {
        id: 2,
        name: "Ram",
        role: "user"
    },
    {
        id: 3,
        name: "Hari",
        role: "user"
    }
]

Extract User Names

Use map():

const names =
    users.map(
        user => user.name
    );

Result:

[
    "Samir",
    "Ram",
    "Hari"
]

This pattern appears constantly in modern JavaScript applications.

Objects and Arrays in React

React applications frequently receive data like:

const products = [
    {
        id: 1,
        name: "Laptop",
        price: 80000
    },
    {
        id: 2,
        name: "Mouse",
        price: 1500
    }
];

Then render it using:

products.map(
    product => {
        return (
            <div key={product.id}>
                {product.name}
            </div>
        );
    }
);

The general pattern is:

API
 ↓
JSON
 ↓
JavaScript Objects
 ↓
Arrays
 ↓
map()
 ↓
UI

Choosing the Right Structure

Use an Object when storing related properties:

const user = {
    name: "Samir",
    age: 21
};

Use an Array when storing a list:

const users = [
    "Samir",
    "Ram",
    "Hari"
];

Use a Map when you need a dedicated key-value collection with flexible key types:

const map =
    new Map();

Use a Set when values should be unique:

const ids =
    new Set();

WeakMap and WeakSet are mainly useful for more specialized memory-management patterns.

Summary

Concept	Purpose
Object	Store related key-value data
Property	Value belonging to an object
Method	Function belonging to an object
Nested Object	Object inside another object
Array	Store ordered lists
Index	Position of array element
`push()`	Add to end
`pop()`	Remove from end
`shift()`	Remove from beginning
`unshift()`	Add to beginning
`map()`	Transform array
`filter()`	Select matching elements
`find()`	Find first matching element
`forEach()`	Process each element
JSON	Text-based data exchange format
`JSON.stringify()`	JavaScript value → JSON string
`JSON.parse()`	JSON string → JavaScript value
Map	Key-value collection
Set	Unique-value collection
WeakMap	Weakly held key-value collection
WeakSet	Weakly held collection

Key Takeaway

JavaScript applications heavily rely on Objects and Arrays.

Object
   ↓
Store Related Data

Array
   ↓
Store Lists

JSON
   ↓
Transfer Data
Between Systems

Map
   ↓
Flexible Key-Value
Collection

Set
   ↓
Store Unique Values

WeakMap / WeakSet
   ↓
Specialized Weak
Collections

A typical modern frontend application works like this:

Backend / API
      ↓
JSON Response
      ↓
JavaScript Object
      ↓
Array of Objects
      ↓
map() / filter() / find()
      ↓
Application Logic
      ↓
UI Rendering

For example:

const users = [
    {
        id: 1,
        name: "Samir"
    },
    {
        id: 2,
        name: "Ram"
    }
];

const names =
    users.map(
        user => user.name
    );

console.log(names);

Output:

[
    "Samir",
    "Ram"
]

Understanding Objects, Arrays, and their methods is essential because React state, API responses, database records, user data, products, orders, and almost every modern JavaScript application are built around these structures.

4.10 Objects & Arrays

Updated Jul 24, 2026

4.10 Objects & Arrays

Updated Jul 24, 2026