Bubble Sort in JavaScript

So.. what is Bubble Sort?

Bubble sort is a sorting algorithm where it compares adjcient values and sees if they are in order through an array continuously passing through it until all the values are in order. This provides a great visual explanation of what bubble sort does.

OK, let’s jump right in!

So lets start off by making an array so when we write our sorting function we can see if it works.

x = [1,22,11,24];

Great, now we will be using a function using JS. Let us begin by writing the function skeleton. Lets call our function bubbleSort.

function bubbleSort(){}

We are going to use the do/while statement used in JavaScript within our function. We know we want our function to swap values until our array is completely in order a do/while will work well for this.

function bubbleSort(arr){
 do{} while()
}

Next, we’ll itterate throught our array by using a for loop. Let out it in the loop We want to start from the beginning of the array so we want to let i = 0. We want to loop through the entire loop at least once so we’ll want to write i < arr.length. We’ll want the final piece of our loop called the incrementor to be i++; we want our loop to move through our loop one at a time.

function bubbleSort(arr){
do{ 
 for(let i=0; i < arr.length; i++)
}
while()

Okay, now we’ll have to create a variable to hold a single value in the array at one time. We’ll call the variable sorted and create a boolean.

function bubbleSort(arr){
 let sorted;
 do{ 
 let sorted = false;
 for(let i=0; i < arr.length; i++){
 }
}
 
}
while(sorted)

Next well have to tell be able to program the loop to swap the number if the
number on the left is greater than the number on the right of it. We’ll use a
if/then statement. Below is how we will write it.

for(let i=0; i < arr.length; i++){
 if(x[i] > x[i+1]){
};

Now we’ll have to create a variable to incase the variable when it is not
sorted and make it swap the values. We want the loop to continue looping around array until all the values are in order and return sorted as true so the function can finish.

for(let i=0; i < arr.length; i++){
 if(x[i] > x[i+1]){
 sorted = false;
 let temp = x[i];
 x[i] = x[i+1];
 x[i+1] = temp;
 sorted = true;
 }

Okay, let’s put all the pieces together and call the function and console.log our Array as our bubbleSort function has not created a new array but altered our original array.

x = [1,22,11,24];
function bubbleSort(x){
 let sorted;
 do{ 
 let sorted = false;
 for(let i=0; i < x.length; i++){
 if(x[i] > x[i+1]){
 sorted = false;
 let temp = x[i];
 x[i] = x[i+1];
 x[i+1] = temp;
 sorted = true;
 }
}
} while(sorted);
}
bubbleSort(x);
console.log(x)
// console returns [1,11,22,24];

Awesome, we’ve done it!

Although Bubble Sort is not thought of highly, it allows us to further understand how a function in JS works and also how to problem solve as a developer in general.

Thanks for reading!

Andres Recinos

Like what you read? Give Dre Recinos a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.