What is Diff?

What is Diff?

When we’re writing code, sometimes we want to compare two similar but different files. Diff tools, short for difference, allow programmers to look at the two files side by side and see exactly what differentiates them—where new lines of code have been added; if variable names have been changed; or if any lines of code have been removed.

Most often, we’re using diff tools when comparing two different versions of the same code, usually an older version and a newer version. Or, we could be comparing our code versus someone else’s code.

How does Codecademy use Diff?

On Codecademy, we use diffing to show you the differences between the code that you’ve written in the lesson workspace and the final solution code.

Here’s what it looks like to use the Codecademy solution diff tool:

In this example, we have two files:

• On the left, the code you’ve written in main.js
• On the right, the final solution code

Note: It’s ok if you’re not familiar with JavaScript, you don’t need to know it in order to understand how this works.

Here are the three things that can tell you what you need to change in order to make your code the same as the solution:

• Colors: The first thing you’ll notice is that the code that’s different from the solution is shown in red, while the solution code is shown as green. Red indicates the lines that contain code that need to be removed, and green indicates the lines that contain things that need to be added.

• Minus and plus signs: Just like the colors, the minus signs show what lines need to be removed and the plus signs show what lines need to be added.

• Highlighting: Highlights on specific parts let us know if a character or word is different between the files.

In the example above, notice that for the variable listitem, the i was not capitalized in item. However in the solution, when that variable is used, it is capitalized. The lowercase i in your code and the uppercase I in the solution code are both highlighted. We can also see that code that is missing from your file is highlighted in the solution code. You forgot to add a const before our variable, so const is highlighted in the solution.

Now that you know what the differences are between your code and the solution, you can edit your code (directly in the diff view) so that it matches what is expected or choose to replace your code with the solution code. If you use the diffing tool again, you’ll note that the color, the minus and plus signs, and the highlighting have all been removed. The two files are now identical!

Limitations of diffing tools

While diffing tools are really helpful, they’re not full proof. Here are a few challenges you may encounter when using them:

• Code looks different but it still passes: You may write some code that passes a checkpoint, but you’re curious as to whether it matches the solution. It may not! There are often many ways to write a program and we write our evaluation tests to be flexible so all correct code passes an exercise. Don’t be surprised if your code looks different from ours but still works.

• Solution code is for ALL checkpoints: Remember that if you use the diffing tool before you’ve tried to complete all the checkpoints, it will show you the entire solution—not just the solution for the checkpoint that you’re on. If you don’t want spoilers, keep trying your best until you reach the last checkpoint!

• Solution code doesn’t work in all cases: In certain lessons or exercises, it’s not possible to use the diffing tool because you’re working in a terminal or console instead of a code editor. If a checkpoint is checking to see if you’ve printed something to a console or if you’ve typed the right thing in a terminal, the solution diffing will not be able to give you feedback because it ONLY checks what is in a file in the code editor. The Learn the Command Line course is one such example.