Arrays in JavaScript for Beginners

When learning JavaScript, arrays are one of the most important concepts to understand.

They look simple, but they are used everywhere — from shopping carts to user lists to API data.

In this post, we’ll understand arrays step by step

Let’s get started

What is an Array in JavaScript?

An array is a special type of variable that allows you to store multiple values in a single variable.

Instead of creating separate variables like this:

let item1 = "Milk";
let item2 = "Bread";
let item3 = "Eggs";

We can store them together:

let shoppingList = ["Milk", "Bread", "Eggs"];

Output:

["Milk", "Bread", "Eggs"]

In simple words:

An array is an ordered list of values stored inside one variable.

Understanding Index (Position):

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

Important:

Index starts from 0

let shoppingList = ["Milk", "Bread", "Eggs"];

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

Output:

Milk
Bread
Eggs

So:

Index 0 → First item

Index 1 → Second item

Index 2 → Third item

How to Check Array Length

To know how many items are inside an array, use .length.

let shoppingList = ["Milk", "Bread", "Eggs"];

console.log(shoppingList.length);

Output:

3

Adding Items (push):

Let’s say you forgot to add "Butter".

let shoppingList = ["Milk", "Bread", "Eggs"];

shoppingList.push("Butter");

console.log(shoppingList);

Output:

["Milk", "Bread", "Eggs", "Butter"]

push() adds a new item to the end.

Removing Items (pop):

If you want to remove the last item:

let shoppingList = ["Milk", "Bread", "Eggs"];

shoppingList.pop();

console.log(shoppingList);

Output:

["Milk", "Bread"]

pop() removes the last item.

Looping Through an Array:

Let's say you are building an online store and want to show all products.

let products = ["Laptop", "Mouse", "Keyboard"];

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

Output:

Laptop
Mouse
Keyboard

This is how websites display lists dynamically.

Example: Shopping Cart

let cart = ["Laptop", "Mouse"];

console.log(cart.includes("Mouse"));
console.log(cart.indexOf("Laptop"));

Output:

true
0

includes()→ checks if item exists

indexOf() → returns position

Example: Managing Students

let students = ["John", "Emma"];

students.push("David");

console.log(students);
console.log(students.length);

Output:

["John", "Emma", "David"]
3

This is similar to how real applications manage user data.

Arrays Can Store Different Types

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

console.log(mixedData);

Output:

["John", 25, true]

Arrays can also store objects:

let users = [
  { name: "John", age: 25 },
  { name: "Emma", age: 22 }
];

console.log(users[0].name);

Output:

John

This structure is very common when working with APIs.

What Happens If Index Doesn’t Exist?

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

console.log(fruits[5]);

Output:

undefined

If the index does not exist, JavaScript returns undefined.

Are Arrays Mutable or Immutable?

What does mutable mean?

Mutable means the original array can be changed after it is created.

Example:

let numbers = [1, 2, 3];

numbers.push(4);

console.log(numbers);

Output:

[1, 2, 3, 4]

The original array was modified.

Immutable means:

Immutable means the original data cannot be changed.

In JavaScript:

Arrays→ Mutable

Strings → Immutable

Example of string (immutable):

let name = "John";

name[0] = "P";

console.log(name);

Output:

John

The string did not change.

Final Summary

• Arrays store multiple values in one variable.
• Index starts from 0.
• .length gives total items.
• push() adds items.
• pop() removes items.
• Arrays are mutable (they can be changed).

Arrays may seem simple at first, but they are one of the most powerful tools in JavaScript.

focus on practicing:

• Creating arrays
• Accessing values
• Adding and removing items
• Looping through arrays