JavaScript Arrays 101

Introduction -

When writing programs, we often need to store multiple related values. For example, a list of fruits, student marks, or tasks in a to-do list. If we try storing each value in a separate variable, our code quickly becomes difficult to manage.

Example :

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

Instead, JavaScript provides a much better solution called arrays. Arrays allow us to store multiple values in a single variable while keeping them organized.

What Are Arrays?

An array is a collection of values stored in order.

Example :

let fruits = ["Apple", "Mango", "Banana"];

Here, the variable fruits stores three values inside a single array.

Arrays are useful when dealing with lists such as:

• Student marks

• Shopping lists

• Favorite movies

• Task lists

Creating an Array

Arrays are created using square brackets [].

Example :

let numbers = [10, 20, 30, 40];

This array contains four numbers.

Accessing Elements Using Index

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

Important rule : Array indexing starts from 0

Example :

Index:   0        1        2
Value: Apple   Mango   Banana

Access example:

let fruits = ["Apple", "Mango", "Banana"];

console.log(fruits[0]); // Apple
console.log(fruits[1]); // Mango

Updating Elements

We can change an element by using its index.

Example :

let fruits = ["Apple", "Mango", "Banana"];

fruits[1] = "Orange";

console.log(fruits);

Output :

["Apple", "Orange", "Banana"]

Array Length Property

The length property tells us how many elements are in the array.

Example :

let fruits = ["Apple", "Mango", "Banana"];

console.log(fruits.length);

Output :

3

Looping Over Arrays

When we want to process every element in an array, we usually use a loop.

Example :

let fruits = ["Apple", "Mango", "Banana"];

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

This loop prints each fruit from the array.

Practice Exercise

Create an array of favorite movies

let movies = ["Inception", "Interstellar", "Avatar", "Titanic", "Joker"];

Print first and last element

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

Change one value

movies[2] = "The Dark Knight";
console.log(movies);

Loop through the array

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

Visual Diagrams

To understand arrays better, you can use diagrams such as:

• Array index and value visualization

• Memory-style block diagram showing how arrays store values

These diagrams help beginners clearly see how arrays organize data.

Conclusion -

Arrays are one of the most important data structures in JavaScript. They allow us to store multiple values in a single variable and access them easily using indexes. By understanding how to create arrays, access elements, update values, and loop through them, you build a strong foundation for working with collections of data in JavaScript.

As you continue learning, arrays will become a key part of many programs you write.