x

We use the latest technologies to provide the best experience!

Please download a newer version of your browser. Click to close

What does this code do?

Mimi Magusin
2019-02-01
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?⚠️ To get the most out of this article, you need to know what a (data) type in a code language is. Some info on basic types in JavaScript can be found in this MDN article, other types that can be returned are arrays with elements with elements  and objects with  properties and values with  properties and alues.
Why?
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, hich 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.
Rubber Ducking
Rubber duckAccording 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:  hen you want to have a global idea of what a bigger piece of code is doing.How to use:  nswer the following questions:
  1. What code do you recognize? (functions, conditionals, etc.)
  2. What do you think this code does, based on the function and variable names?
Let’s look at a piece of code:
codeFirst 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.
‘Parsing’ Code
Remember how you had to parse sentences into nouns, verbs, etc. in school, at some point? It probably looked something like this:
graphic
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: hen you want to know what a specific piece of code does.How to use: irst of all, identify what you are looking at. Is it a:
  1. constant/variable?
  2. conditional?
  3. loop?
  4. function?
  5. 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:
code snippet
To understand what is happening, we should first ask the following questions:
  1. What is the name of this variable?
  2. 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. hen 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:
code explanation
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 hen the boolean is false or true. In code, that might look something like this:
code snippet
🎓What are the boolean conditions in the following code examples? What is returned/executed if the boolean condition is true? What if is returned/executed if the boolean condition is false? If you are not familiar with JavaScript, check MDN! (if else,ternary,switch
code snippet
The questions you should ask when you look at conditionals are:
  1. What is the boolean condition?
  2. What is returned if the boolean condition is true? Which type? Which value?
  3. 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:
code explanation
3. If it is a loop
Loops come in many different forms. For example:
code snippet
Whatever type it is, the following questions are always useful to ask yourself:
  1. What type of loop is it?
  2. When does this loop end?
  3. What happens in each iteration? Which type? Which value?
  4. 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:
code explanation
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:
code snippet
🙋 There is a difference between parameters and arguments: arguments are the specific values that you pass to a function when you call it, parameters re the placeholders for these arguments that you use in your function declaration.The questions that should be asked are:
  1. What is the name of the function?
  2. What arguments/parameters does it take?
  3. 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. ext, 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:
code explanation
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.
Conclusion
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? Let us know in the comments!

Interested in more?

We've some great articles for you.