# JavaScript Arrays 101

> *You've got 5 subjects, 10 friends, 100 products. Are you going to make 100 variables? Didn't think so.*

* * *

## 1\. The Problem Arrays Solve

Imagine you're building a marks tracker for your class. Without arrays, you'd do this:

```js
let marks1 = 88;
let marks2 = 92;
let marks3 = 76;
let marks4 = 95;
let marks5 = 81;
```

Five variables. Fine. But what about 40 students? 400? That's not code — that's chaos.

Arrays fix this. One variable. All the values. In order.

```js
let marks = [88, 92, 76, 95, 81];
```

Clean. Scalable. That's the entire pitch.

* * *

## 2\. What Is an Array?

An array is a **collection of values stored in order**, all under one variable name.

Think of it like a row of labeled boxes:

```plaintext
Index:  [0]   [1]   [2]   [3]   [4]
Value:  88    92    76    95    81
```

Each value has a position — called an **index** — starting from **0**, not 1. This trips up every beginner exactly once. Then it's muscle memory.

Arrays can hold anything — numbers, strings, booleans, even other arrays:

```js
let fruits = ["mango", "apple", "banana"];
let mixed  = [42, "hello", true, null];
```

* * *

## 3\. How to Create an Array

Two common ways:

**Using square brackets (preferred):**

```js
let movies = ["Interstellar", "RRR", "Inception", "KGF", "Dune"];
```

**Using the Array constructor (less common):**

```js
let movies = new Array("Interstellar", "RRR", "Inception", "KGF", "Dune");
```

Stick with square brackets. It's shorter, cleaner, and what everyone actually uses.

You can also create an empty array and fill it later:

```js
let tasks = [];
tasks[0] = "Write article";
tasks[1] = "Push to GitHub";
```

* * *

## 4\. Accessing Elements Using Index

To get a value out of an array, use its index inside square brackets:

```js
let fruits = ["mango", "apple", "banana", "grapes", "orange"];

console.log(fruits[0]); // "mango"   ← first element
console.log(fruits[2]); // "banana"  ← third element
console.log(fruits[4]); // "orange"  ← last element
```

**Getting the last element:**

When you don't know the length, use `length - 1`:

```js
console.log(fruits[fruits.length - 1]); // "orange"
```

**What if you go out of bounds?**

```js
console.log(fruits[10]); // undefined ← no error, just undefined
```

JavaScript won't throw an error — it'll quietly return `undefined`. Keep this in mind when debugging.

* * *

## 5\. Updating Elements

Updating is the same syntax as accessing — just add an assignment:

```js
let fruits = ["mango", "apple", "banana"];

fruits[1] = "kiwi"; // Replace "apple" with "kiwi"

console.log(fruits); // ["mango", "kiwi", "banana"]
```

You're directly targeting a slot by its index and replacing whatever was there.

* * *

## 6\. The `length` Property

`length` tells you how many elements are in the array:

```js
let fruits = ["mango", "apple", "banana", "grapes", "orange"];

console.log(fruits.length); // 5
```

Note: `length` is always **1 more than the last index** — because indexing starts at 0.

```plaintext
Last index = 4
Length     = 5
```

This is why the last element is always at `array[array.length - 1]`.

* * *

## 7\. Looping Over Arrays

The real power of arrays shows up when you loop through them. Instead of printing each element manually, let the loop do the work.

**Using a** `for` **loop:**

```js
let fruits = ["mango", "apple", "banana", "grapes", "orange"];

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

// mango
// apple
// banana
// grapes
// orange
```

`i` starts at 0, goes up by 1 each time, and stops before it hits `fruits.length`. It visits every index exactly once.

**Using** `for...of` **(cleaner, no index needed):**

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

Same output. When you don't need the index number, `for...of` is much easier to read.

* * *

## 8\. Putting It All Together (Assignment)

```js
// 1. Create an array of 5 favorite movies
let movies = ["Interstellar", "RRR", "Inception", "KGF", "Dune"];

// 2. Print the first and last element
console.log("First:", movies[0]);                    // Interstellar
console.log("Last:", movies[movies.length - 1]);     // Dune

// 3. Change one value and print updated array
movies[2] = "3 Idiots";
console.log("Updated:", movies);
// ["Interstellar", "RRR", "3 Idiots", "KGF", "Dune"]

// 4. Loop through the array and print all elements
console.log("\nAll movies:");
for (let i = 0; i < movies.length; i++) {
  console.log(i + 1 + ". " + movies[i]);
}

// 1. Interstellar
// 2. RRR
// 3. 3 Idiots
// 4. KGF
// 5. Dune
```

* * *

## Quick Recap

*   An array stores **multiple values in one variable**, in order
    
*   Indexing starts at **0**, not 1
    
*   Access with `array[index]`, update with `array[index] = newValue`
    
*   `array.length` gives the count of elements
    
*   Use `for` or `for...of` to loop through every element
    

Once arrays click, you'll wonder how you ever wrote code without them.

* * *

*Got questions? Drop them in the comments. Happy coding! 🚀*