Heap Sort Algorithm in DSA Javascript - Execution Trace

Concept Flow - Heap Sort Algorithm

Build Max Heap

↓

Heapify from last parent to root

↓

Swap root with last element

↓

Reduce heap size

↓

Heapify root

↓

Repeat swap and heapify until heap size is 1

↓

Sorted Array

Heap Sort first builds a max heap, then repeatedly swaps the root with the last element and heapifies the reduced heap until sorted.

Execution Sample

DSA Javascript

function heapSort(arr) {
  buildMaxHeap(arr);
  for (let end = arr.length - 1; end > 0; end--) {
    [arr[0], arr[end]] = [arr[end], arr[0]];
    heapify(arr, 0, end);
  }
}

This code sorts an array by building a max heap and then sorting by swapping and heapifying.

Execution Table

Step	Operation	Heap Size	Array State	Action/Pointer Changes	Visual State
1	Build Max Heap start	6	[4, 10, 3, 5, 1, 2]	Heapify from index 2 to 0	Initial array as heap
2	Heapify index 2	6	[4, 10, 3, 5, 1, 2]	No change, 3 > children	Heap unchanged
3	Heapify index 1	6	[4, 10, 3, 5, 1, 2]	No swap, 10 > 5 and 1	Heap unchanged
4	Heapify index 0	6	[10, 4, 3, 5, 1, 2]	Swap 4 and 10	Array: [10, 4, 3, 5, 1, 2]
5	Heapify index 1	6	[10, 5, 3, 4, 1, 2]	Swap 4 and 5	Array: [10, 5, 3, 4, 1, 2]
6	Max Heap built	6	[10, 5, 3, 4, 1, 2]	Heap ready	Max heap complete
7	Swap root and end	6	[2, 5, 3, 4, 1, 10]	Swap 10 and 2, reduce size to 5	Array: [2, 5, 3, 4, 1, 10]
8	Heapify root	5	[5, 2, 3, 4, 1, 10]	Swap 2 and 5	Array: [5, 2, 3, 4, 1, 10]
9	Heapify index 1	5	[5, 4, 3, 2, 1, 10]	Swap 2 and 4	Array: [5, 4, 3, 2, 1, 10]
10	Swap root and end	5	[1, 4, 3, 2, 5, 10]	Swap 5 and 1, reduce size to 4	Array: [1, 4, 3, 2, 5, 10]
11	Heapify root	4	[4, 1, 3, 2, 5, 10]	Swap 1 and 4	Array: [4, 1, 3, 2, 5, 10]
12	Heapify index 1	4	[4, 2, 3, 1, 5, 10]	Swap 1 and 2	Array: [4, 2, 3, 1, 5, 10]
13	Swap root and end	4	[1, 2, 3, 4, 5, 10]	Swap 4 and 1, reduce size to 3	Array: [1, 2, 3, 4, 5, 10]
14	Heapify root	3	[3, 2, 1, 4, 5, 10]	Swap 1 and 3	Array: [3, 2, 1, 4, 5, 10]
15	Swap root and end	3	[1, 2, 3, 4, 5, 10]	Swap 3 and 1, reduce size to 2	Array: [1, 2, 3, 4, 5, 10]
16	Heapify root	2	[2, 1, 3, 4, 5, 10]	Swap 1 and 2	Array: [2, 1, 3, 4, 5, 10]
17	Swap root and end	2	[1, 2, 3, 4, 5, 10]	Swap 2 and 1, reduce size to 1	Array: [1, 2, 3, 4, 5, 10]
18	Heapify root	1	[1, 2, 3, 4, 5, 10]	No heapify needed	Heap size 1, done
19	Sorting complete	1	[1, 2, 3, 4, 5, 10]	All sorted	Final sorted array

💡 Heap size reduced to 1, array fully sorted

Variable Tracker

Variable	Start	After Step 4	After Step 6	After Step 7	After Step 10	After Step 13	After Step 15	Final
arr	[4, 10, 3, 5, 1, 2]	[10, 4, 3, 5, 1, 2]	[10, 5, 3, 4, 1, 2]	[2, 5, 3, 4, 1, 10]	[1, 4, 3, 2, 5, 10]	[1, 2, 3, 4, 5, 10]	[1, 2, 3, 4, 5, 10]	[1, 2, 3, 4, 5, 10]
heapSize	6	6	6	5	4	3	2	1
root	0	0	0	0	0	0	0	0

Key Moments - 3 Insights

Why do we heapify from the last parent node up to the root when building the max heap?

Heapify from the last parent ensures all subtrees satisfy max heap property before reaching the root, as shown in steps 2 to 5 in the execution_table.

Why do we swap the root with the last element before heapifying again?

Swapping moves the largest element (root) to its correct sorted position at the end, then heapify fixes the heap for the remaining elements, as seen in steps 7 and 8.

Why does the heap size reduce after each swap?

Because the last element is sorted and excluded from the heap, reducing heap size ensures heapify only affects unsorted elements, shown in the heapSize changes in variable_tracker.

Visual Quiz - 3 Questions

Look at the execution_table at step 7, what is the array state after swapping the root with the last element?

A [10, 5, 3, 4, 1, 2]

B [2, 5, 3, 4, 1, 10]

C [1, 4, 3, 2, 5, 10]

D [5, 4, 3, 2, 1, 10]

💡 Hint

Check the 'Array State' column at step 7 in the execution_table.

At which step does the heap size reduce from 6 to 5?

A Step 7

B Step 6

C Step 8

D Step 9

💡 Hint

Look at the 'Heap Size' column in the execution_table and variable_tracker.

If we skip heapifying after swapping the root with the last element, what would happen to the array?

A The array would remain sorted

B The array would become reversed

C The max heap property would be violated, causing incorrect sorting

D Nothing changes, heapify is optional

💡 Hint

Refer to the 'Action/Pointer Changes' and 'Visual State' columns after swaps in the execution_table.

Concept Snapshot

Heap Sort Algorithm:
- Build a max heap from the array
- Swap root (max) with last element
- Reduce heap size by 1
- Heapify root to restore max heap
- Repeat swap and heapify until heap size is 1
- Result: sorted array in ascending order

Full Transcript

Heap Sort works by first building a max heap from the input array. This means arranging the array so that each parent node is larger than its children. We do this by heapifying from the last parent node up to the root. Once the max heap is built, the largest element is at the root (index 0). We swap this root with the last element in the heap, effectively placing the largest element at its correct sorted position. Then we reduce the heap size by one, excluding the sorted element, and heapify the root again to restore the max heap property. We repeat this process of swapping and heapifying until the heap size is 1, meaning the array is fully sorted. The execution table shows each step with the array state and heap size changes. The variable tracker follows the array and heap size over time. Key moments clarify why heapify starts from the last parent, why swapping is necessary, and why heap size reduces. The visual quiz tests understanding of array states and heap size changes during sorting.