When I create an empty array, I'll get 'empty items' which seem to behave differently from undefined. Can someone explain what is the difference?

That's because Array(10) doesn't populate the array. But it just set the length property to 10 .So, the array created using Array constructor is simply an object with a length property, but with no items populated.

Arrays are objects. That means that your array

  [undefined,undefined,undefined,empty,4]

could be written as such an object:

 {
  0: undefined,
  1: undefined,
  2: undefined,
  // 3 doesnt exist at all
  4: 4,
  length: 5,
 }

So undefined is actually a slot that exists and holds a value while 3 is not even a key-value pair. As accessing a non existing key results in undefined there is no real world difference:

    array[2] // undefined
    array[3] // undefined

But iterating over an array with map and others will skip empty ones, so then you should use .fill before iterating.

The only way to detect a difference is to check if the key exists:

  2 in array // true
  3 in array // false

To turn empty to undefined you could set the key:

  array[3] = undefined;

and to turn undefined into empty you have to remove the key:

  delete array[3]

however that rarely matters.

When you read a property which doesn’t exist you get the value undefined. That’s standard JS.

When you log a whole array, you aren’t reading the property explicitly, so the console helpfully distinguishes between “has no value” and “explicitly has the undefined value”.

Check for the length of the array object to see whether it has any data like

if (!response2.DATA || !response2.DATA.length) {
  $("#placeddiv").hide();
} else {

}

Also, typeof operator returns a string value, so if the value of respose.DATA is undefined, then typeof response.DATA will be 'undefined'

main difference would be forEach and map properties

Array(2).map(()=>"value") will not do anything

[undefined,undefined].map(()=>"value") will map

Intro to sparse arrays

First a clarification what you've created is called a sparse array. To put it simply, sparse arrays are similar to normal arrays but not all of their indexes have data. In some cases, like JavaScript, this leads to slightly more significant handling of them. Other languages simply have a normal array of fixed length with some values that are "zero" in some sense (depends on what value can signify "nothing" for a specific array - might be 0 or null or "", etc).

Empty slots

The empty slot in a sparse array is exactly what it sounds like - slot that is not filled with data. JavaScript arrays unlike most other implementations, are not fixed size and can even have some indexes simply missing. For example:

const arr = [];   // empty array
arr[0] = "hello"; // index 0 filled
arr[2] = "world"; // index 2 filled

You will get an array with no index 1. It's not null, nor it's empty, it's not there. This is the same behaviour you get when you have an object without a property:

const person = {foo: "hello"};

You have an object with a property foo but it doesn't have, for example, a bar property. Exactly the same as how the array before doesn't have index 1.

The only way JavaScript represents a "value not found" is with undefined, however that conflates

• "the property exists and the value assigned to it is undefined"
• "the property does not exist at all"

Here as an example:

const person1 = { name: "Alice", age: undefined };
const person2 = { name: "Bob" };

console.log("person1.age", person1.age);
console.log("person2.age", person2.age);

console.log("person1.hasOwnProperty('age')", person1.hasOwnProperty('age'));
console.log("person2.hasOwnProperty('age')", person2.hasOwnProperty('age'));

You get undefined when trying to resolve age in either case, however the reasons are different.

Since arrays in JavaScript are objects, you get the same behaviour:

const arr = [];   // empty array
arr[0] = "hello"; // index 0 filled
arr[2] = "world"; // index 2 filled

console.log("arr[1]", arr[1]);

console.log("arr.hasOwnProperty(1)", arr.hasOwnProperty(1));

Why it matters

Sparse arrays get a different treatment in JavaScript. Namely, array methods that iterate the collection of items will only go through the filled slots and would omit the empty slots. Here is an example:

const sparseArray = [];   // empty array
sparseArray[0] = "hello"; // index 0 filled
sparseArray[2] = "world"; // index 2 filled

const arr1 = sparseArray.map(word => word.toUpperCase());

console.log(arr1); //["HELLO", empty, "WORLD"]


const denseArray = [];     // empty array
denseArray[0] = "hello";   // index 0 filled
denseArray[1] = undefined; // index 1 filled
denseArray[2] = "world";   // index 2 filled

const arr2 = denseArray.map(word => word.toUpperCase()); //error

console.log(arr2);

As you can see, iterating a sparse array is fine, but if you have an explicit undefined, in the array, then word => word.toUpperCase() will fail because word is undefined.

Sparse arrays are useful if you have numerically indexed data that you want to run .filter, .find, .map, .forEach and so on. Let's illustrate again:

//some collection of records indexed by ID
const people = [];
people[17] = { id: 17, name: "Alice", job: "accountant" , hasPet: true  };
people[67] = { id: 67, name: "Bob"  , job: "bank teller", hasPet: false };
people[3] =  { id: 3 , name: "Carol", job: "clerk"      , hasPet: false };
people[31] = { id: 31, name: "Dave" , job: "developer"  , hasPet: true  };


/* some code that fetches records */
const userChoice = 31;
console.log(people[userChoice]);

/* some code that transforms records */
people
  .map(person => `Hi, I am ${person.name} and I am a ${person.job}.`)
  .forEach(introduction => console.log(introduction));
  
/* different code that works with records */
const petOwners = people
  .filter(person => person.hasPet)
  .map(person => person.name);
  
console.log("Current pet owners:", petOwners)