What This Example Shows
The two functions above compute the same result using different approaches. The original uses an imperative for loop with a mutable let variable. The modified version uses Array.reduce with a const binding. The diff highlights exactly what changed during this refactor.
Side-by-side view makes it clear which lines were removed from the left and which were added on the right. The function signature and the return statement are unchanged. The three middle lines of the original become four lines in the modified version.
How Diff Algorithms Work
Myers algorithm
The Myers algorithm is the foundation of most diff tools, including the original Unix diff command. It models the comparison as a shortest edit script problem: given two sequences of lines, find the minimum number of insertions and deletions to transform the first into the second.
The algorithm works on a graph where each path from top-left to bottom-right represents a possible edit sequence. Moving diagonally means the lines match (no edit needed). Moving right means an insertion. Moving down means a deletion. Myers finds the shortest path through this graph, which corresponds to the fewest edits.
Patience diff
Patience diff is an alternative algorithm. It first identifies lines that appear exactly once in each file (unique lines), uses those as anchors, and then recurses on the regions between anchors. This produces cleaner diffs when code has been rearranged significantly because the unique lines act as structural landmarks. Git uses patience diff by default when you run git diff --patience.
Character-level highlighting
After finding which lines changed, a diff tool can apply the same algorithm at the character level within each changed line. This shows not just that a line changed but exactly which characters were added or removed. For code review, this is the most useful view: you see let highlighted red and const highlighted green, rather than having to compare the two lines mentally.
Understanding Unified Diff Format
When you run git diff or diff -u, the output uses unified format. Here is an example of what the diff between these two functions looks like as a unified diff:
@@ -1,7 +1,8 @@
function calculateTotal(items) {
- let total = 0;
- for (let i = 0; i < items.length; i++) {
- total += items[i].price * items[i].quantity;
- }
+ const total = items.reduce(
+ (sum, item) => sum + item.price * item.quantity,
+ 0
+ );
return total;
}The @@ -1,7 +1,8 @@ header says: this hunk starts at line 1 of the original (7 lines shown) and line 1 of the modified (8 lines shown). Lines prefixed with - are removed. Lines prefixed with + are added. Lines with a space prefix are context, present in both versions.
Side-by-Side vs Inline View
Both views show the same changes. The choice depends on the type of content you are diffing.
Side-by-side places the original on the left and the modified on the right. It is better for code and structured text where you want to see the full context of each version simultaneously. The horizontal alignment makes it easy to scan corresponding sections.
Inline view interleaves removed and added lines in a single column, showing them in sequence. It is more compact and better for long documents where horizontal space is limited, or for text where tracking line correspondence is less important than reading the diff top-to-bottom.
When to Use Online Diff vs Git Diff
Git diff works only on files in a git repository. For content outside a repo, or for comparing things that do not exist as files (API responses copied from a browser, log output, config copied from a server), an online diff tool is the practical choice.
Common situations where an online diff tool is faster than git:
- Comparing two versions of a JSON API response to find what changed between deploys
- Checking whether two generated files that should be identical actually are
- Comparing a local config against a production config you SSHed in to read
- Diffing output from two different commands to verify equivalence
- Quick review of a patch before deciding whether to apply it