Bubble Sort Algorithm - Interactive Tutorial

Master the bubble sort algorithm with interactive visualization, step-by-step explanations, and hands-on TypeScript implementation. Perfect for beginners learning sorting algorithms.

beginner⏱️ 20 min

📚 Lesson: Bubble Sort Algorithm

Welcome to your interactive lesson on Bubble Sort! This fundamental sorting algorithm gets its name because smaller elements "bubble" to the top (beginning) of the list, much like bubbles rise in water. Let's explore how it works through visualization and hands-on practice.

🎯 Learning Objectives

✓Understand the bubble sort algorithm's step-by-step process
✓Analyze time and space complexity
✓Identify when to use (and not use) bubble sort
✓Implement bubble sort in code

🎮 Interactive Visualization

Pass:0

Comparisons:0

Swaps:0

Speed:600ms

Click "Start Sort" to begin

Speed:

💡 Understanding the Algorithm

The Core Idea

Bubble Sort works by repeatedly comparing adjacent elements and swapping them if they're in the wrong order. After each pass through the array, the largest unsorted element "bubbles up" to its correct position at the end.

Step-by-Step Process

1Start at the beginning of the array
2Compare the first two adjacent elements
3If they're in the wrong order (first > second), swap them
4Move to the next pair of adjacent elements
5Repeat until you reach the end of the array
6Start again from the beginning for the next pass
7Continue until no swaps are needed (array is sorted)

📊 Complexity Analysis

Time Complexity

Best Case:O(n)

When array is already sorted

Average Case:O(n²)

Random order elements

Worst Case:O(n²)

Reverse sorted array

Space Complexity

Auxiliary Space:O(1)

In-place sorting algorithm

Note: Bubble sort modifies the original array directly without requiring extra space for another array.

💻 Code Implementation

TypeScript Implementation

bubbleSort.ts

1function bubbleSort<T>(arr: T[]): T[] {
2  const n = arr.length;
3  
4  // Outer loop for each pass
5  for (let i = 0; i < n - 1; i++) {
6    let swapped = false;
7    
8    // Inner loop for comparisons in current pass
9    for (let j = 0; j < n - i - 1; j++) {
10      // Compare adjacent elements
11      if (arr[j] > arr[j + 1]) {
12        // Swap if they're in wrong order
13        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
14        swapped = true;
15      }
16    }
17    
18    // Optimization: if no swaps, array is sorted
19    if (!swapped) {
20      console.log(`Array sorted early at pass ${i + 1}`);
21      break;
22    }
23  }
24  
25  return arr;
26}
27
28// Example usage with type annotations
29const numbers: number[] = [64, 34, 25, 12, 22, 11, 90];
30console.log("Original:", numbers);
31console.log("Sorted:", bubbleSort([...numbers]));
32
33// Works with other types too
34const words: string[] = ["zebra", "apple", "orange", "banana"];
35console.log("Sorted words:", bubbleSort([...words]));

Python Implementation

bubble_sort.py

1def bubble_sort(arr):
2    n = len(arr)
3    
4    # Traverse through all array elements
5    for i in range(n - 1):
6        swapped = False
7        
8        # Last i elements are already in place
9        for j in range(n - i - 1):
10            # Swap if the element found is greater than the next
11            if arr[j] > arr[j + 1]:
12                arr[j], arr[j + 1] = arr[j + 1], arr[j]
13                swapped = True
14        
15        # If no swapping happened, array is sorted
16        if not swapped:
17            print(f"Array sorted early at pass {i + 1}")
18            break
19    
20    return arr
21
22# Example usage
23numbers = [64, 34, 25, 12, 22, 11, 90]
24print("Original:", numbers)
25print("Sorted:", bubble_sort(numbers.copy()))

✅ Advantages

•Simple to understand and implement
•No extra memory needed (in-place)
•Stable sort (preserves order of equal elements)
•Can detect if list is already sorted
•Adaptive (performs well on nearly sorted data)

❌ Disadvantages

•Very slow for large datasets (O(n²))
•Many unnecessary comparisons
•Not suitable for real-world large data
•Outperformed by most other algorithms
•High number of write operations

🌍 Real-World Applications

When to Use Bubble Sort

→Teaching sorting algorithms concepts
→Small datasets (< 10 elements)
→Checking if data is already sorted
→When simplicity matters more than speed

Better Alternatives

→Quick Sort: O(n log n) average case
→Merge Sort: O(n log n) guaranteed
→Heap Sort: O(n log n) in-place
→Insertion Sort: Better for small arrays

🧑‍💻 Interactive Exercise: Implement Bubble Sort

Your task is to implement the bubble sort algorithm in TypeScript. The function should sort an array of elements in ascending order.

📋 Requirements:

Sort the array in ascending order (smallest to largest)
Use the bubble sort algorithm (compare and swap adjacent elements)
The function should work with any comparable type (using TypeScript generics)
Return the sorted array

// Implement the bubbleSort function
// It should take an array of numbers and return the sorted array

function bubbleSort<T>(arr: T[]): T[] {
  // TODO: Implement bubble sort here
  // Hint: Use two nested loops
  // The outer loop controls the number of passes
  // The inner loop compares adjacent elements and swaps them if needed
  
  return arr; // This currently returns the unsorted array
}

// DO NOT EDIT BELOW THIS LINE
export { bubbleSort };

Open Sandbox

💡 Tips for Success:

Click "Run" to test your implementation against all test cases
Read the console output carefully to see which tests pass or fail
Start with the basic implementation, then add optimizations
Remember that TypeScript's generic type T allows the function to work with any comparable type
If you get stuck, use the hints or check the solution to learn

📝 Practice Problems

Problem 1: Modify bubble sort to sort in descending order.
Hint: Change the comparison from arr[j] > arr[j+1] to arr[j] < arr[j+1]
Problem 2: Count and return the total number of swaps performed.
Hint: Add a counter variable that increments each time you swap elements.
Problem 3: Implement "Cocktail Sort" (bidirectional bubble sort).
Hint: Alternate between forward and backward passes through the array.
Problem 4: Sort an array of strings alphabetically using bubble sort.
Hint: Use str1.localeCompare(str2) for comparison.

🎓 Lesson Summary

Bubble Sort is a simple comparison-based sorting algorithm that's perfect for learning fundamental sorting concepts. While it's not efficient for large datasets due to its O(n²) time complexity, it remains valuable for educational purposes and small data sets.

Remember: The key insight is that after each pass, the largest element "bubbles up" to its correct position, and we can optimize by checking if any swaps occurred.

Next Steps: Try implementing the practice problems, then explore more efficient algorithms like Quick Sort or Merge Sort to see how they improve upon Bubble Sort's limitations.