JavaScript Arrays 101

Introduction: A Relatable Problem First

Imagine you want to store:

• A list of fruits 🍎🍌🍇

• Marks of a student 📊

• Daily tasks 📝

Something like this pretty straightforward. But now imagine a slightly different situation. Suppose you want to store five favorite fruits.

Without arrays, you might do this:

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

Now imagine the list grows to 20 fruits 😵
Managing individual variables becomes messy, confusing, and inefficient.

This is exactly where arrays come to the rescue.

---

What Are Arrays and Why Do We Need Them?

What is an Array?

An array is a collection of values stored together in a specific order.

Think of an array as:

• A box with compartments

• Each compartment stores one value

• Every compartment has a number (index)

Real-Life Example

Fruit Basket: Apple | Banana | Mango

Instead of separate baskets, we keep everything in one basket → that basket is an array.

---

Without Array store value like this.

let mark1 = 85;
let mark2 = 90;
let mark3 = 78;

With Array (Good Practice)

let marks = [85, 90, 78];

- Cleaner
- Easier to manage
- Easier to loop over
- Scales well

---

How to Create an Array in JavaScript

Creating an aray in JavaScript is very simple. We use square brackets []

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

Here we created an array called furits inside those brackets, we place the values separated by commas. So this array contains four values.

Instead of creating four separate variables, everything is now inside one array.

See simple that's it...

Array with Numbers

let scores = [10, 20, 30, 40];

Mixed Data Types (Allowed in JavaScript)

let mixed = ["Asad", 25, true];

📌 JavaScript arrays are flexible — they can store different types of values.

---

Understanding Array Index

Index Always Starts from 0

This is one of the most confusing parts for beginners, so read carefully.

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

Index	Value
0	Apple
1	Banana
2	Mango

So the first element is at index 0, the second at 1, & so on...

---

Visual representation of array index and values

Index:       0            1            2
        ┌─────┐ ┌──────┐ ┌─────┐
Array → |Apple|      |Banana|      |Mango|
        └─────┘ └──────┘ └─────┘

---

Accessing Elements Using Index

Now the question is how do we get a value from the array?
We use the index.

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

console.log(fruits[0]); // Apple

Why?
Because index 0 stores "Apple"

let's try another one:

console.log(fruits[3]); // Orange

because "Orange" is stored at index 3. So whenever we want to access an element from an array, we simply use:

arrayName[index]

Example:

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

console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana
console.log(fruits[2]); // Mango

Accessing Non-Existing Index

console.log(fruits[5]); // undefined

📌 If the index doesn’t exist, JavaScript returns undefined.

---

Updating Elements in an Array

Arrays are mutable, meaning you can change values after creation.

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

fruits[1] = "Orange";

console.log(fruits);
// ["Apple", "Orange", "Mango"]

✔ We replaced Banana with Orange

So the value at index 1 has changed. This makes arrays very flexible.

---

Array Length Property

Every array has a built-in property called .length.

What does it do?

It tells how many elements are in the array.

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

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

|- Length is count, not index

|- Last index = length - 1

---

Getting the Last Element (Important Trick)

let lastFruit = fruits[fruits.length - 1];
console.log(lastFruit); // Mango

---

Basic Looping Over Arrays

When you want to process every element, loops are your best friend.

Using for Loop (Beginner Friendly)

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

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

What’s Happening Here?

• Start from index 0

• Go till last index

• Print each element one by one

---

Memory-style block diagram for array storage

Memory Blocks:

┌────────┐
   | Apple  | ← index 0
├────────┤
   | Banana | ← index 1
├────────┤
   | Mango  | ← index 2
└────────┘

---

Assignment (Practice is Mandatory)

Let's try a small exercise to practice what we have learned so far.

Task: JavaScript Array Practice

1. Create an array of 5 favorite movies

let movies = ["Inception", "Interstellar", "3 Idiots", "Dangal", "Jawan"];

1. Print the first and last element

console.log(movies[0]);
console.log(movies[movies.length - 1]);

Why length - 1?
Because arrays start from index 0. So the last element is always length minus one.

1. Change one value and print updated array

movies[2] = "PK";
console.log(movies);

1. Loop through the array and print all elements

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

---

Quick Revision 🧠

✔ Arrays store multiple values in one variable

✔ Indexing starts from 0

✔ Arrays are ordered and mutable

✔ .length tells total elements

✔ Loops help process arrays efficiently

---

Final Words

Arrays are one of the most important building blocks of JavaScript. They allow us to store multiple values in a single variable, keep them in order and access them using indexes.