DEV Community

Cover image for JS Refactoring Combo: Simplify Duplicated Function Call Inside If-Else Statement
Lars Grammel for P42

Posted on • Updated on • Originally published at p42.ai

JS Refactoring Combo: Simplify Duplicated Function Call Inside If-Else Statement

If-statements can contain duplicated statements with minimal differences. For example, copy-paste changes can result in such code duplication. The duplication can often be simplified by extracting the difference using the conditional operator and reducing the if-else to the deduplicated statement.

Before (Example)

if (direction === "left") {
  move(original.x, -10);
} else {
  move(original.x, 10);
}
Enter fullscreen mode Exit fullscreen mode

Refactoring Steps

Simplify duplicated function call inside if-else statement

πŸ’‘Β Β The refactoring steps are using P42 JavaScript Assistant v1.99

  1. Extract variable twice with the same variable name
  2. Split declaration and initialization of both extracted constants
  3. Move duplicated first statement out of if-else
  4. Move duplicated last statement out of if-else
  5. Convert the if-else statement into a conditional expression
  6. Merge variable declaration and initialization
  7. Inline variable

After (Example)

move(original.x, direction === "left" ? -10 : 10);
Enter fullscreen mode Exit fullscreen mode

Discussion (9)

Collapse
jonrandy profile image
Jon Randy

From the look of the video, it would have been quicker just to re-type the refactored version yourself?

Collapse
lgrammel profile image
Lars Grammel Author

Yup, and I tested it. Manual retyping is about 2x as fast in this case.

However, the main strength of automated refactoring is their safety, both in terms of accurately executing the changes and in terms of evaluating pitfalls (some of the time).

When I talked to other people about chaining automated refactorings vs manually retyping, there was a preference for safety over speed, especially in legacy code that's more complex than this toy example.

Collapse
jonrandy profile image
Jon Randy

Unless it's an extensive variable rename, my instincts are quite the opposite... I much prefer to do it myself - a tool like this just feels cumbersome and unnecessary

Thread Thread
lgrammel profile image
Lars Grammel Author

That's fair - the tooling value depends on personal preferences, experience, the complexity of & familiarity with the codebase, etc.

Collapse
gweaths profile image
Grant

On this .. refactoring yourself would also increase your knowledge and understanding.

  • faster not using GitHub Copilot
  • not using = using your own brain
  • improve problem solving / refactoring skills.
Collapse
lukeshiru profile image
Luke Shiru

You could just use GitHub Copilot as well:

Demo of GitHub copilot turning an if into a ternary

It actually shines with those kind of refactors.

Collapse
lgrammel profile image
Lars Grammel Author

That's pretty cool!

Collapse
paratron profile image
Christian Engel

I am not sure about this. The example would be a situation where I explicitly NOT use any tool for the task, since just typing it manually is so much less work.

Are there complicated examples, where a tool like this actually HELPS instead of wasting time?

Collapse
lgrammel profile image
Lars Grammel Author

As mentioned in the other comment, manual re-typing is 2x as fast. The advantage of using a tool is to prevent mistakes, e.g. when you think you could refactor some code, but missed a small difference and as a result introduced a regression.