Defined or Undefined? Нюансы создания массивов в JavaScript

Прост для полноты положу тут, как красиво создавать заполненные (неразрежённые) массивы без грязных хаков с апплаями:

const matrix = new Array(5).fill(
  new Array(5).fill()
)

Мне кажется, в любом учебнике по JS написано, что

const arr = new Array(5)

создаёт массив без элементов, но с заданной длиной.
Это будет эквивалентно такому коду:

const arr = [];
arr.length = 5;

проблема этого кода

let arr = new Array(5).map(function() { return new Array(5); });

не в методе создания массива, а в методе `map`
первый же абзац говорит что `map` не вызывает callback если значение в массиве не было инициализированно. Но про этом если присвоить элементу массива `undefined` это считается проинициализированным.

var ar = new Array(5);ar[2] = void 0; ar.map((v,i) => console.log(v,i)) // undefined 2

в итоге немного изменив код получим желаемый результат

new Array(5).fill(void 0).map(() => new Array(5));

Статья обновлена: помимо несущественных правок и изменения оформления, добавлено немного информации про работу метода Array.prototype.map(). Если кому интересно, можете ознакомиться.
Спасибо.

Только сейчас обратил внимание, что несмотря на то, что указано, что метод

const matrix = new Array(5).fill(
  new Array(5).fill()
)

или в такой форме

[...Array(5)].fill([...Array(5)])

приведенный napa3um'ом(тут ) и qbz'ом (тут) соответственно, не рабочий (а подметил это TheShock — здесь и здесь)), по причине:

const matrix = [...Array(5)].fill([...Array(5)]);
matrix[1][2] = 42;

console.log(matrix);
/*
(5) […]
​0: Array(5) [ undefined, undefined, 42, … ]
​1: Array(5) [ undefined, undefined, 42, … ]
​2: Array(5) [ undefined, undefined, 42, … ]
​3: Array(5) [ undefined, undefined, 42, … ]
​4: Array(5) [ undefined, undefined, 42, … ]
​length: 5
*/

ответа на то, почему именно так происходит, тогда не прозвучало.

Дело в том, что используя функцию Array.prototype.fill() в качестве заполнителя, мы должны учитывать один немаловажный нюанс: если мы передаём ей объект, коим безусловно является и массив, то передаётся не n отдельных экземпляров, а 5 ссылок на один объект, и, когда мы выполняем операцию

arr[1][2] = 42;

мы меняем третий элемент в этом объекте и это изменение отражается во всех остальных ячейках массива, где присутствует ссылка на этот объект.

Для примера и наглядности:

const matrix = [...Array(5)].fill({test:""});
console.log(matrix);
/*
(5) […]
​0: Object { test: "" }
​1: Object { test: "" }
​2: Object { test: "" }
​3: Object { test: "" }
​4: Object { test: "" }
​length: 5
*/

matrix[0].test = 42;
console.log(matrix);
/*
(5) […]
​0: Object { test: 42 }
​1: Object { test: 42 }
​2: Object { test: 42 }
​3: Object { test: 42 }
​4: Object { test: 42 }
​length: 5
​*/

Ну, а когда мы используем Array.prototype.fill() в функции вроде

const matrix = Array.from(Array(5), () => Array(5).fill())

мы имеем пять различных объектов и получаем на выходе корректную матрицу, так как Array.prototype.fill() вызывается 5 раз (по разу на каждый элемент) находясь в map функции метода Array.from().

Конечно, для кого то все эти вещи могут показаться очевидными, но, цитируя одного из упомянутых выше комментаторов: «просто для полноты картины», решил закрыть этот подвисший вопрос, и, возможно, кому-то это по итогу может оказаться полезным.