Bubble Sort Algorithm in JavaScript

JavaScriptJavaScriptBeginner
Practice Now

This tutorial is from open-source community. Access the source code

Introduction

In this lab, we will be working on a JavaScript programming exercise that focuses on sorting arrays using the bubble sort algorithm. The purpose of this lab is to help you understand how the bubble sort algorithm works, as well as to give you an opportunity to practice your JavaScript programming skills. By the end of this lab, you will have a better understanding of how to implement the bubble sort algorithm in JavaScript, and how to use it to sort arrays of numbers.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("`Conditional Statements`") javascript/BasicConceptsGroup -.-> javascript/loops("`Loops`") javascript/BasicConceptsGroup -.-> javascript/array_methods("`Array Methods`") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("`Spread and Rest Operators`") subgraph Lab Skills javascript/variables -.-> lab-28180{{"`Bubble Sort Algorithm in JavaScript`"}} javascript/data_types -.-> lab-28180{{"`Bubble Sort Algorithm in JavaScript`"}} javascript/arith_ops -.-> lab-28180{{"`Bubble Sort Algorithm in JavaScript`"}} javascript/comp_ops -.-> lab-28180{{"`Bubble Sort Algorithm in JavaScript`"}} javascript/cond_stmts -.-> lab-28180{{"`Bubble Sort Algorithm in JavaScript`"}} javascript/loops -.-> lab-28180{{"`Bubble Sort Algorithm in JavaScript`"}} javascript/array_methods -.-> lab-28180{{"`Bubble Sort Algorithm in JavaScript`"}} javascript/spread_rest -.-> lab-28180{{"`Bubble Sort Algorithm in JavaScript`"}} end

Bubble Sort Algorithm

To practice coding, open the Terminal/SSH and type node to start. The bubble sort algorithm sorts an array of numbers.

Steps to sort an array using the bubble sort algorithm:

  1. Declare a variable, swapped, that indicates if any values were swapped during the current iteration.

  2. Use the spread operator (...) to clone the original array, arr.

  3. Use a for loop to iterate over the elements of the cloned array, terminating before the last element.

  4. Use a nested for loop to iterate over the segment of the array between 0 and i, swapping any adjacent out of order elements and setting swapped to true.

  5. If swapped is false after an iteration, no more changes are needed, so the cloned array is returned.

Example code:

const bubbleSort = (arr) => {
  let swapped = false;
  const a = [...arr];
  for (let i = 1; i < a.length; i++) {
    swapped = false;
    for (let j = 0; j < a.length - i; j++) {
      if (a[j + 1] < a[j]) {
        [a[j], a[j + 1]] = [a[j + 1], a[j]];
        swapped = true;
      }
    }
    if (!swapped) return a;
  }
  return a;
};

bubbleSort([2, 1, 4, 3]); // [1, 2, 3, 4]

Summary

Congratulations! You have completed the Bubble Sort lab. You can practice more labs in LabEx to improve your skills.

Other JavaScript Tutorials you may like