JavaScript Array reserves undefined elements

1. undefined x 5 is it only chrome's representation or actual memory reserved?

No.

What you are describing is called a sparse array. In Javascript, the arrays are inherently sparse. The existence of arr[5] does not imply the existence of arr[0]. Memory is not allocated up to the max index.

You could see an array in Javascript as a type of Object. The keys are the indices. In fact, you could even do this:

arr[3.14] = 'pi';

3.14 is the key, and pi is the value. A key/value pair. It is similar to declaring this object:

var arr = { '3.14': 'pi' }

The properties that do not exist, well do not exist.

Arrays differ in the way that they are arrays, meaning they have indices and are zero-based. Hence, for indices (read keys) 0 thru to n, the values are undefined.

If you do a arr[200000] = 'something', it does not mean that 0 thru 19999 will be sitting there wasting memory.

2. What's the difference between arr[4] and arr[6] as both prints undefined?

No difference. Well, "undefined" means undefined. In Javascript you can very well refer to indices well beyond the max declared, and there is no out-of-bound thingy. You only get "undefined".

3. What's the use of reserved undefined x 5, if it's actually reserved space?

It could be both be a convenience and inconvenient. Just depends on how you see it. Regarding reserved space, no. See point 1 above.

You can easily verify this by iterating the array. See the small example below, and you will understand that 0 thru to 4 do not exist.

Example:

// Only for snippet demo
console.log = function(txt) {  var result = document.getElementById("result"); result.innerHTML += txt + "<br/>"; }
                             
// demo to iterate sparse array
var arr = [];
arr[5] = 10;

arr.forEach(function(elem, idx) {
    console.log(idx + " = " + elem);
});

<p id="result"></p>

There are typed arrays as well. These are not sparse arrays, and hence you cannot introduce gaps with typed arrays. For example:

var int16 = new Int16Array(2);

If you assign a value to the x. index of an array that is currently empty, the array length will be updated.

See: Array at MDN, there it says:

When setting a property on a JavaScript array when the property is a valid array index and that index is outside the current bounds of the array, the engine will update the array's length property accordingly

Length of array will be 6 in this case as you are allocating 6th position in the array. Rest all the indexes will carry null value..

Example below will give you better idea:

var arr = [];
arr[5] = 10;
document.getElementById('element').innerHTML = JSON.stringify(arr);

<div id='element'></div>

it means the sixth entry is 10,

all the other are empty (undefined ).

var arr = [];
arr[5] = 10;
console.log(arr[4])