JavaScript Arrays: A Complete Beginner's Guide

Introduction

Arrays are one of the most important data structures in JavaScript. They allow you to store multiple values inside a single variable, making it easy to organize and work with collections of data.

Whether you're building a to-do list, an e-commerce store, or a React application, you'll use arrays almost every day.

What is an Array?

An array is an ordered collection of values.

Instead of creating multiple variables:

const user1 = "Alice";
const user2 = "John";
const user3 = "Emma";

You can store everything in one array:

const users = ["Alice", "John", "Emma"];

Arrays can hold:

• Strings
• Numbers
• Booleans
• Objects
• Functions
• Other arrays
• Mixed data types

Example:

const values = [
  "Frontynova",
  2026,
  true,
  { language: "JavaScript" },
  ["HTML", "CSS"],
];

Creating Arrays

There are two common ways to create an array.

Array Literal (Recommended)

const fruits = ["Apple", "Orange", "Banana"];

Array Constructor

const fruits = new Array("Apple", "Orange", "Banana");

The array literal syntax is shorter, cleaner, and preferred in modern JavaScript.

Accessing Elements

Array indexes start at 0.

const fruits = ["Apple", "Orange", "Banana"];

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

Output:

Apple
Orange
Banana

Updating an Element

const fruits = ["Apple", "Orange", "Banana"];

fruits[1] = "Mango";

console.log(fruits);

Output:

["Apple", "Mango", "Banana"]

Array Length

Use the length property.

const fruits = ["Apple", "Orange", "Banana"];

console.log(fruits.length);

Output:

3

Last Element

const fruits = ["Apple", "Orange", "Banana"];

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

Output:

Banana

Adding Elements

Add to the end:

const fruits = ["Apple"];

fruits.push("Orange");
fruits.push("Banana");

console.log(fruits);

Output:

["Apple", "Orange", "Banana"]

Removing the Last Element

const fruits = ["Apple", "Orange", "Banana"];

fruits.pop();

console.log(fruits);

Output:

["Apple", "Orange"]

Adding to the Beginning

const fruits = ["Orange", "Banana"];

fruits.unshift("Apple");

console.log(fruits);

Output:

["Apple", "Orange", "Banana"]

Removing the First Element

const fruits = ["Apple", "Orange", "Banana"];

fruits.shift();

console.log(fruits);

Output:

["Orange", "Banana"]

Looping Through Arrays

Using a for loop:

const fruits = ["Apple", "Orange", "Banana"];

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

Using for...of:

for (const fruit of fruits) {
  console.log(fruit);
}

Using forEach():

fruits.forEach((fruit) => {
  console.log(fruit);
});

Arrays Can Store Objects

const users = [
  {
    name: "Alice",
    age: 25,
  },
  {
    name: "John",
    age: 30,
  },
];

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

Output:

Alice

Arrays Can Store Other Arrays

const matrix = [
  [1, 2],
  [3, 4],
  [5, 6],
];

console.log(matrix[1][0]);

Output:

3

Checking if a Variable is an Array

const fruits = ["Apple", "Orange"];

console.log(Array.isArray(fruits));

Output:

true

Common Beginner Mistakes

Arrays start at zero

Incorrect:

fruits[1];

If you want the first element.

Correct:

fruits[0];

Accessing an invalid index

const fruits = ["Apple", "Orange"];

console.log(fruits[10]);

Output:

undefined

Always ensure the index exists before accessing it.

Using delete

Avoid:

delete fruits[1];

This leaves an empty slot in the array.

Prefer methods like:

pop();
shift();
splice();

Best Practices

• Use array literals ([]) instead of new Array().
• Store similar types of data together whenever possible.
• Use meaningful variable names.
• Prefer const when you don't need to reassign the array.
• Use built-in array methods instead of writing unnecessary loops.

What's Next?

Now that you understand the basics of arrays, you're ready to learn the most commonly used array methods.

In the next article, you'll discover:

• push()
• pop()
• shift()
• unshift()
• splice()
• slice()

These methods are essential for adding, removing, and manipulating array elements.

Arrays are a fundamental part of JavaScript and are used in nearly every application. Understanding how to create arrays, access elements, update values, and iterate through them is an essential skill for every developer.

Mastering arrays will make learning advanced concepts like map(), filter(), reduce(), and React state management much easier as you continue your JavaScript journey.