# JavaScript Arrays 101

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:

```javascript
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:

```javascript
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:

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

Another example:

```javascript
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:

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

The index positions look like this:

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

Accessing elements:

```javascript
console.log(fruits[0]);
```

Output:

```plaintext
Apple
```

Another example:

```javascript
console.log(fruits[1]);
```

Output:

```plaintext
Banana
```

* * *

# Updating Elements in an Array

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

Example:

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

fruits[1] = "Mango";
```

Now the array becomes:

```javascript
["Apple", "Mango", "Orange"]
```

Printing the updated array:

```javascript
console.log(fruits);
```

Output:

```javascript
["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:

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

console.log(fruits.length);
```

Output:

```plaintext
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:

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

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

Output:

```plaintext
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:

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

With arrays:

```javascript
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:

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

* * *

## Step 2: Print the First and Last Element

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

* * *

## Step 3: Change One Value

Example:

```javascript
movies[2] = "The Dark Knight";
```

Print the updated array:

```javascript
console.log(movies);
```

* * *

## Step 4: Loop Through the Array

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

* * *

# Complete Assignment Solution

```javascript
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:

```plaintext
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.