What Are Arrays in JavaScript?

Arrays let you store a whole list of values under a single variable name, instead of creating a new variable for every item. This guide covers how to create, access, and modify arrays, plus the handful of methods you’ll reach for constantly.

If you’ve followed our guides on variables and functions, arrays are the natural next step: a way to hold many related values together, so you can loop through them, transform them, or pass the whole collection into a function at once.

This guide covers how arrays are structured, how to access and change their contents, and the small set of built-in methods that cover most everyday array work.

What an Array Actually Is

According to MDN’s guide to JavaScript arrays, arrays are “list-like objects” — single objects that contain multiple values stored in a list, letting you access each item individually and do useful, efficient things with the collection, like looping through it and doing the same thing to every value.

Arrays are written using square brackets, with each item separated by a comma, and the list of items can be as short or as long as your program actually needs:

const fruits = ["apple", "banana", "cherry"];

Accessing Array Items by Index

Each item in an array has a position, called its index, starting at zero rather than one. This trips up a lot of beginners at first, but it’s consistent across nearly every programming language:

const fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // "apple"
console.log(fruits[1]); // "banana"
console.log(fruits[2]); // "cherry"

Since indexing starts at zero, the last item’s index is always one less than the array’s total length — for a three-item array, the last valid index is 2, not 3, which is a detail worth internalizing early since it comes up constantly.

Changing an Array’s Contents

You can update a specific item by assigning a new value at its index:

const fruits = ["apple", "banana", "cherry"];
fruits[0] = "mango";
console.log(fruits); // ["mango", "banana", "cherry"]

Notice this works even though fruits was declared with const — as covered in our guide to var, let, and const, const prevents reassigning the variable itself to an entirely different array, but modifying the contents of the existing array is a different operation entirely, and remains completely allowed.

The Array Methods You’ll Use Constantly

A handful of built-in methods cover the vast majority of everyday array manipulation. According to freeCodeCamp’s JavaScript array handbook, these four methods form the foundation for adding and removing items from either end of an array:

• push() — adds an item to the end of the array.
• pop() — removes and returns the last item.
• unshift() — adds an item to the beginning of the array.
• shift() — removes and returns the first item.

const fruits = ["apple", "banana"];
fruits.push("cherry");   // ["apple", "banana", "cherry"]
fruits.pop();             // ["apple", "banana"]
fruits.unshift("mango");  // ["mango", "apple", "banana"]
fruits.shift();           // ["apple", "banana"]

Finding an Array’s Length

The length property tells you how many items an array currently contains — genuinely useful for loops, validation, and countless other everyday tasks:

const fruits = ["apple", "banana", "cherry"];
console.log(fruits.length); // 3

According to W3Schools’ introduction to JavaScript arrays, the length property returns the number of elements in the array, which combined with zero-based indexing means the last item can always be accessed with fruits[fruits.length - 1], without needing to know the array’s exact contents in advance.

Looping Through an Array

Arrays and loops go hand in hand. Using the for loop pattern from our functions guide alongside array access:

const fruits = ["apple", "banana", "cherry"];

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

Modern JavaScript also offers a cleaner syntax for this exact pattern, called a for...of loop, which skips the index entirely when you just need each value:

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

Arrays Can Hold Any Type, Including Other Arrays

JavaScript arrays aren't restricted to one data type — a single array can freely mix strings, numbers, booleans, or even other arrays:

const mixed = ["Alex", 30, true, [1, 2, 3]];

An array containing another array is called a nested or multidimensional array, accessed by chaining index brackets: mixed[3][0] would access the first item inside the nested array. This is a genuinely useful pattern for representing grid-like or table-like data.

Finding Items in an Array

Beyond adding and removing, you'll frequently need to check whether an array contains something, or find where it is. A few methods handle this cleanly:

• includes() — returns true or false depending on whether a value exists in the array.
• indexOf() — returns the index of the first matching item, or -1 if it isn't found.
• find() — returns the first item that matches a condition you provide.

