DEV Community

Avelyn Hyunjeong Choi
Avelyn Hyunjeong Choi

Posted on

Improving Code through Refactoring

Refactoring Code Steps

Step 1. Creating a Refactoring Branch

$ git checkout main // change to main branch
$ git pull origin main // make sure your main is up to date
$ git checkout -b refactoring // create a new topic branch
Enter fullscreen mode Exit fullscreen mode

Step 2. Refactoring Code
Extracting a Function

  • Find a duplicate codes and create a function that does the same.

Before

    try {
        const configPath: string = path.resolve(argv.config);
        if (!fs.existsSync(configPath)) {
            console.error(`${argv.config} does not exist`);
            process.exit(-1);
        }
        if (path.extname(configPath) !== '.toml') {
            console.error('Config file must be a .toml file');
            process.exit(-1);
        }
        const configOptions = TOML.parse(fs.readFileSync(configPath));
        selectedLang = configOptions.lang || 'en-CA';
        cssLink = configOptions.stylesheet || '';
    } catch (err: any) {
        console.error(err.message);
        process.exit(-1);
    }
} 
Enter fullscreen mode Exit fullscreen mode

After

export function errorHandling(err: string) {
    console.error(err);
    process.exit(-1);
}

    try {
        const configPath: string = path.resolve(argv.config);
        if (!fs.existsSync(configPath)) {
            errorHandling(`${argv.config} does not exist`);
        }
        if (path.extname(configPath) !== '.toml') {
            errorHandling('Config file must be a .toml file');
        }
        const configOptions = TOML.parse(fs.readFileSync(configPath));
        selectedLang = configOptions.lang || 'en-CA';
        cssLink = configOptions.stylesheet || '';
    } catch (err: any) {
        errorHandling(err.message);
    }
} 
Enter fullscreen mode Exit fullscreen mode

Code Splitting

  • Separated command-line argument parsing from file parsing.

Before
Both command line parsing and file parsing method are implemented in one index.ts file.

After
--index.ts
--commandLineParser.ts
--fileParser.ts

Now, one file is separated to two files doing the exact same job.

Step 3. Rebasing and Squashing Before Merging
$ git rebase main -i
This command squash every commit into a single commit, which starts an interactive rebase.

  1 pick 5233318 extract errorHandling() function
  2 pick 164abe2 Added more testing files
  3 pick d5e66e6 removed empty line
  4 pick 4389ae2 code clean up
  5 pick 47f3ad7 added export to errorHandling() function
  6 pick e1ec6ea refactored to use exported errorHandling() function
  7 
  8 # Rebase 4e53e12..e1ec6ea onto 4e53e12 (6 commands)
  9 #
 10 # Commands:
 11 # p, pick <commit> = use commit
 ...
Enter fullscreen mode Exit fullscreen mode

Squash the last 5 commits (squash) into the first (pick)

  1 pick 5233318 extract errorHandling() function
  2 squash 164abe2 Added more testing files
  3 squash d5e66e6 removed empty line
  4 squash 4389ae2 code clean up
  5 squash 47f3ad7 added export to errorHandling() function
  6 squash e1ec6ea refactored to use exported errorHandling() function
Enter fullscreen mode Exit fullscreen mode

After saving, git creates a new commit using all commits in a single commit.

 ~/WebstormProjects/til_tracker $ git log                                                                                                                           
commit 5b8372868822aa26e11dcedfdf0645b229de3236 (HEAD -> refactoring)
Author: Avelyn Choi <avelynhc@gmail.com>
Date:   Tue Oct 3 13:39:50 2023 -0400

    extract errorHandling() function

    Added more testing files

    removed empty line

    code clean up

    added export to errorHandling() function

    refactored to use exported errorHandling() function

Enter fullscreen mode Exit fullscreen mode

Step 4. Amending a Commit
When we want to change our commit, we can do

$ git commit --amend // update previous commit
or 
$ git --amend --no-edit // update previous commit without changing commit message
Enter fullscreen mode Exit fullscreen mode

$ git commit --amend

  1 extract errorHandling() function
  2  *Added more testing files
  3  *removed empty line
  4  *code clean up
  5  *added export to errorHandling() function
  6  *refactored to use exported errorHandling() function
  7 
  8 # Please enter the commit message for your changes. Lines starting
...
Enter fullscreen mode Exit fullscreen mode

Make a change in your commit

 ~/WebstormProjects/til_tracker $ git log                                                                                                                                                        
commit 9211c0b69079552e4354451d2ad2038ef74c6c6a (HEAD -> refactoring)
Author: Avelyn Choi <avelynhc@gmail.com>
Date:   Tue Oct 3 13:39:50 2023 -0400

    extract errorHandling() function
     *Added more testing files
     *removed empty line
     *code clean up
     *added export to errorHandling() function
     *refactored to use exported errorHandling() function

Enter fullscreen mode Exit fullscreen mode

Step 5. Merging Our Work

$ git checkout main
$ git merge refactoring
$ git push origin main
Enter fullscreen mode Exit fullscreen mode

You can find squashed commits from here: 9211c0b, 8f27109

Note: The second commit was added later, after the first commit had already been pushed to the main branch, in order to make further improvements.

Top comments (0)