Skip to main content

Command Palette

Search for a command to run...

JavaScript Arrays 101 (Beginner-Friendly Guide)

Updated
•4 min read•View as Markdown

When writing programs, we often need to store many values together.

Example:

  • A list of fruits

  • A list of marks

  • A list of movies

  • A list of tasks

Instead of creating many variables, JavaScript gives us a better solution called Arrays.

Let’s understand arrays in the simplest way possible.


1. What Are Arrays?

An array is a collection of values stored in order.

Think of it like a basket of fruits.

Example:

Basket → apple, banana, mango

In JavaScript:

let fruits = ["apple", "banana", "mango"];

Here:

  • fruits → array name

  • "apple", "banana", "mango" → elements inside the array

Arrays help us store multiple values in a single variable.


2. Why Do We Need Arrays?

Imagine storing fruit names using variables.

Example:

let fruit1 = "apple";
let fruit2 = "banana";
let fruit3 = "mango";

This becomes messy when we have many values.

Instead, using an array:

let fruits = ["apple", "banana", "mango"];

Now all values are stored in one place.


3. How to Create an Array

We create arrays using square brackets [ ].

Example:

let colors = ["red", "blue", "green"];

Another example:

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

Arrays can store strings, numbers, or mixed values.

Example:

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

4. Accessing Elements Using Index

Each item in an array has a position number called an index.

Important rule:

Array index starts from 0

Example array:

let fruits = ["apple", "banana", "mango"];

Array index looks like this:

Index:   0        1        2
        ----------------------
Value:  apple   banana   mango

Access elements using index.

Example:

console.log(fruits[0]);

Output:

apple

Another example:

console.log(fruits[2]);

Output:

mango

5. Updating Elements in an Array

We can change values using the index.

Example:

let fruits = ["apple", "banana", "mango"];

fruits[1] = "orange";

console.log(fruits);

Output:

["apple", "orange", "mango"]

The value banana was replaced with orange.


6. Array Length Property

JavaScript provides a property called length.

It tells us how many elements are inside the array.

Example:

let fruits = ["apple", "banana", "mango"];

console.log(fruits.length);

Output:

3

Because the array has three elements.


7. Looping Over Arrays

Sometimes we want to print every element in an array.

We can use a for loop.

Example:

let fruits = ["apple", "banana", "mango"];

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

Output:

apple
banana
mango

Here:

  • i represents the index

  • fruits[i] gives the value at that index


Visual Representation of an Array

Index →   0        1        2        3
        --------------------------------
Value →  apple   banana   mango   orange

Each value is stored in a memory block with an index.


Assignment Practice

Try this in your browser console.


1. Create an Array of 5 Favorite Movies

let movies = [
  "Inception",
  "Interstellar",
  "Avatar",
  "Bahubali",
  "RRR"
];

2. Print the First and Last Element

First element:

console.log(movies[0]);

Last element:

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

Output example:

Inception
RRR

3. Change One Value

movies[2] = "Jawan";

console.log(movies);

Updated array:

["Inception","Interstellar","Jawan","Bahubali","RRR"]

4. Loop Through the Array

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

Output:

Inception
Interstellar
Jawan
Bahubali
RRR