const fruits = ["apple", "banana", "cherry"];
console.log(fruits.includes("banana")); // true
console.log(fruits.indexOf("cherry"));  // 2
console.log(fruits.indexOf("mango"));   // -1

includes() is usually the clearest choice when you only care whether something exists, since it reads naturally in code and avoids the slightly awkward comparison to -1 that indexOf() otherwise requires.

Combining and Copying Arrays

Two more methods come up often once you're working with multiple arrays. concat() merges two or more arrays into a new one, without changing the originals:

const first = ["a", "b"];
const second = ["c", "d"];
const combined = first.concat(second);
console.log(combined); // ["a", "b", "c", "d"]
console.log(first);    // ["a", "b"] — unchanged

slice() extracts a portion of an array into a new one, again leaving the original untouched:

const numbers = [1, 2, 3, 4, 5];
const middle = numbers.slice(1, 4);
console.log(middle); // [2, 3, 4]

It's worth noting the distinction between methods like push() and pop(), which modify the original array directly, versus methods like concat() and slice(), which return a new array and leave the original completely untouched. Keeping track of which category a method falls into avoids a fairly common class of bugs where code accidentally relies on an array that was silently changed elsewhere in the program.

Checking Whether Something Is Actually an Array

Because arrays are technically a specialized kind of object in JavaScript, the regular typeof operator isn't reliable for identifying them — it returns "object" for both arrays and regular objects, without distinguishing between the two. Instead, use the dedicated Array.isArray() method:

const fruits = ["apple", "banana"];
const info = { name: "Alex" };

console.log(Array.isArray(fruits)); // true
console.log(Array.isArray(info));   // false

This distinction becomes genuinely important once you're writing functions that need to behave differently depending on whether they received an array or a plain object as their input, since treating one as the other can produce confusing, hard-to-trace bugs.

Common Questions Beginners Ask About Arrays

What happens if I access an index that doesn't exist? JavaScript returns undefined rather than throwing an error — accessing fruits[10] on a three-item array simply returns undefined, which is worth checking for explicitly if your code depends on the item actually existing.

Is an array the same thing as an object? They're closely related — arrays are technically a specialized kind of object in JavaScript — but arrays are ordered by numeric index, while regular objects use named keys. Use an array when order and position matter; use an object when you're storing named properties instead.

Do array indexes ever go negative? Not by default with bracket notation, though a newer method called at() allows negative indexes as a shortcut for counting from the end — fruits.at(-1) returns the last item, which can be clearer than writing out fruits[fruits.length - 1] each time.

How do I remove an item from the middle of an array, not just the ends? The splice() method handles this, letting you remove (and optionally insert) items at any position, not just the beginning or end — worth exploring once the basics here feel comfortable and you're ready for more precise control over an array's contents.

Quick-Reference JavaScript Arrays Guide

• Zero-indexed — the first item is at index 0, not 1.
• push() / pop() — add or remove from the end.
• unshift() / shift() — add or remove from the beginning.
• length — the number of items currently in the array.
• Mixed types allowed — a single array can hold different data types, including other arrays.
• for...of — a clean, modern way to loop through array values directly.

Conclusion

Arrays are one of the most frequently used tools in JavaScript, and the core operations — accessing by index, adding and removing with push/pop/shift/unshift, and looping through with for or for...of — cover the overwhelming majority of what a beginner needs for a long time, well before more advanced methods become genuinely necessary.

The best way to build comfort here is direct practice: create a small array of your own, add and remove a few items, and loop through it to print each value, rather than only reading through the examples above and assuming they've fully sunk in.

In the next guide in this series, we'll cover JavaScript objects — a related but distinct way of storing structured data, using named properties instead of numeric positions to organize information about something.

Explore More JavaScript Basics Guides →

Alex Carter

When not writing, Alex is probably debugging someone else’s code.