Skip to main content

Command Palette

Search for a command to run...

JavaScript Arrays 101

Updated
4 min read

When we start learning programming, we often store information in variables. But what happens when we need to store multiple related values? Writing many variables quickly becomes messy.

This is where arrays help us.

In this article, we will understand what arrays are, why we use them, and how to work with them in JavaScript using simple examples.


1. What Are Arrays and Why Do We Need Them?

An array is a collection of multiple values stored in a single variable.

Instead of writing many variables like this:

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

We can store all of them in one array:

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

This makes our code:

  • Cleaner

  • Easier to manage

  • Easier to loop through

You can think of an array as a list of items stored together.

Example lists:

  • List of fruits

  • Student marks

  • Daily tasks

  • Favorite movies


2. How to Create an Array in JavaScript

In JavaScript, arrays are created using square brackets [ ].

Example

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

Another example:

let marks = [85, 90, 78, 92];

Arrays can store different types of values:

let data = ["John", 25, true];

But usually we store similar types of values together for better clarity.


3. Accessing Elements Using Index

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

Important rule:

Array indexing starts from 0.

Example array:

let fruits = ["Apple", "Banana", "Mango", "Orange"];
Index Value
0 Apple
1 Banana
2 Mango
3 Orange

Accessing values

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

So:

  • fruits[0] → First element

  • fruits[1] → Second element

  • fruits[2] → Third element


4. Updating Elements in an Array

We can change any value in an array using its index.

Example

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

fruits[1] = "Grapes";

console.log(fruits);

Output:

["Apple", "Grapes", "Mango"]

Here we replaced Banana with Grapes.


5. The Array Length Property

JavaScript arrays have a built-in property called length.

It tells us how many elements are inside the array.

Example:

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

console.log(fruits.length);

Output:

4

This is very useful when working with loops.


6. Looping Through an Array

Often we want to process every element in an array.

The easiest way to do this is using a for loop.

Example

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

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

Output:

Apple
Banana
Mango
Orange

Explanation:

  • i starts from 0

  • Loop runs until i < fruits.length

  • fruits[i] prints each element


Visualizing an Array

Arrays can be visualized like a row of boxes in memory.

Index:   0        1        2        3
        --------------------------------
Value: | Apple | Banana | Mango | Orange |
        --------------------------------

Each box stores one value, and the index tells us where the value is stored.


Real-Life Example

Imagine a student marks list.

Instead of this:

let mark1 = 85;
let mark2 = 90;
let mark3 = 78;
let mark4 = 88;

We can simply write:

let marks = [85, 90, 78, 88];

Now we can easily:

  • Access marks

  • Update marks

  • Loop through them


Assignment Practice

Try this small exercise to test your understanding.

1️⃣ Create an array of 5 favorite movies

Example:

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

2️⃣ Print the first and last element

console.log(movies[0]);
console.log(movies[4]);

3️⃣ Change one value

movies[2] = "Avatar";

4️⃣ Print the updated array

console.log(movies);

5️⃣ Loop through the array

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

Final Thoughts

Arrays are one of the most important data structures in JavaScript.

They help us:

  • Store multiple values in one place

  • Organize data easily

  • Loop through collections efficiently

Once you are comfortable with basic arrays, you can start learning powerful array methods like map(), filter(), and reduce().

But mastering the basics first will make everything else much easier.