Bubble Sort With JavaScript
By: Kent Roth
Tags: Learning To Code, JavaScript, Programming, Bubble Sort, 100daysofcode

Let’s Go!

The first thing we need to do is get the bubble sorter function started and get a couple of arrays, so it has something to do. For one array, we can use small numbers all close together. For the other, we’ll have a mix of numbers to put this thing to the test.

With this setup, we’ll have a function called bubbleSort , and it will have an argument that I’ll call array. We’ll make a call to the function so it runs when we run the file.

To make things a little easier, let’s create a const so we don’t have to type in array.length more than once. You can name the variables whatever you would like, but, for this piece, I want to keep them as descriptive as possible. With that, we also need to set up the first for loop to see if we can iterate over the numbers in our arrays.

Inside the initial for loop we’ll add another for loop . It’s like for loo p inception. The inner loop is the loop that will handle all of the work. Inside this loop is where we’ll do the checks to see which number is larger and decide if it would be shifted or stay where it is. The inner for loop will continue to run until it has moved to the end of the array.

Once this completes we’ll be transferred back to the first for loop and start the whole process over again. It will start moving through all the numbers again, grabbing the largest number, and keep moving to the right until it finds the second-largest number, and so on.

When I first looked at the code for how a bubble sorter worked, all seemed ok and made sense until I hit the if statement. Once I got to this part, I could not fully grasp what was going on. So if you’re looking at this code and thinking you’re lost, that is totally fine, and I understand that feeling 100%. I will explain it the best I can here. Then I’ll use the numbers from array2 to help clarify it a little more.

The if statement will only run if the number on the left is larger than the number on the right. The comparison is between the number at index J and the number at index J plus 1. Because we want to move the number at index J to the right, we use a variable to hold its value. In the next line, we are saying the number at index J is now the same as the number at index J plus 1. We don’t want to have the smaller number in two places so with the third line inside the if statement we place the larger number into the position on the right, which is index J plus 1. Once that is complete, we move on to the next number and repeat until we hit the end.

array2 = [800, 32, 91, 8, 1032, 473, 981, 218, 1031, 1]

Let’s break down what’s going on inside the if statement using numbers this time. Doing this helped me get a better understanding of what is going on.

The first two numbers we’re checking are 800 and 32. 800 is larger than 32, so we will move into the if statement. With the first line let bigNumber = 800 we use this variable to hold the 800 value for us while we adjust the number 32 over to the left. In the second line, we’re saying that we want to change the value of 800 (J) to 32 (J + 1).

If we stopped here the first two numbers of our array would be 32 because right now we are saying the value of J is equal to the value of J + 1. That’s not what we want. So with the last line, we want to drop 800 into the slot on the right. That’s why we use J + 1 is equal to bigNumber .

With that completed, our for loop would run. Now J would be 800 again, and J + 1 would now be 91. It would then put bigNumber equal to 800, and J and J + 1 would both be 91. Again we would drop 800 into the spot on the right, so now the first three numbers in our array2 are 32, 91, 800. The if statement would run again because 800 is larger than 8. But when we get to comparing 800 to 1032, we will not go into the if statement because 800 is now the smaller number.

The process above happens over and over until we get to the end of the array. So the first pass through the array will have 1032 as the last number. Because we hit the last spot of the array, the inner for loop would finish. But because the outer for loop is still at index 0, it would move to index 1 and start the process again. The purpose of the outer for loop is to make sure we go through the array enough times to fully sort all the numbers.