Binary Search vs Linear Search Real Cost Difference in DSA Javascript - Visual Comparison

Concept Flow - Binary Search vs Linear Search Real Cost Difference

Start at index 0

↓

Check element == target?

No→Move to next index

↓

End: Not found

↓

Return index

↓

Start with low=0, high=n-1

↓

Calculate mid = (low+high)//2

↓

Check element at mid == target?

↓

Return

↓

high = mid-1

Back to Calculate mid↓

If low > high

→End: Not found

↩Back to Calculate mid

Shows step-by-step how linear search checks each element one by one, while binary search divides the search space in half each time on a sorted array.

Execution Sample

DSA Javascript

const arr = [1,3,5,7,9];
const target = 7;
// Linear Search
for(let i=0; i<arr.length; i++) {
  if(arr[i] === target) return i;
}
// Binary Search
let low=0, high=arr.length-1;
while(low <= high) {
  let mid = Math.floor((low+high)/2);
  if(arr[mid] === target) return mid;
  else if(arr[mid] < target) low = mid+1;
  else high = mid-1;
}

This code searches for 7 in the array using linear and binary search.

Execution Table

Step	Search Type	Indices Checked	Condition	Action	Array State	Visual State
1	Linear	i=0	arr[0]=1 == 7? No	i=1	[1,3,5,7,9]	1 (checked) -> 3 -> 5 -> 7 -> 9
2	Linear	i=1	arr[1]=3 == 7? No	i=2	[1,3,5,7,9]	1 -> 3 (checked) -> 5 -> 7 -> 9
3	Linear	i=2	arr[2]=5 == 7? No	i=3	[1,3,5,7,9]	1 -> 3 -> 5 (checked) -> 7 -> 9
4	Linear	i=3	arr[3]=7 == 7? Yes	Return 3	[1,3,5,7,9]	1 -> 3 -> 5 -> 7 (found) -> 9
5	Binary	low=0, high=4	mid=2, arr[2]=5 == 7? No	arr[2]<7, low=3	[1,3,5,7,9]	1 -> 3 -> 5 (mid) -> 7 -> 9
6	Binary	low=3, high=4	mid=3, arr[3]=7 == 7? Yes	Return 3	[1,3,5,7,9]	1 -> 3 -> 5 -> 7 (found) -> 9
7	Linear	i=4	Not reached (already found)	Stop	[1,3,5,7,9]	N/A
8	Binary	low=4, high=4	Not reached (already found)	Stop	[1,3,5,7,9]	N/A

💡 Linear search stops after checking index 3 where target is found; binary search stops after checking mid index 3 where target is found.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	Final
Linear i	0	1	2	3	3 (found)	N/A	N/A	N/A
Binary low	0	0	0	0	0	3	3	N/A
Binary high	4	4	4	4	4	4	4	N/A
Binary mid	N/A	2	2	2	2	3	3	N/A

Key Moments - 3 Insights

Why does binary search need the array to be sorted?

Binary search decides which half to search next based on comparison with mid element. If array is not sorted, this logic fails. See execution_table steps 5 and 6 where mid comparison guides low/high updates.

Why does linear search check every element until it finds the target?

Linear search has no knowledge of order, so it must check each element one by one until it finds the target or reaches the end. See execution_table steps 1 to 4 where each index is checked sequentially.

Why does binary search stop earlier than linear search in this example?

Binary search halves the search space each step, quickly narrowing down to the target. Linear search checks each element in order. See execution_table where binary search finds target at step 6, linear at step 4 but with more checks.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'Binary mid' at step 5?

A 2

B 3

C 1

D 4

💡 Hint

Check the 'Binary mid' column in variable_tracker after step 5.

At which step does linear search find the target?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Action' column in execution_table for linear search steps.

If the array was not sorted, which search would still work correctly?

A Binary Search only

B Linear Search only

C Both Binary and Linear Search

D Neither

💡 Hint

Refer to key_moments about why binary search requires sorted arrays.

Concept Snapshot

Linear Search:
- Checks each element one by one
- Works on any array
- Time: O(n)

Binary Search:
- Requires sorted array
- Divides search space in half each step
- Time: O(log n)

Binary search is faster but needs sorted data.

Full Transcript

This visual compares linear and binary search by tracing their steps to find a target in an array. Linear search checks each element from start until it finds the target or ends. Binary search works only on sorted arrays, repeatedly checking the middle element and narrowing the search range. The execution table shows linear search checking indices 0 to 3 sequentially, finding the target at index 3. Binary search calculates mid indices 2 and 3, finding the target faster. Variable tracker shows how pointers change. Key moments clarify why binary search needs sorted arrays and why linear search checks all elements. The quiz tests understanding of mid calculation, step when target is found, and which search works on unsorted arrays.