# Arrays and Objects in JavaScript – Working with Data

When you start writing real JavaScript code, you quickly realize one thing:

👉 **Almost everything is data**

And JavaScript mainly stores data using:

* **Arrays**
    
* **Objects**
    

In this blog, we’ll learn:

* What arrays are and how to use them
    
* What objects are and how to work with them
    
* Different ways to loop over arrays & objects
    
* How `map`, `filter`, and `reduce` work  
    All explained in a **very simple and practical way**.
    

## Real-Life Analogy 🧠

Think of:

* **Array** → a *list*
    
* **Object** → a *record with labels*
    

Example:

* Shopping list → Array
    
* Person details form → Object
    

## JavaScript Arrays 101 🍎🍌🍇

An **array** is used to store **multiple values in a list**.

### Example: Array of Fruits

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

* Index starts from `0`
    
* Order matters
    

```javascript
console.log(fruits[0]); // Apple
console.log(fruits[2]); // Mango
```

## Common Array Operations

### Add Items

```javascript
fruits.push("Orange");   // add at end
fruits.unshift("Grapes"); // add at start
```

### Remove Items

```javascript
fruits.pop();   // remove last
fruits.shift(); // remove first
```

## Visual Idea: Array Structure

![https://media.geeksforgeeks.org/wp-content/uploads/20240116154803/JavaScript-Array.webp](https://media.geeksforgeeks.org/wp-content/uploads/20240116154803/JavaScript-Array.webp align="left")

![https://www.javascripttutorial.net/wp-content/uploads/2022/08/JavaScript-Array.svg](https://www.javascripttutorial.net/wp-content/uploads/2022/08/JavaScript-Array.svg align="center")

```javascript
Index →   0        1        2
Value → "Apple" "Banana" "Mango"
```

## Looping Over Arrays 🔁

### 1️⃣ Using `for` loop

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

### 2️⃣ Using `for...of` (Cleaner)

```javascript
for (let fruit of fruits) {
  console.log(fruit);
}
```

### 3️⃣ Using `forEach`

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

## Array Methods You MUST Know ✨

### `map()` – Transform Data

```javascript
const numbers = [1, 2, 3];

const doubled = numbers.map(num => num * 2);
// [2, 4, 6]
```

### `filter()` – Select Data

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

const even = numbers.filter(num => num % 2 === 0);
// [2, 4]
```

### `reduce()` – Combine Data

```javascript
const numbers = [1, 2, 3];

const sum = numbers.reduce((total, num) => total + num, 0);
// 6
```

## Flow Diagram: map, filter, reduce 💡

![https://miro.medium.com/v2/resize%3Afit%3A1400/1%2AQs12tA_G-eO9sJmG72UqjQ.png](https://miro.medium.com/v2/resize%3Afit%3A1400/1%2AQs12tA_G-eO9sJmG72UqjQ.png align="left")

```javascript
Array → map → new array (same length)
Array → filter → smaller array
Array → reduce → single value
```

## Understanding Objects in JavaScript 🧍

An **object** stores data in **key : value** pairs.

### Example: Person Object

```javascript
const person = {
  name: "Arjun",
  age: 22,
  city: "Delhi"
};
```

## Accessing Object Data

```javascript
console.log(person.name);   // Arjun
console.log(person["age"]); // 22
```

## Updating Object Values

```javascript
person.age = 23;
person.country = "India";
```

## Visual Idea: Object Structure

![https://www.freecodecamp.org/news/content/images/2021/07/Blue--Violet-and-Orange-Shapes-Fitness-Influencer-YouTube-Thumbnail-Set--3-.png](https://www.freecodecamp.org/news/content/images/2021/07/Blue--Violet-and-Orange-Shapes-Fitness-Influencer-YouTube-Thumbnail-Set--3-.png align="left")

```javascript
person
 ├─ name: "Arjun"
 ├─ age: 23
 └─ city: "Delhi"
```

## Looping Over Objects 🔄

### Using `for...in`

```javascript
for (let key in person) {
  console.log(key, person[key]);
}
```

### Using `Object.keys`

```javascript
Object.keys(person).forEach(key => {
  console.log(key, person[key]);
});
```

## Arrays vs Objects (Easy Comparison)

| Arrays | Objects |
| --- | --- |
| Ordered list | Unordered data |
| Uses index | Uses keys |
| Best for lists | Best for records |
| `map`, `filter` | `Object.keys()` |

## Real-World Example 🌍

### Array of Users (with Objects)

```javascript
const users = [
  { name: "Aman", age: 20 },
  { name: "Neha", age: 25 }
];
```

### Get Names Only

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

### Get Users Above 21

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

## Common Beginner Mistakes ❌

* Using array when object is needed
    
* Forgetting arrays start from index `0`
    
* Mutating data without realizing
    
* Confusing `map` with `forEach`