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:

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.

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:

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:

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

---

3. How to Create an Array

Two common ways:

Using square brackets (preferred):

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

Using the Array constructor (less common):

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:

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:

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:

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

What if you go out of bounds?

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:

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:

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.

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:

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):

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)

// 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! 🚀