As a beginner programmer, you may have heard of the term “sorting algorithms” but have no idea what they are or how they work. Well, fear not! In this article, we’ll be diving into one of the most basic sorting algorithms out there: bubble sort.
But before we get into the nitty-gritty of how bubble sort works, let’s first define what it is. Simply put, bubble sort is an algorithm that compares adjacent elements in an array and swaps their positions if they are not in the correct order. It continues to do this until the array is fully sorted.
Now that we have a basic understanding of bubble sort, let’s take a look at how it works with an example. Let’s say we have an array of numbers that we want to sort from least to greatest: [5, 2, 1, 4, 3]
.
Using bubble sort, we would first compare the first two elements, 5 and 2. Since 5 is greater than 2, we would swap their positions. The array would now look like this: [2, 5, 1, 4, 3]
.
Next, we would compare the second and third elements, 5 and 1. Since 5 is greater than 1, we would swap their positions. The array would now look like this: [2, 1, 5, 4, 3]
.
We would continue this process until we reach the end of the array. The final step would be comparing the fourth and fifth elements, 4 and 3. Since 4 is greater than 3, we would swap their positions. The final, sorted array would look like this: [1, 2, 3, 4, 5]
.
So, now that you have a better understanding of how bubble sort works, let’s take a look at some real-world use cases for this algorithm in JavaScript with a functional-oriented approach.
Example
Sorting a list of names alphabetically
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token keyword">const</span> <span class="token function-variable function">sortNames</span> <span class="token operator">=</span> <span class="token parameter">names</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> names<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator"><</span> names<span class="token punctuation">.</span>length <span class="token operator">-</span> i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>names<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">></span> names<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Swap names[j] and names[j + 1]</span> <span class="token keyword">let</span> temp <span class="token operator">=</span> names<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">;</span> names<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> names<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> names<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> temp<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> names<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> names <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'John'</span><span class="token punctuation">,</span> <span class="token string">'Bob'</span><span class="token punctuation">,</span> <span class="token string">'Sue'</span><span class="token punctuation">,</span> <span class="token string">'Alice'</span><span class="token punctuation">,</span> <span class="token string">'Zack'</span><span class="token punctuation">]</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sortNames</span><span class="token punctuation">(</span>names<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['Alice', 'Bob', 'John', 'Sue', 'Zack']</span> |
Sorting a list of numbers from least to greatest
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">const</span> <span class="token function-variable function">sortNumbers</span> <span class="token operator">=</span> <span class="token parameter">numbers</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> numbers<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator"><</span> numbers<span class="token punctuation">.</span>length <span class="token operator">-</span> i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>numbers<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">></span> numbers<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Swap numbers[j] and numbers[j + 1]</span> <span class="token keyword">let</span> temp <span class="token operator">=</span> numbers<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">;</span> numbers<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> numbers<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> numbers<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> temp<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> numbers<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
Sorting a list of products by price
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <span class="token keyword">const</span> <span class="token function-variable function">sortProducts</span> <span class="token operator">=</span> <span class="token parameter">products</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> products<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator"><</span> products<span class="token punctuation">.</span>length <span class="token operator">-</span> i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>products<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">.</span>price <span class="token operator">></span> products<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>price<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Swap products[j] and products[j + 1]</span> <span class="token keyword">let</span> temp <span class="token operator">=</span> products<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">;</span> products<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> products<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> products<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> temp<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> products<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> products <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Product A'</span><span class="token punctuation">,</span> price<span class="token operator">:</span> <span class="token number">9.99</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Product B'</span><span class="token punctuation">,</span> price<span class="token operator">:</span> <span class="token number">7.99</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Product C'</span><span class="token punctuation">,</span> price<span class="token operator">:</span> <span class="token number">12.99</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sortProducts</span><span class="token punctuation">(</span>products<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [{ name: 'Product B', price: 7.99 }, { name: 'Product A', price: 9.99 }, { name: 'Product C', price: 12.99 }]</span> |
Sorting a list of employees by their job titles
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <span class="token keyword">const</span> <span class="token function-variable function">sortEmployees</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">employees</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> employees<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator"><</span> employees<span class="token punctuation">.</span>length <span class="token operator">-</span> i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>employees<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">.</span>jobTitle <span class="token operator">></span> employees<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>jobTitle<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Swap employees[j] and employees[j + 1]</span> <span class="token keyword">let</span> temp <span class="token operator">=</span> employees<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">;</span> employees<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> employees<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> employees<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> temp<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> employees<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> employees <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">"John"</span><span class="token punctuation">,</span> jobTitle<span class="token operator">:</span> <span class="token string">"Manager"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">"Sue"</span><span class="token punctuation">,</span> jobTitle<span class="token operator">:</span> <span class="token string">"Developer"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">"Alice"</span><span class="token punctuation">,</span> jobTitle<span class="token operator">:</span> <span class="token string">"Designer"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">"Bob"</span><span class="token punctuation">,</span> jobTitle<span class="token operator">:</span> <span class="token string">"Salesperson"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sortEmployees</span><span class="token punctuation">(</span>employees<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [</span> <span class="token comment">// { name: 'Alice', jobTitle: 'Designer' },</span> <span class="token comment">// { name: 'Sue', jobTitle: 'Developer' },</span> <span class="token comment">// { name: 'John', jobTitle: 'Manager' },</span> <span class="token comment">// { name: 'Bob', jobTitle: 'Salesperson' }</span> <span class="token comment">// ]</span> |
Sorting a list of cities by their population
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <span class="token keyword">const</span> <span class="token function-variable function">sortCities</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">cities</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> cities<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator"><</span> cities<span class="token punctuation">.</span>length <span class="token operator">-</span> i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>cities<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">.</span>population <span class="token operator">></span> cities<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>population<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Swap cities[j] and cities[j + 1]</span> <span class="token keyword">let</span> temp <span class="token operator">=</span> cities<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">;</span> cities<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> cities<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> cities<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> temp<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> cities<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> cities <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">"New York"</span><span class="token punctuation">,</span> population<span class="token operator">:</span> <span class="token number">8175133</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">"Los Angeles"</span><span class="token punctuation">,</span> population<span class="token operator">:</span> <span class="token number">3792621</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">"Chicago"</span><span class="token punctuation">,</span> population<span class="token operator">:</span> <span class="token number">2695598</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">"Houston"</span><span class="token punctuation">,</span> population<span class="token operator">:</span> <span class="token number">2130332</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sortCities</span><span class="token punctuation">(</span>cities<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [</span> <span class="token comment">// { name: 'Houston', population: 2130332 },</span> <span class="token comment">// { name: 'Chicago', population: 2695598 },</span> <span class="token comment">// { name: 'Los Angeles', population: 3792621 },</span> <span class="token comment">// { name: 'New York', population: 8175133 }</span> <span class="token comment">// ]</span> |
Performance and Limitations of Bubble Sort
Now that we’ve seen some practical examples of using bubble sort in JavaScript, let’s talk about the performance and limitations of this algorithm.
One of the main limitations of bubble sort is its time complexity. Specifically, bubble sort has a time complexity of O(n^2)
, meaning that it becomes increasingly slower as the size of the input increases. This makes it a less efficient option for sorting large lists.
However, bubble sort does have some benefits. It is a simple and easy-to-understand algorithm, making it a good choice for beginners. It is also a stable sort, meaning that it preserves the relative order of elements with equal keys.
Conclusion
In conclusion, bubble sort is a simple and easy-to-understand algorithm that can be useful for sorting small lists. While it is not the most efficient algorithm for larger lists, it can still be a useful tool in certain situations. Remember to keep its time complexity in mind when deciding whether or not to use bubble sort for your sorting needs.
As always, I hope you enjoyed this article and learned something new.
Thank you and see you in the next articles!
If you liked this article, please give me a like and subscribe to support me. Thank you.