Creación de tabla HTML a partir de un array en JavaScript

Supongamos que tenemos una tabla vacía:

<table id="table"></table>

Supongamos también que tenemos un array bidimensional, por ejemplo, este:

let arr = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]];

Creemos una tabla HTML basada en este array, rellena con los elementos del array. Es decir, obtendremos una tabla con tres filas, cada una de las cuales tendrá 4 celdas.

Resolvamos el problema usando dos bucles for-of anidados:

let arr = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]];
let table = document.querySelector('#table');

for (let subArr of arr) {
	let tr = document.createElement('tr');
	
	for (let elem of subArr) {
		let td = document.createElement('td');
		td.textContent = elem;
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

Como puedes ver, nuestra solución resultó universal y no depende de la cantidad de subarrays ni de la cantidad de elementos en cada subarray. La única condición es que los subarrays tengan la misma cantidad de elementos.

Dado el array:

let arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12]];

Sin mirar la parte teórica de la lección, muestra los elementos del array dado en forma de tabla HTML table.

Modifica el problema anterior para que en la tabla se escriban no los elementos, sino los cuadrados de estos elementos.