JavaScript Arrays 101

So far in JavaScript, we've been working with single values.

A name. A number. A status.

let city = "Mumbai";
let temperature = 32;
let country = "USA";

Simple, clean, no complaints.

But now imagine a slightly different situation. You're building a movie watchlist app and you need to store your top 5 movies.

You might try something like this:

let movie1 = "Daredevil";
let movie2 = "Money Heist";
let movie3 = "Dark";
let movie4 = "Joker";
let movie5 = "Avengers";

It works. But it already starts to feel wrong.

What if you want to add a 6th movie? What if you want to print all of them? What if you want to loop through them and find something specific?

console.log(movie1);
console.log(movie2);
console.log(movie3);
console.log(movie4);
console.log(movie5);

Five separate lines just to print five values. Now imagine doing that for 50 movies.

This is exactly the problem arrays solve.

What Are Arrays?

An array is a way to store multiple values together in a single variable.

Instead of creating ten separate variables, you put everything in one place — in order, organized, and easy to work with.

Think of it like a shelf. Each slot on the shelf holds one item. You know exactly which slot to look at to find what you need.

Arrays are perfect for:

• A list of movies, songs, or tasks

• A collection of student marks

• Products in a shopping cart

• Any group of related values

---

How to Create an Array ??

Creating an array in JavaScript is straightforward. You use square brackets [] and separate the values with commas.

const movies = ["Daredevil", "Money Heist", "Dark", "Joker", "Avengers"];

That's it. Five values. One variable.

Compare that to the five separate variables we had before => same data, but now it's organized, and ready to work with.

You can store strings, numbers, booleans — arrays don't care about type:

const scores = [88, 92, 75, 100, 67];
const tasks = ["Buy groceries", "Reply to emails", "Study in Cohort"];

---

Understanding Array Index

Here's the concept that trips up almost every beginner at least once.

Array indexing starts at 0, not 1.

So when we create this array:

const movies = ["Daredevil", "Money Heist", "Dark", "Joker", "Avengers"];

Internally, it looks like this:

Index	Value
0	Daredevil
1	Money Heist
2	Dark
3	Joker
4	Avengers

The first item is at index 0. The second is at index 1. And so on.

This feels counterintuitive at first. But it becomes second nature very quickly — I promise.

---

Accessing Elements from an Array

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

const movies = ["Daredevil", "Money Heist", "Dark", "Joker", "Avengers"];

console.log(movies[0]); // Daredevil
console.log(movies[3]); // Joker

The pattern is simple:

arrayName[index]

Want the first item? movies[0]. Want the fourth? movies[3].

What happens if you try an index that doesn't exist?

console.log(movies[10]); // undefined

JavaScript doesn't throw an error — it just returns undefined. Worth knowing early.

---

Updating Elements in an Array

Arrays are not locked. You can change any value inside them at any time.

To update an element, you just target its index and assign a new value.

const movies = ["Daredevil", "Money Heist", "Dark", "Joker", "Avengers"];

movies[2] = "Spider-Man";

console.log(movies);
// ["Daredevil", "Money Heist", "Spider-Man", "Joker", "Avengers"]

"Dark" was at index 2. We replaced it with "Spider-Man". The rest of the array stays exactly as it was.

One thing beginners ask here — we used const but still changed it. How?

const prevents you from replacing the entire array. But you can still modify what's inside it. The container is locked, not the contents.

movies = ["New", "Array"]; // Error — can't reassign const
movies[0] = "Batman";     // Fine — updating a value inside

---

The length Property

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

const movies = ["Daredevil", "Money Heist", "Dark", "Joker", "Avengers"];

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

This becomes incredibly useful once you start looping — instead of manually counting items, you just check .length.

Here's a trick that comes up constantly: getting the last element.

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

Why length - 1? Because the array has 5 items but the last index is 4. Length is always one ahead of the last index.

---

Looping Through an Array

Most of the time, you don't want just one element — you want to go through all of them.

This is where loops and arrays work together perfectly.

const movies = ["Daredevil", "Money Heist", "Dark", "Joker", "Avengers"];

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

Let's break down what's happening:

• i starts at 0

• The loop runs as long as i is less than movies.length (which is 5)

• Each time, it prints movies[i] — which gives us each element one by one

Output:

Daredevil
Money Heist
Dark
Joker
Avengers

This loop pattern — starting at 0, running while i < array.length — is one of the most used patterns in all of JavaScript. Get comfortable with it.

---

Assignment => try it

// 1. Create an array of 5 favorite movies
const watchlist = ["Inception", "The Batman", "Interstellar", "Parasite", "1917"];

// 2. Print the first and last element
console.log(watchlist[0]);                      // Inception
console.log(watchlist[watchlist.length - 1]);   // 1917

// 3. Update one value and print the array
watchlist[1] = "The Dark Knight";
console.log(watchlist);
// ["Inception", "The Dark Knight", "Interstellar", "Parasite", "1917"]

// 4. Loop through and print all elements
for (let i = 0; i < watchlist.length; i++) {
  console.log(watchlist[i]);
}

Run this on your browser console or VS Code. Then experiment -> add more items, change different indexes, try accessing an index that doesn't exist.

---

Wrapping Up

Arrays are one of the first real data structures you encounter in JavaScript — and one of the most used.

Once you understand that:

• An array stores multiple values in a single variable

• Each value sits at a numbered index starting from 0

• You access, update, and loop through values using that index

• .length tells you how many items are inside

You'll start spotting arrays everywhere. In API responses, in React components, in database queries they're all over the place.