Arrays in JavaScript is a very important concept. Developers are dealing with Arrays like creating, manipulating etc almost every day while implementing logics. Arrays are very easy to understand in JavaScript.
An array is a special variable, which can hold more than one value
But do you know that Arrays can hold nothing i.e. it is possible to create hole in an Array?
In this post, I will be discussing about Sparse and Dense Arrays. Also I will be talking about how to create them and what you can do with this type of arrays.
Blog ➡️ https://bit.ly/3MVmDSa
Youtube Playlist ➡️ https://bit.ly/31YcVZz
Read this blog post or watch the video below to learn more about the Dense vs Sparse Array.
Dense Array
An array in JavaScript is an object representing an ordered collection of items.
Let’s consider the below array of countries.
const countries = ['Canada', 'Switzerland', 'India'];
console.log(countries[0]); // output 'Canada'
console.log(countries[1]); // output 'Switzerland'
console.log(countries[2]); // output 'India'
console.log(countries.length); // logs 3Items in an array can be accessed by the property “Index”. Index starts with the number 0 i.e. the first element of the array can be accessed by index value as 0. From the above example, countries[0] will return the first element of the countries array which is ‘Canada’.
There is another property named ‘length’ which indicates the number of elements present in an array. For the example above, length will return 3 as there are three elements.
Now an array will be considered a Dense Array when it will have elements in each index of the array starting from 0 till length-1.
Below is the function which determines whether an array is Dense or not.
function isDense(array) {
for (let index = 0; index < array.length; index++) {
if (!array.hasOwnProperty(index)) {
return false;
}
}
return true;
}
const countries = ['Canada', 'Switzerland', 'India'];
console.log(isDense(countries));With this above function, what do you think? isDense() method will always return true i.e. all arrays are dense or there might be some situations where isDense will return false. Let’s find out
Sparse Array
When you have holes in the array, that array will become a Sparse Array. Bu hole means there are some indexes in the array which hold nothing.
With this definition, let’s check out the below code snippet which is now dealing with a sparse array.
const countries = ['Canada', , 'India'];
console.log(isDense(countries));This time, isDense() method will return false because the second element of the array in black. Trying to access index 1 from the array will return undefined.
To check explicitly whether there’s a hole at a specific index you need to use index in countries expression.
const countries = ['Canada', , 'India'];
console.log(0 in countries); // output true
console.log(1 in countries); // output falseWays to create sparse array
There are many ways to create a sparse array. Let’s explore them below
# 1
When employing the array literal without a value, a sparse array is created.
const countries = ['Canada', , 'India'];
console.log(countries); //Outputs "Canada", undefined, "India"# 2
A sparse array is created by calling Array(length) or new Array(length) (with a number argument).
const countries = Array(3);
console.log(isDense(countries)); // outputs false
console.log(countries); // outputs [undefined, undefined, undefined]# 3
Using delete array[index] operator on the array will create sparse array.
const countries = ['Canada', 'Switzerland', 'India'];
delete countries[1];
console.log(isDense(countries)); // outputs false
console.log(countries); // outputs ['Canada', undefined, 'India']In the above example, countries was initially a dense array. But the moment we deleted the content of the array from index 1, it became a sparse array.
# 4
By increasing the length property of the array, we can create holes in the array and thus a sparse array.
const countries = ['Canada', 'Switzerland', 'India'];
countries.length = 4;
console.log(isDense(countries)); // outputs false
console.log(countries); // outputs 'Canada', 'Switzerland', 'India', undefinedDifferent array methods working with sparse array
While dealing with sparse array, you need to keep in mind one thing, that many array methods skip the holes/undefined elements from the sprase array.
const countries = ['Canada', , 'India'];
countries.forEach(country => {
console.log(country);
});
//This will output Canada IndiaConclusion
In JavaScript, an array can be dense or sparse.
If there are items at each index from 0 to array.length – 1, the array is dense. Otherwise, the array is sparse if at least one item is absent at any index.
Hello there! I simply would like to give you a huge thumbs up for your excellent information youve got here on this post. I will be returning to your site for more soon.