JavaScript Arrays 101

Imagine you want to store the names of five fruits in JavaScript. Without arrays, you'd write this:

const fruit1 = "Apple";
const fruit2 = "Banana";
const fruit3 = "Mango";
const fruit4 = "Orange";
const fruit5 = "Grapes";

That's five separate variables for five values. What if you had 50? Or 500? Arrays solve this problem by letting you store a whole list of values under a single name.

---

What Is an Array?

An array is an ordered collection of values, stored together under one variable name. Think of it like a numbered shelf in a library — each slot has a position, and you can put any value in any slot.

shelf:  [ "Apple",  "Banana",  "Mango",  "Orange",  "Grapes" ]
slot:       0          1          2          3           4

The position of each item is called its index. Indexes always start at 0 — not 1.

---

Creating an Array

Use square brackets [] with values separated by commas:

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

Arrays can hold any data type — strings, numbers, booleans, or even a mix:

const marks    = [88, 92, 76, 95, 81];
const tasks    = ["Buy milk", "Study JS", "Go for a run"];
const mixed    = ["Alice", 25, true];       // totally valid
const empty    = [];                        // an empty array

---

Accessing Elements by Index

Use the array name followed by the index inside square brackets:

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

console.log(fruits[0]);  // "Apple"   ← first element
console.log(fruits[1]);  // "Banana"
console.log(fruits[4]);  // "Grapes"  ← last element
console.log(fruits[9]);  // undefined ← index doesn't exist

The first element is always at index 0. If your array has 5 items, the last one is at index 4 (length minus 1).

Accessing the last element

const last = fruits[fruits.length - 1];
console.log(last); // "Grapes"

This works no matter how long the array is — a handy pattern to memorise.

---

The length Property

Every array has a built-in .length property that tells you how many items it contains:

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

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

Note: .length gives the count of items, not the last index. With 5 items, the last index is 4.

console.log(fruits.length);      // 5
console.log(fruits[fruits.length - 1]); // "Grapes" (last item)

---

Updating Elements

Reassign a value at a specific index:

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

fruits[1] = "Strawberry";

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

Even though fruits is declared with const, you can still change its contents. const prevents you from replacing the entire array — not from modifying what's inside it.

fruits = ["Kiwi"];     //  Error — cannot reassign const
fruits[0] = "Kiwi";   //  Fine — updating an element

---

Adding Elements

Add to the end — push()

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

fruits.push("Mango");

console.log(fruits); // ["Apple", "Banana", "Mango"]
console.log(fruits.length); // 3

Add to the beginning — unshift()

fruits.unshift("Grapes");

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

---

Looping Over Arrays

The real power of arrays comes when you loop over them to process every item.

for loop — classic and explicit

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

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

// 0: Apple
// 1: Banana
// 2: Mango
// 3: Orange
// 4: Grapes

for...of loop — cleaner, reads like English

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

// Apple
// Banana
// Mango
// Orange
// Grapes

Use for...of when you just need the values. Use the classic for loop when you also need the index.

---

Storing Variables vs Arrays — Side by Side

//  Without an array — messy, hard to scale
const movie1 = "Inception";
const movie2 = "Interstellar";
const movie3 = "The Dark Knight";

//  With an array — clean, easy to loop, easy to expand
const movies = ["Inception", "Interstellar", "The Dark Knight"];

console.log(movies[0]);       // "Inception"
console.log(movies.length);   // 3

for (const movie of movies) {
  console.log(movie);
}

---

Quick Reference

Action	Code	Result
Create	const a = [1, 2, 3]	Array of 3 numbers
Access first	a[0]	1
Access last	a[a.length - 1]	3
Update	a[1] = 99	[1, 99, 3]
Count items	a.length	3
Add to end	a.push(4)	[1, 99, 3, 4]
Add to start	a.unshift(0)	[0, 1, 99, 3, 4]
Loop values	for (const x of a)	each item in turn
Loop with index	for (let i = 0; i < a.length; i++)	index + item

---