Heap Insert Operation Bubble Up in DSA Javascript - Build from Scratch

Heap Insert Operation Bubble Up

📖 Scenario: You are managing a priority queue for tasks using a min-heap. When a new task with a priority number is added, it must be placed correctly to keep the heap property intact.

🎯 Goal: Build a min-heap insert operation that adds a new number to the heap array and uses bubble up to restore the heap order.

📋 What You'll Learn

Create an array called heap with the exact values [10, 15, 20, 17, 25]

Create a variable called newValue and set it to 8

Write a function called bubbleUp that takes the heap array and bubbles up the last element to maintain min-heap order

Call the bubbleUp function after adding newValue to heap

Print the heap array after insertion and bubble up

💡 Why This Matters

🌍 Real World

Priority queues are used in task scheduling, network routing, and event management where the smallest or highest priority item must be processed first.

💼 Career

Understanding heap insertions and bubble up operations is essential for software engineers working on performance-critical applications, algorithms, and data structure implementations.

1

Create the initial heap array

Create an array called heap with these exact values: [10, 15, 20, 17, 25]

DSA Javascript

// Create the heap array with the given values
// Your code here

Hint

Use const heap = [10, 15, 20, 17, 25]; to create the array.

2

Add the new value to insert

Create a variable called newValue and set it to 8

DSA Javascript

const heap = [10, 15, 20, 17, 25];
// Create the newValue variable and set it to 8
// Your code here

Hint

Use const newValue = 8; to create the variable.

3

Write the bubbleUp function and insert newValue

Write a function called bubbleUp that takes the heap array and bubbles up the last element to maintain min-heap order. Then add newValue to heap and call bubbleUp(heap)

DSA Javascript

const heap = [10, 15, 20, 17, 25];
const newValue = 8;

// Write bubbleUp function and insert newValue
// Your code here

Hint

Use a while loop to compare the last element with its parent and swap if smaller.

4

Print the heap after insertion and bubble up

Print the heap array after insertion and bubble up using console.log(heap)

DSA Javascript

const heap = [10, 15, 20, 17, 25];
const newValue = 8;

function bubbleUp(heap) {
    let index = heap.length - 1;
    while (index > 0) {
        let parentIndex = Math.floor((index - 1) / 2);
        if (heap[index] >= heap[parentIndex]) {
            break;
        }
        // Swap
        [heap[index], heap[parentIndex]] = [heap[parentIndex], heap[index]];
        index = parentIndex;
    }
}

heap.push(newValue);
bubbleUp(heap);

// Print the heap array
// Your code here

Hint

Use console.log(heap) to print the array.

Practice

1. What is the main purpose of the bubble up operation when inserting a new element into a max heap?

easy

A. To move the new element up until the heap property is restored

B. To move the new element down to the bottom of the heap

C. To remove the smallest element from the heap

D. To sort all elements in ascending order

Solution

1. Step 1: Understand heap property

   A max heap requires each parent to be greater than or equal to its children.

2. Step 2: Purpose of bubble up

   When a new element is added at the end, bubble up moves it up to restore the max heap property.

3. Final Answer:

   To move the new element up until the heap property is restored -> Option A

4. Quick Check:

   Bubble up fixes heap by moving element up [OK]

Hint: Bubble up moves new element up to fix heap [OK]

Common Mistakes:

• Thinking bubble up moves element down
• Confusing bubble up with removing elements
• Assuming bubble up sorts entire heap

2. Which of the following is the correct syntax to swap two elements at indices i and parentIndex in a JavaScript array heap during bubble up?

easy

A. [heap[i], heap[parentIndex]] = [heap[parentIndex], heap[i]];

B. heap.swap(i, parentIndex);

C. swap(heap[i], heap[parentIndex]);

D. heap[i], heap[parentIndex] = heap[parentIndex], heap[i];

Solution

1. Step 1: Identify JavaScript swap syntax

   JavaScript uses array destructuring to swap: [a, b] = [b, a];

2. Step 2: Apply to heap array

   Swapping heap[i] and heap[parentIndex] is done by [heap[i], heap[parentIndex]] = [heap[parentIndex], heap[i]];

