Objects and Arrays

Objects and arrays are the core data structures of JavaScript. Almost every real-world application, from APIs to UI rendering, depends on them.

• Objects store structured data, where each piece of data has its own name (field).
• Arrays store an ordered list of values.

Understanding how they actually behave in memory is very important for writing code that does not have bugs.

Object vs Array

Object

Key -> Value mapping (no fixed order, you access it by name)

Array

A list with index numbers (has a fixed order, you access it by number)

graph LR A[Data Structure Decision] --> B{Need Named Fields?} B -->|Yes| C[Object] B -->|No| D{Ordered List?} D -->|Yes| E[Array]

Objects: Deep Understanding

const user = {
    id: 101,
    name: "Asha",
    active: true,
};

Access Methods

user.name;
user["active"];

Internal Representation

graph TD A[user object] --> B[id: 101] A --> C[name: Asha] A --> D[active: true]

Arrays: Deep Understanding

const scores = [80, 92, 75, 99];

Access

scores[0]; // 80

Internal Representation

graph TD A[Array] --> B[index 0 -> 80] A --> C[index 1 -> 92] A --> D[index 2 -> 75]

CRUD Operations

Object

const user = { name: "Asha" };

// Create
user.age = 22;

// Read
user.name;

// Update
user.name = "Riya";

// Delete
delete user.age;

Array

const arr = [1, 2];

// Create
arr.push(3);

// Read
arr[0];

// Update
arr[1] = 10;

// Delete
arr.pop();

Iteration Patterns

Object Iteration

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

Array Iteration

arr.forEach((value) => console.log(value));

Built-in Object Methods

Object.keys(obj);
Object.values(obj);
Object.entries(obj);

Built-in Array Methods

arr.map(fn);
arr.filter(fn);
arr.reduce(fn);
arr.find(fn);
arr.some(fn);
arr.every(fn);

map vs filter vs reduce

graph LR A[Array] --> B[map -> transform] A --> C[filter -> select] A --> D[reduce -> aggregate]

Examples

[1, 2, 3]
    .map((x) => x * 2) // [2,4,6]
    [(1, 2, 3)].filter((x) => x > 1) // [2,3]
    [(1, 2, 3)].reduce((a, b) => a + b, 0); // 6

Nested Data

const user = {
    name: "Riya",
    orders: [
        { id: 1, price: 100 },
        { id: 2, price: 200 },
    ],
};

graph TD A[user] --> B[name] A --> C[orders array] C --> D[obj1] C --> E[obj2]

Destructuring

Destructuring is a quick way to pull values out of an object or array and store them in their own variables.

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

const { name, age } = user;

Array Destructuring

const [a, b] = [10, 20];

Spread & Rest

Spread

The spread operator (...) is used to copy or expand the items of an array or object.

const arr = [1, 2];
const newArr = [...arr, 3];

Rest

The rest operator also uses ..., but instead of expanding values, it gathers multiple values together into one array.

function sum(...nums) {
    return nums.reduce((a, b) => a + b, 0);
}

Memory & Reference

const a = { x: 1 };
const b = a;

b.x = 10;

console.log(a.x); // 10

Here, a and b are both pointing to the exact same object in memory. So changing the object through b also changes what you see through a.

graph LR A[a] --> C[Memory Object] B[b] --> C

Shallow vs Deep Copy

A shallow copy only copies the first, outer layer of data. A deep copy goes further and copies everything inside as well, including nested objects.

// for objects
const copy = { ...obj }; // shallow
const deepCopy = JSON.parse(JSON.stringify(obj)); // deep

// for arrays
const arrCopy = [...arr]; // shallow
const deepArrCopy = arr.map((item) => ({ ...item })); // deep for array of objects

When to Use What

1. Use an object for structured data, like a single user or a single product.
2. Use an array for collections, like a list of items.
3. Use an array of objects when working with data from APIs.
4. Avoid mutating (changing) references that are shared in more than one place.

Common Mistakes

const arr = [1, 2];
const copy = arr;

copy.push(3);

Here, arr and copy are both pointing to the exact same memory location, so changing one ends up changing the other as well.