DEV Community

suhhee1011
suhhee1011

Posted on • Updated on

Refactoring the codes

This week's lab was refactoring my code. I mainly worked on 4 parts which reduce code duplication by creating functions, make the code more readable by putting correct indentation and separate code into functions, categorize functions and put it into different javascript files and improving variable names

First, to reduce the code duplication, I created functions instead of copy and paste the same code for several places. For example, to create a HTML file, After put the name of the input files into the array, the input from the user is whether file or folder, it is using the same logic. Hence, I just copied and paste the same code to the two places. But in this lab, I create a function called "writeHTML" and just call the function if it needs.

Second, I try to make the code more readable. First, I fixed indentation and spacing. And I create more functions such as create HTMLForm, readFile, writeFile, createHTML, and so on. I tried to create functions that only have one feature in one function. I read from the book called "How to write clean code". It is always better to keep one feature in a function. This is because it is easier to do debugging and it helps to maintain the application.

Third, I created two different js files, categorize the created functions, and put them in the write file. one is consol.js which has functions about how to process cli input from the user and the other one is htmlCreator.js which has functions to process the input file to the HTML file.

Last, I improved variable names, I used a doubly-linked list to save the name of the text and markdown files. So, when I need to get a full name with extension then I need to access like TextArr[filenum][0].concat("."+TextArr[filenum][1]). But it seems too complicated, so, when I tried to refactor the code and create the function. Hence, instead of write whole name, I just pass "TextArr[filenum]" so in the file, it can just access by Text[0].concat("."+Text[1])which seems much more simpler. And for the simple edited variable names, I fixed "url" to "CssUrl" to make the variable name easier to understand.

After I refactored my code, I push it to the refactoring branch and merge it to the master branch. Everything works very smoothly :)

While I am doing this lab, I found an error that I couldn't found an error from the last partner who added the config feature to my file. Because she just fixed the config file, when I merge her code, I just tested the config feature. But while I was testing the version, help, and input before I separate the functions to make sure it works, all the commands were not working. Hence, it took me some time to fix it first before I refactoring the code. I learned that before I merge other's code or before I push my code to other's repository, I need to do an explementary test even though I just edited one feature to not break the program.

To sum up, Before I do this lab, if I want to change the structure or try to edit a large part of the code, I make a copy and save it somewhere in my local storage and erase the old one if the fixed one works well. Hence, while I am doing this lab I was so happy that from now I don't need to do the silly thing.

Top comments (0)