If you came across this article, you occasionally encounter other people's code. You want to learn how to read them correctly or learn about another system for learning code.
Let's tell you right away that here we're going to start parsing the second step, since the first one was parsed by us on Facebook.
Here is the post.
Go here and you can even subscribe! There's a lot of interesting stuff in there.
Well, let's get started.
How not to go crazy by parsing other people's code: 1+7 Simple Steps
STEP 2: Open only the files you want
Once you've played with the end result, seen how the code works in the UI, and determined what you want to figure out, go down to the next level. If the repository has a logical structure with clear folder and component names, you will be able to identify all the files you need without fail.STEP 3: Figure out what the functions do and test them using the black box method
You must clearly understand what each function is responsible for. We suggest that you do this consistently:Look at the unit tests.
This is the easiest way to understand what each function does - because unit tests clearly describe I/O and help confirm that each function does exactly what it is supposed to do. But unit tests won't be everywhere. If you are unlucky or still have questions, go to the second way.Look at the comments for each function.
If there are comments above the function in the code, study them. But don't take the comments "at their word" - compare if the description matches what is actually happening in the code. If the code is very poorly followed and there are no comments or tests, go to the third way.Make a logical assumption and test it.
If the developer writes the code according to the rules, it should be clear from the name of the function what it does. A function named generateImageUrl will usually (but not always) output an image URL. You can make a reasonable guess from the function name, then read the code and make sure that it actually outputs an image URL.STEP 4: Concentrate on the features you need and ignore the rest
Since you're checking how the first filter panel affects the second and the second filter panel affects the third, you can safely skip the functions that are irrelevant at this stage, such as generateImageUrl. Look at those functions that are relevant to your target: loadX, loadY, triggerSearch, and so on.STEP 5: Trace the sequence of actions in the desired functions
Reading code is not reading a book. You can't read code from start to finish thinking it's being executed sequentially. To figure out what follows what, use the console.log command.For function X: console.log("I am at loadX").
For function Y: console.log("I am at loadY").
For function Z: console.log("I am at loadZ").
For the triggerSearch function: console.log("I am at triggerSearch").
You will end up with a sequence like this: loadX → triggerSearch → loadY → triggerSearch → loadZ → triggerSearch, or maybe this: loadX → loadY → triggerSearch → loadZ → triggerSearch.
STEP 6: Carefully analyze each function and go through each line of code
Once you understand the workflow, study the code of the required functions line by line. And be sure to log all possible paths and branches (if, else, etc.) within functions.Try different transformations - for example, use happy flow method or other flow testing methods. You can, for example, start a search without applying a filter, and then apply only a second filter, and so on. Then look at the execution log.
Now you have an idea of how the code works.
STEP 7: Comment out a piece of code if its logic is not quite clear
If even after a thorough line-by-line code reading I come across something unobvious, I try to comment out such lines and see where this will lead to and what will break.Maybe after that some checkboxes in the filter dropdown list won't load. But now you will know exactly what code fragment is responsible for this operation. And now go back to the sixth point: now you know what this code fragment does, so you will be able to proofread it more consciously.