JavaScript Array length – the definitive guide
Tags: javascript, tutorial, beginners, programming
Published: 2021-11-24 10:11:08

*This article was originally published on [webinuse.com](https://webinuse.com/javascript-array-length-the-definitive-guide/)*

JavaScript Array length property is something we use, almost, every time we work with an array. But, often, we forget how powerful this property can really be.

### What is JavaScript Array length property

The length property of an object which is an instance of type Array sets or returns the number of elements in that array. The value is an unsigned, 32-bit integer that is always numerically greater than the highest index in the array, as per [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length).

What does this mean? This means that length property “belongs” to Array [data type](https://webinuse.com/guide-to-javascript-data-types/) and that it, either, returns the number of elements or sets the number of elements. Since the Array index is zero-based, the integer that is returned by length must be greater than the highest index by 1.

### Dense and sparse arrays

There are two types of Arrays in JavaScript: dense and sparse. JavaScript Array length property gives different results for these two types. That is why we said that length must be greater than the highest index by 1. This means that sometimes `.length` property doesn’t actually return the exact number of elements, but rather the highest index plus 1. In order to explain this, we need to take a look at the difference between dense and sparse arrays.

#### Dense arrays

Dense arrays are the type of arrays that we usually work with.

```javascript
const arr = ["Audi", "BMW", "Mercedes"];
```
This is a typical example of a dense array, the type of array we are familiar with and work with.

JavaScript Array length property will always return the exact number of elements when it comes to dense arrays.

```javascript
const arr = ["Audi", "BMW", "Mercedes"];
 
let length = arr.length;
 
console.log(length);
// Result:
// 3
 
let highestIndex = arr.length-1;
 
console.log(highestIndex);
// Result:
//2
```

As we can see, `.length` returned `3` which is the exact number of items in the array `arr`. The highest index is `2`. Let’s try to add elements to an array and empty an array, and then check an index and the length.

```javascript
let arr = ["Audi", "BMW", "Mercedes"];
/**
 * We know that arr.length === 3
 * Let's add an element to array
 * */
arr.push("Ferrari");
 
let length = arr.length;
 
console.log(arr.length);
// Result:
// 4
 
/**
 * In previous example highest index
 * was 2, let's check it now, after
 * we have added another element
 * */
 
console.log(arr.length-1);
// Result:
//3
 
//Let's empty our array
arr = [];
console.log(arr.length);
// Result:
// 0
```

Once we have emptied an array, it is pointless to check for index, because there is nothing inside our array.

#### Sparse arrays

What is a “Sparse array?” It is, basically, an array with holes. This means that sparse array doesn’t, necessarily, start at 0. Also, this means that sparse arrays don’t have sequential elements, there can be cases when there is not element after element, but rather a hole. Let’s take a look at several examples.

```javascript
let arr = ["Audi", "BMW",, "Mercedes"];
 
let arr2 = [,,,,"JavaScript"];
 
let arr3 = []
arr3[50] = "Python";
```

In the first variable `arr`, we have 3 elements and “hole”/”empty space” on index 2. The second variable has 4 empty indexes and on the fifth we have `"JavaScript"`. `arr3` variable is created as an empty array. And then we assigned `"Python"` on index 50. This means that there are 50 empty places before `"Python"`, or 49 indexes. These were all examples of sparse arrays. Now, let’s use the JavaScript Array length property on all of those, to see what will happen.

```javascript
let arr = ["Audi", "BMW",, "Mercedes"];
console.log(arr);
//Result:
//(4) ['Audi', 'BMW', empty, 'Mercedes']
 
let arr2 = [,,,,"JavaScript"];
console.log(arr2);
//Result:
//(5) [empty × 4, 'JavaScript']
 
let arr3 = []
arr3[50] = "Python";
console.log(arr3);
//Result:
//(51) [empty × 50, 'Python']
```

As we can see in the example above `console.log()` returned more than length. Even though we expected an integer, we got an integer plus array. This is because the browser is aware that this is a sparse array and it gave us the heads up. Also, wherever we had “hole” browser returned `empty`.

### Manipulate array with JavaScript Array length property

JavaScript Array length property allows us to change the array’s length, by extending it, shortening it, or emptying it.

#### Extend array

When we use the JavaScript Array length property to extend an array what do we get? A Sparse Array. Here is an example.

```javascript
let arr = ["Audi", "BMW","Mercedes"];
console.log(arr.length);
//Result:
//3
 
arr.length = 5;
console.log(arr);
//Result:
//(5) ['Audi', 'BMW', 'Mercedes', empty × 2]
```

In the example above we used our standard array and then we used `.length` which returned 3. After that, we used JavaScript Array length’s ability to mutate array and we set the array’s length to 5. When we console logged `arr` again we saw that, now, `arr` has a length of 5 and that two empty indexes are added at the end of it. So, basically, we got a sparse array.

#### Shorten an array

As we said, the JavaScript Array length property gives us the ability to shorten an array. When we use `.length` property, it just takes the exact number of elements that we provided from the beginning of the array. The rest of the elements are discarded and the array is mutated.

```javascript
let arr = ["Audi", "BMW","Mercedes"];
console.log(arr.length);
//Result:
//3
 
arr.length = 1;
console.log(arr);
//Result:
//['Audi']
```
We have shortened our array to 1 element, and only the first element is kept. The rest of them are deleted.

#### Empty an array

We can empty an array using JavaScript Array length. Once we pass `0` as our array’s length, our array will become empty.

```javascript
let arr = ["Audi", "BMW","Mercedes"];
console.log(arr.length);
//Result:
//3
 
arr.length = 0;
console.log(arr);
//Result:
//[]
```
As we can see from the code snippet when we set our length to `0`, `console.log()` returned an empty array.

If you have any questions or anything you can find me on my [Twitter](https://twitter.com/AmerSikira), or you can read some of my other articles like [How to create custom stackable toasts](https://webinuse.com/how-to-create-custom-stackable-toast/)?