Visualized bubble sort

Question

Recently I created a small app using JavaScript, and I would love for some JavaScript developers if they have the time of day, to tell me their opinions so I can grow and improve.

I'm mostly working on back-end tasks with PHP and Go, but I thought making something small in JS would be fun attempt.

Basically it's an app that sorts an image based on users choice of sorting algorithm. You first say how many rows and columns want, and past an image URL. The app then shuffles it and asks you what sort do you want.

It is then visual when sorting it back to original.

I know this is not a typical question, but I would love to get some opinions on code, and look of app. So, what do you think? Any recommendation ?

GitHub of project:

https://github.com/fvukojevic/Image-Sorting-Visualizer (if someone wants to star 😁 😁) Application: https://image-sorting-visualizer.herokuapp.com/

Example of one sorting algorithm where I'm saving every swap into an array of "animations":

function bubbleSort(arrayCopy, animations) {
    let sorted = false;
    let counter = 0;
    while(!sorted){
        sorted = true;
        for(let i=0;i<arrayCopy.length -1 - counter; i++) {
            if(arrayCopy[i].val > arrayCopy[i+1].val){
                swap(i, i+1, arrayCopy);
                sorted = false;
                animations.push([i, i+1]);
            }
        }
        counter++
    }
}

Answer 1

A short review

• This code passes jshint perfectly, well done. Besides the obvious warning that you did not provide swap of course
• The name arrayCopy is perhaps unfortunate, since this works on any array whether it is a copy or not
• The name bubbleSort also does not perfectly describe what is going on, it not only bubble sorts the array, but it also tracks the swaps in an animations array
• I keep thinking that providing the animations array in the function call is weird, I would return the animations instead, the caller can concat if needed
• I see little point in providing an array with i and i+1 unless you animate with different kind of sorting algorithms, so you could just animations.push(i)
• Still, very maintainable, correct code.