What's the difference between declared "undefined" value and undeclared "undefined" value?

Question

Could anyone please explain what's the difference between the first example and the second example, please?

What's the difference between declared "undefined" value and undeclared "undefined" value?

Code

var arr = new Array(4);
arr[0] = "a";
arr[1] = "b";
arr[2] = undefined; //insert undefined here!
arr[3] = "d";
console.log("arr[2] is " + arr[2]); //yes, it is undefined!

arr.forEach(function(value, index) {
    console.log(index + ":" + value);
})

console.log("====================")

var arr = new Array(4);
arr[0] = "a";
arr[1] = "b";
//I don't insert undefined to arr[2] in this case.
arr[3] = "d";
console.log("arr[2] is " + arr[2]); //yes, it is undefined!

arr.forEach(function(value, index) {
    console.log(index + ":" + value);
})

Log

arr[2] is undefined
0:a
1:b
2:undefined
3:d
====================
arr[2] is undefined
0:a
1:b
3:d

Additional Example

var arr = new Array(4);
arr[0] = "a";
arr[1] = "b";
arr[2] = undefined; //insert undefined here!
arr[3] = "d";
console.log("arr[2] is " + arr[2]); //yes, it is undefined!

var i = 0;
var max = arr.length;
for(i; i < max; i++) {
console.log(i + ":" + arr[i]);
}

console.log("====================")

var arr = new Array(4);
arr[0] = "a";
arr[1] = "b";
//I don't insert undefined to arr[2] in this case.
arr[3] = "d";
console.log("arr[2] is " + arr[2]); //yes, it is undefined!

var i = 0;
var max = arr.length;
for(i; i < max; i++) {
console.log(i + ":" + arr[i]);
}   

Log

arr[2] is undefined
0:a
1:b
2:undefined
3:d
====================
arr[2] is undefined
0:a
1:b
2:undefined
3:d

Answer 1

JavaScript arrays are not arrays in common sense. In most languages arrays (a.k.a. vectors) are contiguous areas in memory. But in JS they are rather sparse containers - some elements may not exist.

In fact arrays in JS are just objects (key/value maps) with the difference that integer keys are allowed:

var arr = {}; // object (key/value map), not array, sic!
arr[0] = "a";
arr[1] = "b"; 
// arr[2] deliberately omitted
arr[3] = "d";
console.log("arr[2] is " + arr[2]); // it is undefined

You can even add non-integer keys to JS arrays:

var arr = [];
arr[0] = 0;
arr["zero"] = "zero";

This proves that arrays are objects under the hood.

When you try to get from a container (object or array) value of non-existent key it returns undefined value. By ECMAScript specification.

arr[2] = undefined assigns that value to key 2.

delete arr[2] removes that key and its value.

Answer 2

Could anyone please explain what's the difference between the first example and the second example, please?

In the first example:

var arr = new Array(4);

creates an array with length 4, it has no elements.

Then a value is assigned to indexes 0 to 3 using direct assignment:

arr[0] = "a";
arr[1] = "b";
arr[2] = undefined; //insert undefined here!
arr[3] = "d";

which creates properties 0 to 3. undefined is assigned to arr[2]. forEach iterates over elements that exist, so you see the result from all 4 elements, each with a value.

In the second example, you do not assign a value to arr[2]. When accessing a non–existent property of an object (noting that Arrays are Objects), the undefined value is returned, e.g.

var obj = {};
console.log(obj.foo) // undefined

When looping over the properties with forEach, non–existent properties aren't visited so there is no output for arr[2]. This is in contrast to for loops, which are generally written to visit all properties from 0 to length - 1 and hence return values for all properties in that range, whether they exist or not.