In JavaScript, arrays are objects with indexed elements, but how those elements are stored internally can differ. Arrays can be dense or sparse, depending on the presence or absence of indices.

Dense Arrays

A dense array is an array where all elements have contiguous indices starting from 0 without any gaps. In other words, every index between 0 and the array’s length - 1 is occupied.

Characteristics:

  • Every index contains a defined value.
  • Iterating over the array processes all the elements.
const denseArray = [1, 2, 3, 4, 5];

console.log(denseArray); // (5) [1, 2, 3, 4, 5]
console.log(denseArray.length); // 5

// Iterating over the dense array
denseArray.forEach((value, index) => {
    console.log(`Index ${index}: ${value}`);
});

/*
Index 0: 1
Index 1: 2
Index 2: 3
Index 3: 4
Index 4: 5
*/

Sparse Arrays

A sparse array is an array that has "holes," meaning there are some indices between 0 and the array’s length - 1 that do not have any value or are intentionally left undefined.

Characteristics:

  • Some indices are missing or explicitly set to undefined.
  • The length property reflects the largest index + 1, but holes do not count as actual elements.
  • Iterating over the array may skip the "holes."

How Sparse Arrays are Created:

  • Adding an element at a higher index, leaving gaps.
  • Deleting an element using the delete keyword.
  • Explicitly assigning undefined or creating an array using Array() without initializing values.
const sparseArray = [1, 2];
sparseArray[5] = 6;

console.log(sparseArray); // (6) [1, 2, empty × 3, 6]
console.log(sparseArray.length); // 6

// Iterating over the sparse array
sparseArray.forEach((value, index) => {
    console.log(`Index ${index}: ${value}`);
});

/*
Index 0: 1
Index 1: 2
Index 5: 6
*/
const arrayWithDelete = [1, 2, 3];
delete arrayWithDelete[1];

console.log(arrayWithDelete); // (3) [1, empty, 3]
console.log(arrayWithDelete.length); // 3

// Iterating over the sparse array
arrayWithDelete.forEach((value, index) => {
    console.log(`Index ${index}: ${value}`);
});

/*
Index 0: 1
Index 2: 3
*/

Why It Matters

Performance Considerations: Dense arrays are generally more performant than sparse arrays because modern JavaScript engines optimize dense arrays by storing them in a contiguous block of memory. Sparse arrays, with their gaps, require more overhead.

Dense arrays are suitable for regular data structures (e.g., lists, queues).

Sparse arrays can be used for scenarios like sparse matrices or when large gaps are acceptable.

How to Identify Sparse Arrays

You can check if an array is sparse using this method:

function isSparse(array) {
    return array.length !== Object.keys(array).length;
}

console.log(isSparse([1, 2, 3])); // false (dense array)
console.log(isSparse([1, , 3])); // true (sparse array)
console.log(isSparse(new Array(5))); // true (sparse array)