## Working of Bubble Sort

Suppose we want to sort our array in ascending order. It starts working by comparing the left index to the right index. Initially, it will compare the values of the first two indexes of the array. The value of the 0th index will be replaced only when the 1st index carries a smaller value than the 0th index’s value. Next, it will compare the value of index 1 with the value of index 2, and so on.

Suppose we have the following unsorted array:

We know that in arrays indexing starts from 0. So initially, **“8”** is stored at the 0th index, **“3”** is stored at the first index, **“1”** is stored at the second index, and so on. Now, we have to sort this array in ascending order as shown in the below-given array:

Now, we will explain the working of bubble sort step by step.

## Step 1

In the beginning, index 0 carries 8 while index 1 carries 3. Since we have to sort the array in ascending order, therefore, the value of index 0 will be replaced with the value of index 1. Now, the updated array will be:

Now the value of index 1 will be compared with the value of index 2. The value of index 1 is 8 while the value of index 2 is 1 which is less than 8, so it will be swapped and the array will be modified as:

Now, we will make a comparison between index 2 and index 3. The value of index 2 is 8 which is greater than the value of index 3 which is 2 so the values will be swapped:

Now compare the value of index 3 with the value of index 4. At index 3 value is 8 while at index 4 value is -1 which means both these values will be swapped:

Finally, the value of index 4 will be compared with the value of index 5. Again 8 is greater than 7 so, it will be replaced with 7:

Now, the first iteration is complete, and “8” reaches its appropriate position. So, in the next step, the comparisons will be made till the 4th index since the value of the last index is sorted.

## Step 2:

Now, the first two indexes will be compared. The value of the 1st index is less than the value of the 0th index therefore there values will be swapped:

Next, we will compare the value of the 1st index with the value of the 2nd index. Here, 3 is greater than 2 so, it will be replaced with 2:

Now we will compare the value of 2nd and 3rd index i.e. 3(at 2nd index) with the value of the 3rd index which is -1. Values will be swapped again since 3 is greater than -1:

The value of the 3rd index is already less than the value of the 4th index so, it will remain the same:

Now the last two indexes are sorted and the values are placed properly on the 4th and 5th indexes.

## Step 3:

Now in this iteration, initially the value of the 0th index will be compared with the value of the 1st index. Here, the value of the 0th index is 1 which is already less than the value of the 1st index which is 2. So, these values will remain the same.

Next, compare the next two indexes, here the value of the 1st index is greater than the value of the 2nd index therefore, their values will be swapped:

The value of the 2nd index is already less than the value of the 3rd index therefore, their values will not be swapped:

## Step 4:

Compare the first two indexes. The value of the 0th index is 1, which is less than the value of the 1st index(-1), so it will be swapped:

Next, we will compare the value of the 1st index with the value of the 2nd index. They are already sorted, so they will remain the same:

Finally, our array is sorted in ascending order.

## Implementation of Bubble Sort in JavaScript

Since we understood how bubble sort works, now we will implement this logic in JavaScript using nested loops:

leti, j;

varflag = false;

for(i =0; i<ary.length; i++)

{

flag = false;

for(j = 0; jary[j + 1])

{

vartemp = ary[j]

ary[j] = ary[j+1];

ary[j+1] = temp;

flag = true;

}

}

if(!flag)

{

break;

}

}

console.log(ary)

}

varary = [8, 3, 1, 2, -1, 7];

bubbleSort(ary);

In the above-given code, we created an array named **‘ary’ **and assigned some data to it. Afterwards, we created a function named **bubbleSort **and we passed the array to it. A variable named **‘flag’ **is initially assigned with a value **‘false’**. This flag will be used to verify if the array is completely sorted out or not. Next, the for-loop is initialized with the 0 and it will execute until it is less than the array length.

Nested for-loop is utilized to draw a comparison of the value at the current index with the value at the adjacent index, the values will be swapped only if the value of the current index is higher than the value present at its adjacent index. The value of the flag will be replaced with true if any value is swapped during iteration.

Once the inner loop is done, the flag variable is checked. If the flag variable stays false, it means that the array is already sorted out and the inner loop has not changed anything. In such a case, simply break the loop.

Finally, the array is passed to the **bubbleSort()** function. The output will be:

## Conclusion

Bubble sort is a basic sorting algorithm that swaps the side-by-side elements over and over again until they are not in proper order. In this article, we presented all the basics and essential knowledge needed to understand the concept of bubble sort in JavaScript. Starting with the introduction that described what bubble sort is and how it works. Then we took an example to understand the concept of bubble sort. Furthermore, we implemented the same example in JavaScript and discussed its working in detail.