When you start writing programs, you often need to store multiple values that belong together.

For example, imagine you want to store:

• A list of fruits

• A list of student marks

• A list of tasks for the day

You could create separate variables for each item, but that quickly becomes messy.

Instead of doing this:

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

JavaScript provides a much cleaner solution: arrays.

Arrays allow us to store multiple values inside a single variable.

---

What Arrays Are and Why We Need Them

An array is a collection of values stored in order.

Think of it like a numbered list. Each item has a position in the list, and that position allows us to access it later.

Example:

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

Here we created an array named fruits containing three values.

Instead of managing multiple variables, everything is stored in one structure.

Arrays are commonly used to store things like:

• Lists of users

• Product names

• Scores

• Messages

• Tasks

---

How to Create an Array

Arrays are created using square brackets [].

Example:

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

Another example:

const marks = [75, 82, 90, 68];

An array can contain many elements, and JavaScript allows different types of values inside the same array if needed.

---

Accessing Elements Using Index

Each element inside an array has a position number, called an index.

One important thing to remember is:

Array indexing starts from 0, not 1.

Example array:

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

The index positions look like this:

Index:   0        1        2
Value: "Apple" "Banana" "Orange"

Accessing elements:

console.log(fruits[0]);

Output:

Apple

Another example:

console.log(fruits[1]);

Output:

Banana

---

Updating Elements in an Array

Array elements can be changed by assigning a new value to their index.

Example:

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

fruits[1] = "Mango";

Now the array becomes:

["Apple", "Mango", "Orange"]

Printing the updated array:

console.log(fruits);

Output:

["Apple", "Mango", "Orange"]

---

The Array Length Property

Arrays have a built-in property called length.

It tells you how many elements exist in the array.

Example:

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

console.log(fruits.length);

Output:

3

This is very useful when working with loops.

---

Looping Over Arrays

Often, we want to process every element in an array.

A simple way to do this is with a for loop.

Example:

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

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

Output:

Apple
Banana
Orange

How it works:

1. The loop starts at index 0

2. It continues until it reaches the array length

3. Each iteration prints one element

This allows us to handle arrays of any size.

---

Comparing Individual Variables vs Arrays

Without arrays:

let task1 = "Study";
let task2 = "Exercise";
let task3 = "Read";

With arrays:

const tasks = ["Study", "Exercise", "Read"];

Arrays make programs:

• Cleaner

• Easier to manage

• Easier to scale

If you later want to add more tasks, you simply add them to the array.

---

Assignment

Try the following exercise.

---

Step 1: Create an Array of Favorite Movies

Example:

const movies = ["Inception", "Interstellar", "The Matrix", "Avatar", "Titanic"];

---

Step 2: Print the First and Last Element

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

---

Step 3: Change One Value

Example:

movies[2] = "The Dark Knight";

Print the updated array:

console.log(movies);

---

Step 4: Loop Through the Array

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

---

Complete Assignment Solution

const movies = ["Inception", "Interstellar", "The Matrix", "Avatar", "Titanic"];

// Print first movie
console.log("First movie:", movies[0]);

// Print last movie
console.log("Last movie:", movies[movies.length - 1]);

// Update one value
movies[2] = "The Dark Knight";

// Print updated array
console.log("Updated array:", movies);

// Loop through array
for (let i = 0; i < movies.length; i++) {
  console.log("Movie:", movies[i]);
}

Example Output:

First movie: Inception
Last movie: Titanic
Updated array: ["Inception","Interstellar","The Dark Knight","Avatar","Titanic"]
Movie: Inception
Movie: Interstellar
Movie: The Dark Knight
Movie: Avatar
Movie: Titanic

---

Final Thoughts

Arrays are one of the most commonly used data structures in JavaScript. They allow developers to store and manage collections of values efficiently.

Understanding how arrays work—how to create them, access elements, update values, and loop through them—is an essential step in learning JavaScript.

Once you are comfortable with the basics, you will be ready to explore more advanced array methods that make working with data even more powerful.