Το πρόβλημα του callback hell στην JavaScript

Ας υποθέσουμε ότι θέλουμε να φορτώσουμε τρεις εικόνες χρησιμοποιώντας τη συνάρτηση 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);
});

Υπάρχει κάτι λάθος με αυτόν τον κώδικα. Το γεγονός είναι ότι οι εικόνες θα προστίθενται στο body καθώς φορτώνονται. Δηλαδή, κανείς δεν μας εγγυάται ότι οι εικόνες θα προστεθούν ακριβώς στη σειρά που χρειαζόμαστε.

Υπάρχει και κάτι ακόμα. Ας υποθέσουμε ότι θέλουμε να κάνουμε κάτι, αφού φορτωθούν και οι τρεις εικόνες. Στον κώδικά μας απλά δεν μπορούμε να πιάσουμε αυτή τη στιγμή, αφού και οι τρεις εικόνες φορτώνονται ανεξάρτητα.

Εντάξει, ας ξαναγράψουμε τον κώδικα:

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('όλες οι εικόνες έχουν φορτωθεί');
		});
	});
});

Λύσαμε και τα δύο προβλήματα που περιγράψαμε. Ωστόσο, αποκτήσαμε ένα άλλο σε αντάλλαγμα. Προς το παρόν δεν είναι πολύ ορατό, αλλά φανταστείτε πώς θα φαίνεται ο κώδικάς μας, εάν σε αυτόν υπήρχε φόρτωση όχι τριών, αλλά, ας πούμε, δέκα εικόνων, συν την προσθήκη επεξεργασίας εξαιρέσεων. Ως αποτέλεσμα, ο κώδικας θα γίνει εξαιρετικά δυσανάγνωστος: η πολυπλοκότητα του κώδικα αυξάνεται χιονοστιβάδα με την ένθεση των callbacks το ένα μέσα στο άλλο. Αυτή η κατάσταση ονομάζεται callback hell - η κόλαση των callbacks.

Ξαναγράψτε τον παραπάνω κώδικα έτσι ώστε σε αυτόν να υπάρχει φόρτωση 10 εικόνων συν την επεξεργασία εξαιρέσεων. Βεβαιωθείτε ότι προκύπτει η κατάσταση callback hell.