3. Final Answer:

   [heap[i], heap[parentIndex]] = [heap[parentIndex], heap[i]]; -> Option A

4. Quick Check:

   Destructuring swap syntax = [heap[i], heap[parentIndex]] = [heap[parentIndex], heap[i]]; [OK]

Hint: Use array destructuring to swap in JS [OK]

Common Mistakes:

• Using Python-style swap syntax
• Calling undefined swap function
• Trying to use non-existent array method

3. Given the max heap array [50, 30, 40, 10, 20], what will be the heap array after inserting 45 and performing bubble up?

medium

A. [50, 45, 40, 10, 20, 30]

B. [50, 30, 40, 10, 20, 45]

C. [45, 30, 50, 10, 20, 40]

D. [50, 30, 45, 10, 20, 40]

Solution

1. Step 1: Insert 45 at the end

   Heap becomes [50, 30, 40, 10, 20, 45]

2. Step 2: Bubble up 45

   Parent index of 45 (index 5) is 2 (value 40). Since 45 > 40, swap them. New heap: [50, 30, 45, 10, 20, 40]

3. Final Answer:

   [50, 30, 45, 10, 20, 40] -> Option D

4. Quick Check:

   Bubble up swaps 45 with 40 [OK]

Hint: Insert at end, then swap up if bigger than parent [OK]

Common Mistakes:

• Not swapping after insertion
• Swapping with wrong parent index
• Assuming insertion sorts entire heap

4. Consider this bubble up code snippet for a max heap insertion:

while (i > 0 && heap[i] > heap[parentIndex]) {
  [heap[i], heap[parentIndex]] = [heap[parentIndex], heap[i]];
  i = parentIndex;
  parentIndex = Math.floor((i - 1) / 2);
}

What is the bug if parentIndex is not updated inside the loop?

medium

A. Syntax error due to missing semicolon

B. Heap property is restored correctly

C. Loop terminates prematurely after one swap because parentIndex never changes

D. The loop never runs because i is never updated

Solution

1. Step 1: Understand loop variables

   Inside the loop, after swap i = parentIndex, but if parentIndex is not updated, i now equals the unchanged parentIndex.

2. Step 2: Consequence of not updating parentIndex

   The condition heap[i] > heap[parentIndex] becomes heap[pos] > heap[pos] which is false, causing premature loop termination without full restoration.

3. Final Answer:

   Loop terminates prematurely after one swap because parentIndex never changes -> Option C

4. Quick Check:

   Without parentIndex update, i == parentIndex stops loop early [OK]

Hint: Always update parentIndex after swapping [OK]

Common Mistakes:

• Forgetting to update parentIndex
• Assuming i update is enough
• Ignoring loop condition effects

5. You have a min heap represented as [5, 10, 15, 20, 25]. You want to insert 12 and maintain the min heap property using bubble up. Which of the following sequences correctly shows the heap array after each bubble up swap?

medium

A. [5, 10, 15, 20, 25, 12] -> [5, 10, 15, 20, 25, 12]

B. [5, 10, 15, 20, 25, 12] -> [5, 10, 12, 20, 25, 15]

C. [5, 10, 15, 20, 25, 12] -> [5, 12, 15, 20, 25, 10]

D. [5, 10, 15, 20, 25, 12] -> [12, 10, 15, 20, 25, 5]

Solution

1. Step 1: Insert 12 at the end

   Heap becomes [5, 10, 15, 20, 25, 12]

2. Step 2: Bubble up 12

   Parent index of 12 (index 5) is 2 (value 15). Since 12 < 15, swap them. New heap: [5, 10, 12, 20, 25, 15]

3. Final Answer:

   [5, 10, 15, 20, 25, 12] -> [5, 10, 12, 20, 25, 15] -> Option B

4. Quick Check:

   Bubble up swaps 12 with 15 in min heap [OK]

Hint: In min heap, bubble up swaps if child < parent [OK]

Common Mistakes:

• Swapping with wrong parent
• Not swapping when child is smaller
• Confusing min heap with max heap rules