Merge Sort Algorithm in DSA Javascript - Execution Trace

Concept Flow - Merge Sort Algorithm

Start with full array

↓

Divide array into two halves

↓

Recursively apply merge sort on left half

↓

Base case: single element or empty array

↓

Merge two sorted halves

↓

Sorted array

↓

Done

Merge Sort splits the array into halves recursively until single elements remain, then merges these sorted parts back together.

Execution Sample

DSA Javascript

function merge(left, right) {
  let result = [];
  let i = 0, j = 0;
  while (i < left.length && j < right.length) {
    if (left[i] < right[j]) {
      result.push(left[i++]);
    } else {
      result.push(right[j++]);
    }
  }
  while (i < left.length) result.push(left[i++]);
  while (j < right.length) result.push(right[j++]);
  return result;
}

function mergeSort(arr) {
  if (arr.length <= 1) return arr;
  const mid = Math.floor(arr.length / 2);
  const left = mergeSort(arr.slice(0, mid));
  const right = mergeSort(arr.slice(mid));
  return merge(left, right);
}

// Example usage:
// mergeSort([38, 27, 43, 3, 9, 82, 10]) => [3, 9, 10, 27, 38, 43, 82]

This complete code defines the `merge` function to combine two sorted arrays and `mergeSort` which recursively divides the array and merges sorted halves to produce a fully sorted array.

Execution Table

Step	Operation	Array State	Action	Visual State
1	Start	[38, 27, 43, 3, 9, 82, 10]	Split into two halves	[38, 27, 43, 3] | [9, 82, 10]
2	Split left half	[38, 27, 43, 3]	Split into [38, 27] and [43, 3]	[38, 27] | [43, 3] | [9, 82, 10]
3	Split left-left	[38, 27]	Split into [38] and [27]	[38] | [27] | [43, 3] | [9, 82, 10]
4	Base case left-left-left	[38]	Single element, return as is	[38] | [27] | [43, 3] | [9, 82, 10]
5	Base case left-left-right	[27]	Single element, return as is	[38] | [27] | [43, 3] | [9, 82, 10]
6	Merge left-left	[38] and [27]	Compare and merge	[27, 38] | [43, 3] | [9, 82, 10]
7	Split left-right	[43, 3]	Split into [43] and [3]	[27, 38] | [43] | [3] | [9, 82, 10]
8	Base case left-right-left	[43]	Single element, return as is	[27, 38] | [43] | [3] | [9, 82, 10]
9	Base case left-right-right	[3]	Single element, return as is	[27, 38] | [43] | [3] | [9, 82, 10]
10	Merge left-right	[43] and [3]	Compare and merge	[27, 38] | [3, 43] | [9, 82, 10]
11	Merge left half	[27, 38] and [3, 43]	Compare and merge	[3, 27, 38, 43] | [9, 82, 10]
12	Split right half	[9, 82, 10]	Split into [9] and [82, 10]	[3, 27, 38, 43] | [9] | [82, 10]
13	Base case right-left	[9]	Single element, return as is	[3, 27, 38, 43] | [9] | [82, 10]
14	Split right-right	[82, 10]	Split into [82] and [10]	[3, 27, 38, 43] | [9] | [82] | [10]
15	Base case right-right-left	[82]	Single element, return as is	[3, 27, 38, 43] | [9] | [82] | [10]
16	Base case right-right-right	[10]	Single element, return as is	[3, 27, 38, 43] | [9] | [82] | [10]
17	Merge right-right	[82] and [10]	Compare and merge	[3, 27, 38, 43] | [9] | [10, 82]
18	Merge right half	[9] and [10, 82]	Compare and merge	[3, 27, 38, 43] | [9, 10, 82]
19	Merge full array	[3, 27, 38, 43] and [9, 10, 82]	Compare and merge	[3, 9, 10, 27, 38, 43, 82]
20	Done	[3, 9, 10, 27, 38, 43, 82]	Sorted array returned	[3, 9, 10, 27, 38, 43, 82]

💡 All subarrays reduced to single elements and merged back in sorted order

Variable Tracker

Variable	Start	After Step 1	After Step 6	After Step 11	After Step 18	Final
arr	[38, 27, 43, 3, 9, 82, 10]	[38, 27, 43, 3] and [9, 82, 10]	[27, 38]	[3, 27, 38, 43]	[9, 10, 82]	[3, 9, 10, 27, 38, 43, 82]
left	undefined	[38, 27, 43, 3]	[27, 38]	[3, 27, 38, 43]	[9]	[3, 9, 10, 27, 38, 43, 82]
right	undefined	[9, 82, 10]	[43, 3]	[9, 82, 10]	[10, 82]	[3, 9, 10, 27, 38, 43, 82]
mid	undefined	3	1	2	1	N/A

Key Moments - 3 Insights

Why do we split the array until single elements remain?

Because single elements are already sorted, so merging them step-by-step creates a sorted array. See execution_table rows 4,5,8,9,13,15,16 where base cases return single elements.

How does the merge step combine two sorted arrays?

It compares the first elements of both arrays and picks the smaller one, repeating until all elements are merged. See execution_table rows 6,10,11,17,18,19 for merging steps showing array states.

Why do we use recursion in merge sort?

Recursion helps break down the problem into smaller parts (divide), then combine results (conquer). The recursive calls split arrays until base cases, then merge back. See execution_table steps 2-19 for recursive splitting and merging.

Visual Quiz - 3 Questions

Look at the execution_table at step 6, what is the merged array state?

A [27, 38]

B [38, 27]

C [38]

D [27]

💡 Hint

Check the Visual State column at step 6 in execution_table

At which step does the right half first get split into two parts?

A Step 18

B Step 12

C Step 14

D Step 10

💡 Hint

Look for the first split operation on the right half in execution_table

If the initial array had only one element, what would happen?

A The array is split into two empty arrays

B The merge step is called twice

C The function returns immediately without splitting

D The array is sorted by swapping elements

💡 Hint

Refer to base case handling in execution_table steps 4,5,8,9

Concept Snapshot

Merge Sort Algorithm:
- Recursively split array into halves until single elements
- Merge sorted halves by comparing elements
- Time complexity: O(n log n)
- Stable and works well for large data
- Uses extra space for merging
- Divide and conquer approach

Full Transcript

Merge Sort Algorithm splits the array into two halves recursively until each subarray has one element. These single elements are considered sorted. Then, it merges these sorted subarrays step-by-step by comparing their elements to form larger sorted arrays. This process continues until the entire array is merged back into a sorted array. The key steps are splitting, base case handling, and merging. The algorithm uses recursion to divide the problem and conquer by merging. It is efficient with O(n log n) time complexity and stable sorting behavior.