El problema del callback hell en JavaScript

Supongamos que queremos cargar tres imágenes usando la función loadImage:

loadImage('img1.png', function(image, err) {
	document.body.append(image);
});
loadImage('img2.png', function(image, err) {
	document.body.append(image);
});
loadImage('img3.png', function(image, err) {
	document.body.append(image);
});

Hay algo que no está bien con este código. El problema es que las imágenes se agregarán al body a medida que se carguen. Es decir, nadie nos garantiza que las imágenes se agregarán exactamente en el orden que necesitamos.

Hay algo más. Supongamos que queremos hacer algo cuando las tres imágenes estén cargadas. En nuestro código, simplemente no podremos detectar ese momento, ya que las tres imágenes se cargan de forma independiente.

Bien, modifiquemos el código:

loadImage('img1.png', function(image1, err1) {
	document.body.append(image1);
	
	loadImage('img2.png', function(image2, err2) {
		document.body.append(image2);
		
		loadImage('img3.png', function(image3, err3) {
			document.body.append(image3);
			console.log('todas las imágenes están cargadas');
		});
	});
});

Resolvimos ambos problemas descritos. Sin embargo, obtuvimos otro a cambio. Todavía no es muy visible, pero imagina cómo se verá nuestro código si tiene la carga no de tres, sino, digamos, diez imágenes, más se agrega el manejo de excepciones. Como resultado, el código se volverá extremadamente ilegible: la complejidad del código crece de forma avalanchosa al anidar callbacks unos dentro de otros. Esta situación se llama callback hell - infierno de callbacks.

Reescribe el código proporcionado para que cargue 10 imágenes más el manejo de excepciones. Compruébá que obtienes la situación del callback hell.