saving each sorting step of a quicksort function in an array

I'm trying to understand sorting algorithms and recursion better. Therefore I'm trying to write different sorting algorithms and save each step of the sorting in an array, so I can do some visualization with the saved data. I came up with the following function to implement quicksort. It looks much different than most of the examples I've seen. But to my undertanding it is still a way of quicksort, it definitely returns the sorted array. Please correct me if I'm wrong:

const quickSort = (array) => {
if (!array.length) return array;
  const pivot = array.splice(
    Math.floor(Math.random() * (array.length)),
    1
  )[0];
  const less = [];
  const greater = [];
  while (array.length) {
    const x = array.splice(0, 1)[0];
    x < pivot ? less.push(x) : greater.push(x);
  }
  return quickSort(less).concat(pivot, quickSort(greater))
}

I changed the function in the following way, so I can save the entire array after each sorting step in another array:

const steps = []
const quickSort2 = (array, array2 = [[], []]) => {
  let arr = [...array];
  if (!arr.length) return arr;
  const pivot = arr.splice(Math.floor(Math.random() * (arr.length)), 1)[0],
    less = [],
    greater = [],
    a = [...array2[0]],
    b = [...array2[1]];
  steps.push(a.concat(pivot, arr, b));
  while (arr.length) {
    const x = arr.splice(0, 1)[0];
    x < pivot ? less.push(x) : greater.push(x);
    steps.push([...a, ...less, pivot, ...arr, ...greater, ...b])
  }
  
  return quickSort2(less, [a, [pivot, ...greater, ...b]]).concat(
    pivot,
    quickSort2(greater, [[...a, ...less, pivot], b])
  );
};

The function always returns the sorted array. Sometimes, I guess it must be depending on the randomly chosen pivot, the array steps looks just fine after the function ran. But sometimes it just doesn't and I don't really understand why. When I print the steps I can see how during the first steps the pivot moves further to the back, while sorting the smaller numbers to the front and pushing the bigger ones to the back. But further down the line I can find some bigger numbers in the front of the array again. I don't understand why. I hope I expressed myself in an understandable way and hopefully somebody with a better grasp of recursion can explain to me why it is behaving this way and how I could improve my function to make it do what I want.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW