What is an Array in JavaScript? A Complete Guide

Almost every JavaScript program you write will store and process collections of data. A shopping cart holds multiple products. A leaderboard tracks multiple scores. A chat app renders multiple messages. Storing each item in its own variable would be unmanageable. Arrays solve this problem by letting you store an ordered list of values in a single variable that you can loop through, search, sort, and transform.

This guide explains what arrays are, how they work internally, and when you should (and should not) use them.

Why Arrays Exist

Imagine tracking five temperature readings without arrays:

javascript

const temp1 = 72;
const temp2 = 68;
const temp3 = 75;
const temp4 = 71;
const temp5 = 69;

Now imagine calculating the average. You would need to manually reference every variable by name. Add a sixth reading and you must update every function that touches those variables. This approach does not scale.

Arrays give you a single container with numeric indices:

javascript

const temps = [72, 68, 75, 71, 69];
 
const average = temps.reduce((sum, t) => sum + t, 0) / temps.length;
console.log(average); // 71

Adding a sixth reading is just temps.push(73). Every function that processes temps automatically handles the new value because they iterate over the array rather than referencing individual variables.

What is a JavaScript Array, Exactly?

A JavaScript array is an ordered, indexed collection of values. Each value occupies a numbered position called an index, starting at zero:

javascript

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

Unlike arrays in languages like C or Java, JavaScript arrays are not fixed-size or single-type containers. They are dynamic and can hold any mix of data types:

javascript

const mixed = [42, "hello", true, null, { name: "Kit" }, [1, 2, 3]];

Internally, JavaScript arrays are specialized objects. The engine optimizes them for numeric index access, but under the hood they inherit from Object.prototype through Array.prototype.

Arrays vs Other Data Types

Understanding where arrays fit among JavaScript's data types helps you pick the right structure for each situation.

When to use an array: You need an ordered list where position matters, you want to iterate in sequence, or you need built-in methods like map, filter, and reduce.

When to use an object: You need named properties to describe a single entity (a user, a config, a product).

The typeof Quirk

One of the most common surprises for beginners is that typeof reports arrays as "object":

javascript

const colors = ["red", "green", "blue"];
 
console.log(typeof colors); // "object"

This happens because arrays are technically objects in JavaScript. To check if something is an array, use Array.isArray():

javascript

console.log(Array.isArray(colors));  // true
console.log(Array.isArray("hello")); // false
console.log(Array.isArray({ a: 1 })); // false

Array Length Property

Every array has a length property that returns the count of elements:

javascript

const letters = ["a", "b", "c", "d"];
console.log(letters.length); // 4

The length property is not read-only. Setting it to a smaller value truncates the array. Setting it larger creates empty slots:

javascript

const nums = [10, 20, 30, 40, 50];
 
nums.length = 3;
console.log(nums); // [10, 20, 30]
 
nums.length = 5;
console.log(nums); // [10, 20, 30, <2 empty items>]

How JavaScript Stores Arrays Internally

JavaScript engines like V8 (Chrome, Node.js) optimize arrays differently depending on their content:

Packed arrays contain no holes and use a single element type. The engine stores these in contiguous memory for fast access:

javascript

// Packed SMI (Small Integer) array: fastest
const scores = [100, 95, 88, 92, 76];
 
// Packed Double array: fast
const prices = [9.99, 14.50, 3.25];
 
// Packed Elements array: still optimized
const items = ["pen", "notebook", "eraser"];

Holey arrays have gaps (empty slots). The engine switches to a slower dictionary mode:

javascript

// Creates a holey array: slower access
const sparse = [];
sparse[0] = "first";
sparse[100] = "last"; // indices 1-99 are empty holes
 
console.log(sparse.length); // 101

Accessing the First and Last Elements

Accessing the first element is straightforward: use index 0. For the last element, use length - 1 or the at() method:

javascript

const colors = ["red", "orange", "yellow", "green", "blue"];
 
// First element
console.log(colors[0]);    // "red"
 
// Last element (classic)
console.log(colors[colors.length - 1]); // "blue"
 
// Last element (modern: Array.at())
console.log(colors.at(-1)); // "blue"
console.log(colors.at(-2)); // "green"

The at() method accepts negative indices, counting backward from the end. This is cleaner than computing length - n yourself. It works in all modern browsers and Node.js 16.6+.

Checking if a Value Exists in an Array

Three common approaches exist, each with different trade-offs:

javascript

const stack = ["React", "Vue", "Angular", "Svelte"];
 
// includes(): returns boolean (ES7+)
console.log(stack.includes("Vue"));     // true
console.log(stack.includes("Ember"));   // false
 
// indexOf(): returns index or -1
console.log(stack.indexOf("Angular"));  // 2
console.log(stack.indexOf("Ember"));    // -1
 
// find(): returns the element or undefined
const found = stack.find(item => item.startsWith("Sv"));
console.log(found); // "Svelte"

Arrays are Reference Types

Assigning an array to a new variable does not create a copy. Both variables point to the same underlying data:

javascript

const original = [1, 2, 3];
const alias = original;
 
alias.push(4);
console.log(original); // [1, 2, 3, 4] — original is modified!

This reference behavior is critical to understand. To create an actual independent copy, use the spread operator or Array.from():

javascript

const original = [1, 2, 3];
const copy = [...original];
 
copy.push(4);
console.log(original); // [1, 2, 3] — unchanged
console.log(copy);     // [1, 2, 3, 4]

Iterating Over Arrays

The most common way to process every element is a for loop or the for...of statement:

javascript

const tasks = ["Design UI", "Write API", "Deploy"];
 
// for...of (recommended for most cases)
for (const task of tasks) {
  console.log(task);
}
 
// Classic for loop (when you need the index)
for (let i = 0; i < tasks.length; i++) {
  console.log(`${i + 1}. ${tasks[i]}`);
}
 
// forEach method
tasks.forEach((task, index) => {
  console.log(`${index + 1}. ${task}`);
});

You will learn more about array iteration methods like forEach, map, and filter in upcoming articles.

Common Mistakes Beginners Make

Confusing length with the last index:

javascript

const letters = ["a", "b", "c"];
console.log(letters[3]); // undefined (index 3 does not exist)
console.log(letters[letters.length - 1]); // "c" (correct)

Comparing arrays with ===:

javascript

console.log([1, 2, 3] === [1, 2, 3]); // false!

The === operator checks reference equality for objects and arrays, not content equality. Two arrays with identical content are still different objects in memory.

Mutating an array you did not mean to:

javascript

function addItem(list, item) {
  list.push(item); // Mutates the original array!
  return list;
}
 
const original = ["a", "b"];
const updated = addItem(original, "c");
console.log(original); // ["a", "b", "c"] — accidentally mutated

Instead, return a new array:

javascript

function addItem(list, item) {
  return [...list, item]; // Creates a new array
}

Best Practices