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.

Practice

1. Which search method is generally faster for finding an element in a sorted list of 1,000,000 items?

easy

A. Binary Search

B. Linear Search

C. Both are equally fast

D. Neither works on sorted lists

Solution

1. Step 1: Understand search methods on sorted lists

   Binary Search divides the list repeatedly, reducing search space quickly. Linear Search checks each item one by one.

2. Step 2: Compare efficiency on large sorted lists

   Binary Search runs in about log2(1,000,000) ≈ 20 steps, Linear Search may take up to 1,000,000 steps.

3. Final Answer:

   Binary Search -> Option A

4. Quick Check:

   Binary Search is faster on sorted lists [OK]

Hint: Binary Search halves search space; Linear checks all [OK]

Common Mistakes:

• Thinking Linear Search is faster on sorted lists
• Confusing sorted and unsorted list efficiency
• Ignoring logarithmic speed of Binary Search

2. Which of the following is the correct syntax to start a binary search on a sorted array arr in JavaScript?

easy

A. let mid = (start + end) / 2;

B. let mid = start - end;

C. let mid = start + end;

D. let mid = Math.floor((start + end) / 2);

Solution

1. Step 1: Calculate middle index correctly

   Binary Search finds middle by averaging start and end indices, then flooring to get integer index.

2. Step 2: Check each option for correctness

   let mid = Math.floor((start + end) / 2); uses Math.floor to get integer mid index; others either don't floor or use wrong operations.

3. Final Answer:

   let mid = Math.floor((start + end) / 2); -> Option D

4. Quick Check:

   Floor average of start and end gives mid [OK]

Hint: Use Math.floor to get integer middle index [OK]

Common Mistakes:

• Not using Math.floor causing float index
• Adding or subtracting indices incorrectly
• Using mid as sum without division

3. What will be the output of the following code snippet?

const arr = [2, 4, 6, 8, 10];
function linearSearch(array, target) {
  for (let i = 0; i < array.length; i++) {
    if (array[i] === target) return i;
  }
  return -1;
}
console.log(linearSearch(arr, 8));

medium

A. -1

B. 2

C. 3

D. 4

Solution

1. Step 1: Trace the linear search loop

   The function checks each element: arr[0]=2, arr[1]=4, arr[2]=6, arr[3]=8 matches target 8.

2. Step 2: Return index when target found

   At index 3, target 8 is found, so function returns 3.

3. Final Answer:

   3 -> Option C

4. Quick Check:

   Index of 8 in array is 3 [OK]

Hint: Linear search returns index of first match [OK]

Common Mistakes:

• Returning value instead of index
• Off-by-one errors in loop
• Confusing index with element value

4. The following binary search code has a bug. What is the error?

function binarySearch(arr, target) {
  let start = 0;
  let end = arr.length;
  while (start <= end) {
    let mid = Math.floor((start + end) / 2);
    if (arr[mid] === target) return mid;
    else if (arr[mid] < target) start = mid + 1;
    else end = mid - 1;
  }
  return -1;
}

medium

A. end should be initialized to arr.length - 1

B. start should be initialized to 1

C. mid calculation is incorrect

D. Loop condition should be start < end

Solution

1. Step 1: Check initialization of end index

   Array indices go from 0 to arr.length - 1, so end must be arr.length - 1 to avoid out-of-bounds.

2. Step 2: Understand loop condition and mid usage

   With end = arr.length, mid can be arr.length which is invalid index, causing error.

3. Final Answer:

   end should be initialized to arr.length - 1 -> Option A

4. Quick Check:

   Array last index = length - 1 [OK]

Hint: End index must be last valid array index [OK]

Common Mistakes:

• Setting end to arr.length causing index error
• Changing start incorrectly
• Using wrong loop condition

5. You have a sorted array of 1,000,000 numbers and want to find if the number 500,000 exists. Which search method will minimize the average number of comparisons, and why?

hard

A. Linear Search, because it checks elements sequentially

B. Binary Search, because it reduces search space by half each step

C. Linear Search, because it is simpler to implement

D. Binary Search, but only if the array is unsorted

Solution

1. Step 1: Analyze search methods on large sorted arrays

   Linear Search checks elements one by one, averaging 500,000 comparisons for half the array.

2. Step 2: Understand Binary Search efficiency

   Binary Search halves the search space each step, needing about log2(1,000,000) ≈ 20 comparisons.

3. Step 3: Compare average comparisons

   20 comparisons (Binary Search) is much less than 500,000 (Linear Search), so Binary Search is better.

4. Final Answer:

   Binary Search, because it reduces search space by half each step -> Option B

5. Quick Check:

   Binary Search uses log steps, fewer comparisons [OK]

Hint: Binary Search halves search space, fewer checks [OK]

Common Mistakes:

• Choosing Linear Search for sorted arrays
• Ignoring logarithmic speed advantage
• Thinking Binary Search needs sorted array but choosing wrong option