Introduction

When writing programs, we often need to store multiple values. For example, imagine storing a list of your favorite movies or fruits.

Without arrays, we would have to create separate variables for each value.

Example:

let movie1 = "3 Idiots";
let movie2 = "Bahubali";
let movie3 = "KGF";

This quickly becomes messy.

Arrays solve this problem by allowing us to store multiple values inside one variable.

---

What Are Arrays in JavaScript?

An array is a collection of values stored in order.

Example:

let fruits = ["mango", "banana", "apple", "orange"];

Here, the variable fruits contains four values.

You can imagine an array like a row of boxes where each box stores a value.

Visual Representation

Index →   0        1        2        3
        --------------------------------
Value → | mango | banana | apple | orange |
        --------------------------------

Each value has a position called an index.

---

Creating an Array

Arrays are created using square brackets [].

Example:

let snacks = ["fafda", "jalebi", "dhokla", "khakhra"];

This array stores four snack names.

Arrays can store different types of values as well.

let data = ["Namra", 20, true];

---

Accessing Array Elements

We access array elements using index numbers.

Important:

Array indexing starts from 0, not 1.

Example:

let fruits = ["mango", "banana", "apple"];

console.log(fruits[0]);
console.log(fruits[1]);

Output:

mango
banana

Array Index Diagram

fruits array

   0        1        2
---------------------------
| mango | banana | apple |
---------------------------

---

Updating Array Elements

We can update values by assigning a new value to an index.

Example:

let fruits = ["mango", "banana", "apple"];

fruits[1] = "orange";

console.log(fruits);

Output:

["mango", "orange", "apple"]

Before update:

[mango, banana, apple]

After update:

[mango, orange, apple]

---

The Array Length Property

JavaScript arrays have a built-in property called length.

It tells us how many elements are in the array.

Example:

let snacks = ["fafda", "jalebi", "dhokla"];

console.log(snacks.length);

Output:

3

Diagram

snacks array

[fafda, jalebi, dhokla]

Length = 3

---

Looping Through Arrays

We can loop through arrays to access every element.

Example using for loop:

let fruits = ["mango", "banana", "apple"];

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

Output:

mango
banana
apple

Loop Flow Diagram

Start loop
   ↓
Check index < array length
   ↓
Print element
   ↓
Increase index
   ↓
Repeat

---

Practice Assignment

Create an array of your favorite movies.

Example:

let movies = ["3 Idiots", "Bahubali", "KGF", "RRR", "Dangal"];

Print the first and last element:

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

Change one value:

movies[2] = "Pushpa";

console.log(movies);

Loop through the array:

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