Skip to main content

Command Palette

Search for a command to run...

Understanding Arrays in JavaScript

Updated
•4 min read•View as Markdown
Understanding Arrays in JavaScript
S

Software developer writing to think clearly about code, systems, and real-world tradeoffs.

When writing programs, we often need to store multiple values together. Imagine you want to store a list of fruits, marks, or tasks. Writing separate variables for each value quickly becomes messy.

This is where arrays become useful.


What Is an Array?

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

Instead of creating many variables like this:

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

We can store everything in one structure:

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

Now all values are stored together inside one array.

Think of an array like a numbered list.

[ Apple , Banana , Mango ]
   0        1        2

Each value has a position number, called an index.


Why We Need Arrays

Arrays help us:

  • Store multiple related values in one place

  • Organize data in order

  • Easily loop through values

  • Reduce repetitive variables

Example: storing student marks.

Without arrays:

let mark1 = 80;
let mark2 = 75;
let mark3 = 90;

With arrays:

let marks = [80, 75, 90];

Much cleaner and easier to manage.


How to Create an Array

Arrays are created using square brackets [].

Example:

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

Another example:

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

Arrays can store different types of values:

let mixed = ["Rahul", 25, true];

Accessing Elements Using Index

Every value in an array has a position called an index.

Important rule:

Array indexing starts from 0

Example:

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

Access values like this:

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

Output:

Apple
Banana
Mango

Visual representation:

Index:   0        1        2
Value: [Apple , Banana , Mango]

Updating Elements in an Array

We can change values using their index.

Example:

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

fruits[1] = "Orange";

console.log(fruits);

Output:

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

Here we updated Banana → Orange.


Array length Property

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

Example:

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

console.log(fruits.length);

Output:

3

This is useful when working with loops.


Looping Through an Array

Often we want to process every value in an array.

We can do this using a loop.

Example:

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

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

Output:

Apple
Banana
Mango

Execution flow:

Start loop
↓
i = 0 → Apple
↓
i = 1 → Banana
↓
i = 2 → Mango
↓
Loop ends

Visualizing Array Storage

Arrays store values in order.

Example:

Array Name: fruits

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

Memory-style block diagram:

[0] Apple
[1] Banana
[2] Mango
[3] Orange

Each block stores one value.


Practice Assignment

Try the following exercises.

1. Create an array of 5 favorite movies

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

2. Print the first and last element

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

3. Change one value

movies[2] = "The Dark Knight";

console.log(movies);

4. Loop through the array

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

Final Takeaway

Arrays are one of the most important structures in JavaScript.

Remember these core ideas:

Array = collection of ordered values
Index starts from 0
Use [] to create arrays
Use index to access or update values
Use length to know total items
Loops help process all elements

Once you understand arrays, you will be able to handle lists of data such as users, products, tasks, and much more in real applications.