In JavaScript, working with arrays is a fundamental part of manipulating and structuring data. Two commonly used tools in array manipulation are new Array(n) and Array.prototype.map(). While these tools are powerful on their own, combining them can sometimes lead to unexpected or "weird" behavior, particularly for developers who are not familiar with how JavaScript handles arrays with uninitialized slots.

These are the following topics that we are going to discuss:

new Array(n)

We use new Array(n) to create a new array of a specified length n in JavaScript. This creates an array with a length of 5, but the array contains empty slots where these empty slots are not the same as undefined or null. They are uninitialized, and no value exists in them or we can say that the array exists, but nothing is "inside" the slots yet.

Example: This example shows the use of new Array(n) for creation of an array.

let arr = new Array(5);
console.log(arr);

let arr = new Array(5);

console.log(arr);

[ <5 empty items> ]

Array.prototype.map()

Array.prototype.map() is a method used to transform each element of an array by applying a callback function to each element. It returns a new array with the results of calling the provided function on every element in the original array.

let arr = [1, 2, 3, 4, 5];
let squared = arr.map(x => x * x);
console.log(squared); 

let arr = [1, 2, 3, 4, 5];

let squared = arr.map(x => x * x);

console.log(squared);

[ 1, 4, 9, 16, 25 ]

The "Weirdness" with new Array(n) and map()

As understood from above we know that map() method in JavaScript only works on defined array elements. It ignores any empty slots in the array. This is why when we use map () on an array created with new Array(n), nothing happens — because there are no actual elements to map over.

Example: In this example we create an array with 5 empty slots using new Array (5) but when we try to call map method on this array, nothing happens. The callback function i => i is not applied because map () skips over empty slots and because of this the result is still an array with 5 empty slots, because there were no actual elements in the array for map () to iterate over and transform.

let arr = new Array(5); 
let mappedArr = arr.map((x, i) => i); 
console.log(mappedArr);

let arr = new Array(5); 

let mappedArr = arr.map((x, i) => i); 

console.log(mappedArr);

[ <5 empty items> ]

Solutions to Avoid Weirdness

In order to solve the above weirdness, we can use different methods in JavaScript let us study them in detail.

Fill the Array with Values Using Array.prototype.fill()

We can avoid the above issue by using fill() method to populate the empty slots with values (e.g., undefined, null, or anything else). This will ensure that map() has actual elements to work with.

let arr = new Array(5).fill(undefined).map((_, index) => index); 
// Fills the array with undefined and 
// maps over the array to replace the values
console.log(arr); 

let arr = new Array(5).fill(undefined).map((_, index) => index); 

// Fills the array with undefined and 

// maps over the array to replace the values

console.log(arr);

[ 0, 1, 2, 3, 4 ]

Use Array.from() to Create Populated Arrays

We can use Array.from() to create an array of the specified length and then apply the mapping function to each element

let arr = Array.from({ length: 5 }, (_, index) => index); 
// Creates an array of 5 
// elements and maps index values directly
console.log(arr); 

let arr = Array.from({ length: 5 }, (_, index) => index); 

// Creates an array of 5 

// elements and maps index values directly

console.log(arr);

[ 0, 1, 2, 3, 4 ]

Use Spread Operator with Array Keys

We can use spread operator and Array.keys() to create and initialize arrays

let arr = [...Array(5).keys()]; 
// Uses Array.keys() to get an iterator 
// and spreads the keys into an array
console.log(arr); 

let arr = [...Array(5).keys()]; 

// Uses Array.keys() to get an iterator 

// and spreads the keys into an array

console.log(arr);

[ 0, 1, 2, 3, 4 ]

Conclusion

Through this article we understood that the issue with new Array(n) and map() arises because new Array(n) creates an array with empty slots, not actual elements. Since map() only works on existing elements, it ignores these empty slots. To resolve this issue, we can use methods like fill(), Array.from(), or other approaches that ensure the array has elements to map over.