You Might Not Be Familiar with These Things about the JavaScript Array – 2

In the previous article, we have discussed three properties of JavaScript array – indices of an array, built-in properties and custom properties. We also discussed how we can create custom properties for an array object. In the continuation of the previous article, we are going to discuss two more things about JavaScript array you probably do not know.

Loop through array element

No of elements ? Array length

Loop Through Array Element

You already know how to loop through elements of a JavaScript array. In an array, we loop through indices of an array. Since an array index cannot be a negative number, we use non-negative integers to iterate through an array with the first index usually being zero.

However, after the introduction of ECMAScript6, a programmer can directly loop values instead of indices. This can be archived by using the for…of loop. The for…of loop can iterate all iterable objects like Array, Map, TypedArray, String, Set and more. The for…of loops through elements of array in the order of the indices. The loop will take care of iteration over indices.

Compare following code snippets

For…of loop

var vehicle=[“Car”,”Bus”,”Van”];

for(let item of vehicle){

    console.log(item);

}

For loop

var vehicle=[“Car”,”Bus”,”Van”];

for(var item=0; item<vehicle.length; item++){

    console.log(item);

}

No of Elements ? Array Length

It is expected from beginners to believe that the length of an array is equal to the number of elements in the array. Or, array.length will return the number of elements in the array. The length of an array, however, depends on the highest index.

Whether you have already defined the length of an array or not; the length of the array will be automatically increased accordingly after the addition of a new element.

Consider the following code snippet

var vehicle = [];

vehicle.length = 3;

console.log(vehicle.length);

// the output will be 3

vehicle[6] = “train”;

console.log(vehicle.length);

// this will display 6 on the screen

Here you are likely to assume that after adding a value at the 5th index, 0-4 for indices are automatically created. However, this is not true. There are no indices from 0 to 4. You can check it using the in operator.

console.log(0 in vehicle);

// this is print false.

You get this unexpected output because it is a sparse array. It is a type of array in which indices are not created in a continuous manner. There is a gap between two indices. The array in which indices are created in a continuous manner is called dense array.

If you want to start your career as a freelance website developer, you have to have clear understating of every element of this scripting language.