JavaScript Arrays – Storing Multiple Values Efficiently

In the previous article, we learned about functions, which help us organize and reuse code. However, many real-world applications need to store large amounts of related data.

For example:

• Student names

• Product prices

• Exam marks

• City names

• Employee records

Using separate variables for each value becomes difficult to manage.

Example:

let student1 = "Rahul";

let student2 = "Amit";

let student3 = "Rohan";

let student4 = "Priya";

Imagine storing 100 students this way!

To solve this problem, JavaScript provides Arrays.

In this article, we will learn:

• What arrays are

• Why arrays are needed

• Creating arrays

• Accessing elements

• Modifying elements

• Array properties

• Array methods

• Looping through arrays

• Multidimensional arrays

• Practical examples

---

What is an Array?

An array is a special variable that can store multiple values in a single variable.

Example:

let students =
[
    "Rahul",
    "Amit",
    "Rohan",
    "Priya"
];

Instead of creating four variables, one array stores all values.

---

Real-Life Example

Think of an array as a row of lockers.

Index

0      1      2      3

┌────┬────┬────┬────┐

Rahul Amit Rohan Priya

└────┴────┴────┴────┘

Each position has an index number.

---

Why Arrays are Needed

Without arrays:

let mark1 = 80;

let mark2 = 85;

let mark3 = 90;

let mark4 = 95;

Using arrays:

let marks =
[
    80,
    85,
    90,
    95
];

Cleaner and easier to manage.

---

Creating Arrays

There are two common methods.

---

Method 1: Array Literal

Most commonly used.

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

---

Method 2: Array Constructor

let fruits =
new Array(
"Apple",
"Mango",
"Orange"
);

---

Accessing Array Elements

Array elements are accessed using indexes.

Syntax:

arrayName[index]

---

Example

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

document.write(
fruits[0]
);

Output:

Apple

---

Array Indexing

Index

0      1      2

Apple Mango Orange

---

Example

document.write(
fruits[1]
);

Output:

Mango

---

Example

document.write(
fruits[2]
);

Output:

Orange

---

Accessing Invalid Index

document.write(
fruits[10]
);

Output:

undefined

Because element does not exist.

---

Modifying Array Elements

Arrays are mutable.

Example:

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

fruits[1] = "Banana";

document.write(
fruits[1]
);

Output:

Banana

---

Array Length Property

Used to find total elements.

Example:

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

document.write(
fruits.length
);

Output:

3

---

Dry Run

Apple

Mango

Orange

Total Elements = 3

---

Displaying Entire Array

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

document.write(
fruits
);

Output:

Apple,Mango,Orange

---

Looping Through Arrays

Arrays are usually used with loops.

---

Using for Loop

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

for(let i=0;
    i<fruits.length;
    i++)
{
    document.write(
    fruits[i]
    );

    document.write("<br>");
}

Output:

Apple

Mango

Orange

---

Dry Run

i=0 → Apple

i=1 → Mango

i=2 → Orange

Stop

---

Array Methods

JavaScript provides many built-in methods.

---

push()

Adds element at the end.

Example:

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

fruits.push(
"Orange"
);

document.write(
fruits
);

Output:

Apple,Mango,Orange

---

pop()

Removes last element.

Example:

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

fruits.pop();

document.write(
fruits
);

Output:

Apple,Mango

---

shift()

Removes first element.

Example:

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

fruits.shift();

document.write(
fruits
);

Output:

Mango,Orange

---

unshift()

Adds element at beginning.

Example:

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

fruits.unshift(
"Apple"
);

document.write(
fruits
);

Output:

Apple,Mango,Orange

---

Array Method Summary

Method	Purpose
push()	Add at end
pop()	Remove from end
shift()	Remove first
unshift()	Add first

---

Finding Sum of Array Elements

Example:

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

let sum = 0;

for(let i=0;
    i<numbers.length;
    i++)
{
    sum += numbers[i];
}

document.write(sum);

Output:

100

---

Dry Run

10+20+30+40

100

---

Finding Largest Element

let numbers =
[
10,
50,
30,
90,
20
];

let largest =
numbers[0];

for(let i=1;
    i<numbers.length;
    i++)
{
    if(numbers[i] > largest)
    {
        largest =
        numbers[i];
    }
}

document.write(
largest
);

Output:

90

---

Array of Strings

let cities =
[
"Kolkata",
"Delhi",
"Mumbai",
"Chennai"
];

---

Example

document.write(
cities[2]
);

Output:

Mumbai

---

for...of Loop

Modern JavaScript loop for arrays.

Example:

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

for(let fruit of fruits)
{
    document.write(
    fruit
    );

    document.write("<br>");
}

Output:

Apple

Mango

Orange

---

Multidimensional Arrays

Arrays can contain other arrays.

Example:

let marks =
[
[80,85],
[90,95]
];

---

Structure

marks

[
 [80,85],

 [90,95]
]

---

Accessing Elements

document.write(
marks[0][1]
);

Output:

85

---

Dry Run

marks[0]

[80,85]

marks[0][1]

85

---

Two-Dimensional Array Example

let matrix =
[
[1,2],
[3,4]
];

document.write(
matrix[1][0]
);

Output:

3

---

Complete Program

<!DOCTYPE html>

<html>

<body>

<script>

let marks =
[
80,
85,
90,
95
];

for(let i=0;
    i<marks.length;
    i++)
{
    document.write(
    marks[i]
    );

    document.write("<br>");
}

</script>

</body>

</html>

---

Output

80

85

90

95

---

Practical Program – Student Names

let students =
[
"Rahul",
"Amit",
"Rohan",
"Priya"
];

for(let i=0;
    i<students.length;
    i++)
{
    document.write(
    students[i]
    );

    document.write("<br>");
}

Output:

Rahul

Amit

Rohan

Priya

---

Common Mistakes Beginners Make

Starting Index from 1

Wrong:

fruits[1]

for first element.

Correct:

fruits[0]

Arrays start from index 0.

---

Accessing Invalid Index

fruits[100]

Produces:

undefined

---

Forgetting Length

Wrong:

for(let i=0;i<=fruits.length;i++)

Correct:

for(let i=0;i<fruits.length;i++)

---

Real-Life Applications

Arrays are used in:

• Shopping carts

• Student management systems

• Banking software

• Online games

• Product catalogs

• Social media feeds

Platforms like Amazon, Netflix, and Facebook use arrays extensively to manage large collections of data.

---

Advantages of Arrays

• Store multiple values

• Easy data management

• Faster processing

• Works well with loops

• Reduces code complexity

---

Conclusion

Arrays are one of the most useful data structures in JavaScript. They allow us to store and manage multiple values efficiently and form the foundation for handling collections of data.