Initializing Empty Arrays in JavaScript

Two ways of defining empty arrays with several elements specified

var arr1 = new Array(3);  
var arr2 = [,,];

But a new keyword for array definition is never recommended.

Suppose I have 3 text fields whose data I want to store in an array.

var arr = [,,];  
for(var i=0; i< arr.length ;i++) {  
    arr[i] = document.getElementById('mytextblock'+i).value;  
}

Let's see what is wrong with the code above

arr.forEach(function(data){  
   console.log(data);  
});  
//logs only 2 values instead of three.

Why?

When we initialize an empty array using this notion

var arr = [,,];

It initializes the array with the number of elements equal to the number of commas used inside square brackets []. So in the above case, the array's length will be 2 instead of 3.

var arr1 = [,,];  
var arr2 = [,,,];  
console.log(arr1.length); //logs 2  
console.log(arr2.length); //logs 3

And in the above example, we used the length property to iterate the array. It loops 2 times instead of 3.

Solution

Well, arrays are dynamic in javascript; they can grow and shrink according to our requirements. So there is no point in defining its length at initialization. And even if we do so, we should avoid using the array's length property

So above code could be written as,

var arr = [];  
var i;  
for(i=0;document.getElementById('mytextblock'+i);i++){  
   arr[i] = document.getElementById('mytextblock'+i).value;  
}

Conclusion

Knowledge is the power, And if we are not familiarized with such sloppiness of javascript, we may find ourselves in situations of dead confusion.