As many of our students hardly have any programming experience before they start our program, I often help them not so much with how to apply the code they learn, but how to approach code in general. Colleague teacher Rein Op 't Land and I gathered the advice we give repeatedly to our students and here they are! First in this series: How do you figure out what your code does?
There are several reasons why you want to be good at reading code.
First of all, when you master the reading techniques we offer below, you will recognize patterns and functionality more easily. This will improve your general understanding of programming and make it easier to find an example code for the specific functionality you want to build.
Also, at your job, you will come across lots of legacy code that you will need to extend or maintain.
There are two ways of approaching (new) code: Rubber Ducking and something we called Parsing Code. Both are essential to master for any programmer.
🙋 Both strategies are actually part of rubber ducking, which is simply the art of explaining your code out loud. We just think it is important to make a difference between a more global or a line by line approach.
According to Wikipedia the term rubber ducking is a reference to a story in the book the pragmatic programmer, where a programmer walks around with a rubber duck and debugs his code by explaining it line by line to his duck. This makes total sense from an educational perspective. By explaining your code out loud, you have to put your ideas to words, which not only makes it easier to identify parts you do and don’t understand but also forces you to go over details and logic inconsistencies. Research backs that up, actually.
Both the parsing strategy in the next section and the strategy in this one are part of rubber ducking. However, when we ask students to explain code, we notice there are two ways they might answer. Either they take a global approach, where they try to recognize patterns and look at names to figure out what code is doing, or they look specifically what a code bit by bit is doing. This global approach is very useful and makes that even with little experience, you can get pretty far with what is happening in a specific piece. So let's start with that:
When to use: When you want to have a global idea of what a bigger piece of code is doing.
How to use: Answer the following questions:
- What code do you recognize? (functions, conditionals, etc.)
- What do you think this code does, based on the function and variable names?
Let’s look at a piece of code:
First you should look for code you know. You might see something that looks somewhat like a function, showGuessedLetters(), some variables and a piece that looks somewhat like html.
Now checkout the names of the function and variable names. There are a class and a function (or method as it is inside a class) ‘showGuessed letters’, which is called inside another method: ‘render’. Furthermore, we see some variables (constants) called guess and letters. Without knowing any code at all, you can probably guess that this code is somehow used to display (render) letters a user guessed.
Remember how you had to parse sentences into nouns, verbs, etc. in school, at some point? It probably looked something like this:
We’ll do a similar thing to understand specific code snippets and to recognize patterns throughout the code. By the end of this section, you should be able to understand code line by line.
When to use: When you want to know what a specific piece of code does.
How to use: First, identify what you are looking at. Is it a:
- code that looks unfamiliar?
Most code fits into one of those categories.
1. If it is a constant or variable
Let's take the following code example:
To understand what is happening, we should first ask the following questions:
- What is the name of this variable?
- Is it being declared here?
If not, you could already explain what is happening:
The variable age is being used.
That is not super useful though. The next actions now would be to figure out how it is being used (we’ll look at code you don’t know yet in the final section of this article) and where it is being declared. When you found that, it is time to answer the next question:
3. What is its value? Which type is it?
Cool! Now we can fully explain what is happening here:
The variable age is declared and assigned the value 42
🎓 Can you guess what the total code does?
I often use my awesome drawing skills to build a sort of identifying chart:
2. If it is a conditional statement
Conditionals are always performed wherever they are declared. They always contain a boolean condition and something they return or execute when the boolean is false or true. In code, that might look something like this:
The questions you should ask when you look at conditionals are:
- What is the boolean condition?
- What is returned if the boolean condition is true? Which type? Which value?
- Is another boolean being checked?
If that is the case: go back to the first question. Otherwise, ask yourself:
4. What is returned if the boolean is false? Which type? Which value?
When you answered all questions, you can formulate the following explanation of our code example:
If 2 is bigger than three, the conditional returns a string 2 > 3. Otherwise, if it is false, it returns a string 3 > 2.
🎓 Can you explain the else if, ternary and switch statements above with a similar sentence?
After you explained what the conditional does, you would look where the returned value is used.
If you’d make another identification chart out of it, it would look something like this:
3. If it is a loop
Loops come in many different forms. For example:
Whatever type it is, the following questions are always useful to ask yourself:
- What type of loop is it?
- When does this loop end?
- What happens in each iteration? Which type? Which value?
- What happens/is returned in the final iteration? Which value? Which type?
In case of the loop above, we could ‘parse’ it like this:
This is a for loop. It runs until the counter is 5, that is 5 times. In each loop, the counter is added to the string. Finally, it returns a string 01234.
A next action would be to see where the final return is used. In this case, only in the console.log(str).
This is the identification chart belonging to loops:
4. If it is a function
Functions, which you usually recognize by the parentheses, are slightly more complex, because they might contain vars, conditionals or loops, which require multiple steps to explain them. Lets take an example:
🙋 There is a difference between parameters and arguments: arguments are the specific values that you pass to a function when you call it, parameters are the placeholders for these arguments that you use in your function declaration.
The questions that should be asked are:
- What is the name of the function?
- What arguments/parameters does it take?
- Is it being declared here?
If the function is only called, you can now explain:
The function addNumbers is being called. It takes the arguments 2 and 3.
Next, you should look for the place where it is declared and ask:
4. What is changing?
In case there are variables, conditions, or loops being used, you should parse them all separately. Finally, you should ask:
5. Which type is being returned? Which value?
Now we can explain the function that is being declared in the example above:
The function addNumbers being declared. It takes the parameters a and b. These are the changes: a and b are added to each other. The function returns a number that is the sum of a and b. So in this specific case, that would be 3.
Here are all the questions that will help you to understand functions in a chart again:
5. If the code does not look familiar
It is time to make your own map of truth! Figure out what sort of code it is. Is it a class? An object? Are you sure it is not one of the categories above in some sort of unfamiliar form?
Google code and see if you can find code with a similar syntax, to figure out to which group it belongs. However, you should get pretty far with these for charts.
This article should have helped you to better understand code when you are just reading through it, either in a more global way by rubber ducking, or specifically line by line, by parsing code. Next thing to do is practice! Go and find some code and explain it!
Other excellent ways of understanding what code does, are by adding or removing elements of it, console logging steps in between, using debugger or devtools. Make sure you are in an experimental git-branch and go and experiment!
How did you teach yourself to understand code well? What strategy works for you? What would recommend others who are just beginning? Send us an email at email@example.com and let us know!
If you're interested in learning how to code, read more about our Full-Stack web development course here.