Sparse Arrays in JavaScript
In an effort to handle arrays more user-friendly, JavaScript changes the length of an array as the array changes. When in index leaves gaps between the last used index of an array, this creates a sparse array. After reading this article, I hope you have a better understanding of sparse arrays and how JavaScript handles them so that you can handle them more effectively.
Creating a Sparse Array
There are several ways to create a sparse array in JavaScript. The most common ways are through initialization and modification of an array.
Get Eric Krukowski’s stories in your inbox
Join Medium for free to get updates from this writer.
1. Initialization: When an array is created, you can assign a size to it. JavaScript will create an array of that size, with each index being “empty” and return “undefined” when accessed.
// Creating a new sparse array
let sparseArray = new Array(10);
console.log(sparseArray[2]) //undefined
console.log(sparseArray.length) //102. Modification: When an element is created or deleted, leaving a gap in an array, the array becomes a sparse array.
// Making an array a sparse array
let sparseArrayAssigned = [1, 2, 3, 4, 5]
sparseArrayAssigned[8] = 8
console.log(sparseArrayAssigned) // [1, 2, 3, 4, 5, empty x 3, 8]
console.log(sparseArrayAssigned[7]) //undefined
console.log(sparseArrayAssigned.length) //9
let sparseArrayDeletion = [1, 2, 3, 4, 5]
delete sparseArrayDeletion[2]
console.log(sparseArrayDeletion) // [1, 2, empty, 4, 5]
console.log(sparseArrayDeletion.length) //5
console.log(console.log(sparseArrayDeletion[2]) //undefinedAs you can see in these examples, even though the indexes show up as “empty,” they still can be accessed without an error and return “undefined.”
Using a Sparse Array
Now that you know how to create a sparse array, when would you ever need to use one? Most cases where you’re deleting or adding an element to an array, you’ll change the first or last index, or use splice() or another operator to take the element out. However if you want to maintain the length and index of certain items and ignore unused elements, sparse arrays are a nice easy tool to use.
For example, in my Trivia Time application, there is a database of saved quizzes, along with a list of users. Each user only updates their scores for quizzes they take, so when the score is updated on a higher index than currently exists, it will typically create a sparse array. In fact, since I don’t use an ID of 0 for the quiz database, the first quiz a user takes will guarantee an empty space in the first element.
Behavior of Sparse Arrays
Some things to note are how a sparse arrays are handled when converted to other formats. When I got to the point of patching user scores and persisting that data, I was getting a bug when calculating user statistics. This was because JSON.stringify() converts a sparse array into a dense array with empty elements converted to null values and I wasn’t expecting null elements in my arrays. Ensuring validation when working around sparse arrays, or when dealing with data in general, is essential.
Also, certain code validation plugins will throw errors or warnings when using sparse arrays. ESLint is one of them, so if you plan on using a sparse array and use ESLint as your linter, make sure you ignore the rule for no sparse arrays as you use them. The code block below shows how easy it is to implement:
let sparseArray = [0, , 2, 3, 4] // eslint-disable-line no-sparse-arraysWrapping up
Hopefully you now have a better understanding of what a sparse array is, why you might want to use one in your application, and how to handle them in your project.
