JavaScript Arrays (Beginner Friendly Guide)

In many programs we need to store multiple related values together.
Instead of creating many variables, JavaScript provides arrays.

In this guide we will learn:

• What arrays are and why they are needed

• How to create arrays

• Access elements using index

• Update elements

• The length property

• Looping over arrays

---

1. What Are Arrays?

An array is a collection of values stored in a single variable, where each value has a position called an index. (GeeksforGeeks)

Example idea:

Fruits list
Apple

Banana

Mango

Orange

In JavaScript:

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

Here:

Index	Value
0	Apple
1	Banana
2	Mango
3	Orange

Important rule:

Array indexing starts from 0

So the first element is always index 0. (GeeksforGeeks)

---

2. Why We Need Arrays

Imagine storing marks of students without arrays.

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

This quickly becomes messy.

With arrays:

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

Arrays let us store many values under one name and access them easily. (w3schools.com)

---

3. How to Create an Array

The most common way is using square brackets [].

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

You can also create an empty array:

let tasks = [];

Then add values later.

Arrays can store:

• numbers

• strings

• booleans

• objects

They are very flexible in JavaScript. (GeeksforGeeks)

---

4. Accessing Elements Using Index

Each element has a position number (index).

Example:

let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[0]);

console.log(fruits[1]);

Output:

Apple
Banana

Remember:

0 → first element
1 → second element
2 → third element

---

Array Index Visualization

fruits array
Index:   0       1        2        3

        --------------------------------

Value:  Apple  Banana   Mango   Orange

---

5. Updating Array Elements

Array elements can be changed by assigning a new value.

Example:

let fruits = ["Apple", "Banana", "Mango"];
fruits[1] = "Orange";
console.log(fruits);

Output:

["Apple", "Orange", "Mango"]

Here we replaced Banana with Orange.

---

6. Array Length Property

Every array has a length property that tells how many items it contains. (Wikipedia)

Example:

let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits.length);

Output:

3

Accessing last element

A common trick:

let lastFruit = fruits[fruits.length - 1];

Because the last index is length − 1.

---

7. Looping Over Arrays

When arrays contain many elements, we usually use loops.

Example using for loop:

let fruits = ["Apple", "Banana", "Mango"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Output:

Apple
Banana
Mango

Explanation:

i = index number
fruits[i] = element at that index

---

Memory-Style Array Visualization

fruits
┌───────┐

│ Apple │  index 0

├───────┤

│Banana │  index 1

├───────┤

│ Mango │  index 2

└───────┘

Arrays store values in order, making them easy to iterate through.

---

Quick Summary

Concept	Meaning
Array	Collection of values
Element	Value inside an array
Index	Position of element
Index start	0
length	Number of elements
Access element	array[index]

---

💡 Mental model

Variable → one value
Array → list of values
Object → key-value structure