Code Comparison Examples
JavaScript Function Changes
File A: original.js
function calculateTotal(items) {
let total = 0;
for (let i = 0; i < items.length; i++) {
total += items[i].price;
}
return total;
}
File B: modified.js
function calculateTotal(items) {
let total = 0;
for (const item of items) {
total += item.price;
}
return total;
}
Diff Result:
1 1 | function calculateTotal(items) {
2 2 | let total = 0;
- 3 | for (let i = 0; i < items.length; i++) {
- 4 | total += items[i].price;
+ 3 3 | for (const item of items) {
+ 4 4 | total += item.price;
5 5 | }
6 6 | return total;
7 7 | }
Statistics:
- Added: 2 lines
- Removed: 2 lines
- Modified: 0 lines
- Unchanged: 5 lines
Configuration File Updates
File A: config.json
{
"database": {
"host": "localhost",
"port": 5432,
"name": "myapp"
},
"server": {
"port": 3000,
"debug": false
}
}
File B: config.json
{
"database": {
"host": "localhost",
"port": 5432,
"name": "myapp",
"ssl": true
},
"server": {
"port": 3000,
"debug": true,
"cors": {
"origin": "*"
}
}
}
Diff Result:
1 1 | {
2 2 | "database": {
3 3 | "host": "localhost",
4 4 | "port": 5432,
5 5 | "name": "myapp",
+ 6 6 | "ssl": true
6 7 | },
7 8 | "server": {
8 9 | "port": 3000,
- 9 | "debug": false
+ 9 10 | "debug": true,
+10 11 | "cors": {
+11 12 | "origin": "*"
+12 13 | }
13 14 | }
14 15 | }
Document Comparison Examples
Markdown Documentation
File A: README.md
# My Project
A simple project for learning.
## Features
- Basic functionality
- Simple interface
## Installation
```bash
npm install
```
Usage
Run the project with:
npm start
**File B: README.md**
```markdown
# My Project
A comprehensive project for learning and development.
## Features
- Advanced functionality
- Modern interface
- Real-time updates
- Error handling
## Installation
```bash
npm install
npm run build
Usage
Run the project with:
npm start
Development
For development mode:
npm run dev
**Diff Result:**
1 1 | # My Project 2 2 |
- 3 | A simple project for learning.
- 3 3 | A comprehensive project for learning and development. 4 4 | 5 5 | ## Features 6 6 |
- 7 | - Basic functionality
- 8 | - Simple interface
- 7 7 | - Advanced functionality
- 8 8 | - Modern interface
- 9 9 | - Real-time updates
+10 10 | - Error handling
11 11 |
12 12 | ## Installation
13 13 |
14 14 |
bash 15 15 | npm install +16 16 | npm run build 16 17 |17 18 | 18 19 | ## Usage 19 20 | 20 21 | Run the project with: 21 22 | 22 23 |bash 23 24 | npm start 24 25 |25 26 | +26 27 | ## Development +27 28 | +28 29 | For development mode: +29 30 | +30 31 |bash +31 32 | npm run dev +32 33 |
## CSS Style Changes
**File A: styles.css**
```css
.button {
background-color: blue;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
}
.button:hover {
background-color: darkblue;
}
File B: styles.css
.button {
background-color: #007bff;
color: white;
padding: 12px 24px;
border: none;
border-radius: 6px;
font-size: 16px;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
.button:disabled {
background-color: #6c757d;
cursor: not-allowed;
}
HTML Structure Changes
File A: index.html
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is my app.</p>
</body>
</html>
File B: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My App</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<h1>Welcome to My App</h1>
</header>
<main>
<p>This is my amazing app with new features.</p>
<button class="cta-button">Get Started</button>
</main>
<footer>
<p>© 2024 My App</p>
</footer>
</body>
</html>
YAML Configuration Changes
File A: docker-compose.yml
version: '3.8'
services:
web:
image: nginx
ports:
- '80:80'
db:
image: postgres
environment:
POSTGRES_DB: myapp
File B: docker-compose.yml
version: '3.8'
services:
web:
image: nginx:alpine
ports:
- '80:80'
volumes:
- ./html:/usr/share/nginx/html
db:
image: postgres:13
environment:
POSTGRES_DB: myapp
POSTGRES_USER: user
POSTGRES_PASSWORD: password
volumes:
- postgres_data:/var/lib/postgresql/data
volumes:
postgres_data:
Using Diff Options
Ignore Whitespace Example
File A:
function test() {
return "hello";
}
File B:
function test() {
return "hello";
}
With Ignore Whitespace enabled, these files are considered identical despite different indentation.
Ignore Case Example
File A:
DATABASE_HOST=localhost
DATABASE_PORT=5432
File B:
database_host=localhost
database_port=5432
With Ignore Case enabled, these configuration files are considered identical.
Real-World Use Cases
1. Code Review
Compare different versions of code to:
- Identify changes made by team members
- Review pull requests
- Track bug fixes and feature additions
2. Configuration Management
Compare configuration files to:
- Track environment-specific changes
- Validate configuration updates
- Document configuration changes
3. Documentation Updates
Compare documentation versions to:
- Track content changes
- Review editorial updates
- Maintain version history
4. Data Migration
Compare data files to:
- Validate data transformations
- Check data integrity
- Track data changes
Tips for Effective Comparisons
1. Use Descriptive File Names
config-prod.jsonvsconfig-dev.jsonREADME-v1.mdvsREADME-v2.mdscript-original.jsvsscript-updated.js
2. Choose Appropriate Options
- Enable Ignore Whitespace for code with different formatting
- Enable Ignore Case for case-insensitive comparisons
- Use both options for maximum flexibility
3. Review Statistics
- Check the statistics to understand the scope of changes
- Use statistics to prioritize review efforts
- Look for unexpected changes in the statistics
4. Save Important Comparisons
- Use the history feature to save important comparisons
- Clear history regularly to maintain performance
- Use descriptive names for easy identification
Next Steps
Now that you've seen the Text Diff tool in action, check out the FAQ for answers to common questions and troubleshooting tips.