JavaScript Arrays 101 📋

Imagine you need to store the names of five students. You could create five separate variables but what happens when there are fifty? Or five hundred? There's a much better way, and it's called an array.

---

What Is an Array?

An array is an ordered collection of values stored under a single variable name. Instead of creating a separate variable for each item, you group them all together in one place.

Without an array:

// Storing 5 fruits separately 😫
const fruit1 = "apple";
const fruit2 = "banana";
const fruit3 = "cherry";
const fruit4 = "mango";
const fruit5 = "grape";

With an array:

// All 5 fruits in one place ✅
const fruits = ["apple", "banana", "cherry", "mango", "grape"];

One variable. All five values. Ordered, accessible, and easy to work with.

---

How to Create an Array

Use square brackets [] and separate values with commas:

// Array of strings
const cities = ["Mumbai", "Delhi", "Pune", "Chennai"];

// Array of numbers
const marks = [88, 92, 76, 95, 84];

// Array of booleans
const answers = [true, false, true, true];

// Mixed types (valid, but uncommon)
const mixed = ["Alice", 25, true];

An array can hold any data type : strings, numbers, booleans, even other arrays.

---

Accessing Elements by Index

Every item in an array has a position called an index. Indexes start at 0, not 1.

Array:   ["apple", "banana", "cherry", "mango", "grape"]
Index:      0         1         2        3        4

Visualized as storage blocks:

To read a specific element, write the array name followed by the index in square brackets:

const fruits = ["apple", "banana", "cherry", "mango", "grape"];

console.log(fruits[0]); // "apple"   ← first element
console.log(fruits[1]); // "banana"
console.log(fruits[2]); // "cherry"
console.log(fruits[4]); // "grape"   ← last element

console.log(fruits[9]); // undefined ← index doesn't exist

⚠️ The zero-index rule is one of the most common sources of confusion for beginners. The first item is always at index 0, not 1. The last item in a 5-element array is at index 4.

---

The length Property

Every array has a length property that tells you how many elements it contains.

const fruits = ["apple", "banana", "cherry", "mango", "grape"];

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

A very common pattern — accessing the last element using length:

const fruits = ["apple", "banana", "cherry", "mango", "grape"];

const lastIndex   = fruits.length - 1;  // 5 - 1 = 4
const lastElement = fruits[lastIndex];

console.log(lastElement); // "grape"

// Or in one line:
console.log(fruits[fruits.length - 1]); // "grape"

This works for any array, no matter how many items it has.

---

Updating Elements

You can change any element by assigning a new value to its index:

const fruits = ["apple", "banana", "cherry"];
console.log(fruits); // ["apple", "banana", "cherry"]

fruits[1] = "blueberry"; // update index 1
console.log(fruits); // ["apple", "blueberry", "cherry"]

Before and after:

Before:  ["apple", "banana", "cherry"]
                      ↑
               fruits[1] = "blueberry"
                      ↓
After:   ["apple", "blueberry", "cherry"]

You can also add a new element at the end by assigning to the next available index:

const fruits = ["apple", "banana"];

fruits[2] = "cherry"; // add at index 2
console.log(fruits);  // ["apple", "banana", "cherry"]

---

Looping Over an Array

Arrays and loops are made for each other. Instead of manually accessing each index, you let a loop handle it.

Using a for loop

const fruits = ["apple", "banana", "cherry", "mango", "grape"];

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

// Output:
// apple
// banana
// cherry
// mango
// grape

Step by step for i = 0, 1, 2, 3, 4:

i = 0 → fruits[0] → "apple"
i = 1 → fruits[1] → "banana"
i = 2 → fruits[2] → "cherry"
i = 3 → fruits[3] → "mango"
i = 4 → fruits[4] → "grape"
i = 5 → 5 < 5 is false → loop stops

Using for...of — cleaner for simple loops

When you just need the value (not the index), for...of is more readable:

const fruits = ["apple", "banana", "cherry", "mango", "grape"];

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

// Output: same as above

💡 When to use which:

• Use for when you need the index (e.g., to update elements or compare positions)

• Use for...of when you just need the value and don't care about the index

---

Putting It All Together

// Create
const movies = ["Inception", "Interstellar", "The Dark Knight", "Dunkirk", "Tenet"];

// Access
console.log(movies[0]);                  // "Inception"   ← first
console.log(movies[movies.length - 1]);  // "Tenet"       ← last

// Length
console.log("Total movies:", movies.length); // 5

// Update
movies[2] = "Oppenheimer";
console.log(movies); // ["Inception", "Interstellar", "Oppenheimer", "Dunkirk", "Tenet"]

// Loop
for (let movie of movies) {
  console.log("🎬 " + movie);
}
// 🎬 Inception
// 🎬 Interstellar
// 🎬 Oppenheimer
// 🎬 Dunkirk
// 🎬 Tenet

---

Quick Reference

// Create
const arr = ["a", "b", "c"];

// Access
arr[0]              // first element → "a"
arr[arr.length - 1] // last element  → "c"

// Length
arr.length          // 3

// Update
arr[1] = "z";       // arr is now ["a", "z", "c"]

// Loop (with index)
for (let i = 0; i < arr.length; i++) {
  console.log(i, arr[i]);
}

// Loop (value only)
for (let item of arr) {
  console.log(item);
}

---

Wrapping Up

Arrays are one of the most essential tools in JavaScript. You'll use them in almost every program you write.

Here's what to carry forward:

• An array stores multiple values in order under one variable name

• Items are accessed by index, which starts at 0

• The last element is always at index arr.length - 1

• Update any element by assigning a new value to its index

• Use a for loop when you need the index, and for...of when you just need the value

Open your console, create an array of your favorite movies or cities, and practice accessing, updating, and looping. It's the kind of thing that clicks fast once your hands are on it. 🚀