We will look into chapters 5 and 6 from the book ‘Working With Legacy Code’ in this session.

Chapter 5: Tooling

Automated Refactoring Tools

Thanks to IDEs, we use these tools in everyday coding without even noticing. They make our lives easier by quick fixes, refactors like re-naming, flatting if statements, creating inline returns and so much more.

Unit Testing

Unit testing was first made possible with the production of xUnit. Originally it was written in Smalltalk, then it was ported to other languages like C++ and Java.
There are some unit testing frameworks for Javascript too:

• Jest
• Jasmine
• Cypress
• Mocha
• Storybook

Chapter 6: I Don’t Have Much Time And I Have To Change It

Sprout Model

Pay now or pay more later.
Sprout Model implies that we should add the new code as a new function or method.

// Imagine we want to use the postDate method and add the entries that
// are not present in the bundle.

result = entries.map(entry => {
  entry.postDate();
});

transactionBundle = [...transactionBundle, ...result];

We could do it like:

const result = entries
  .filter(entry => !transactionBundle.includes[entry])
  .map(entry =>
    entry.postDate();
);

transactionBundle = [...transactionBundle, ...result];

But in the scenario above we have mixed the legacy and new code together and we have created even more legacy code.
The solution is to add the code as a function and then call it where it is needed:

const entriesToAdd = uniqueEntries(entries);

result = uniqueEntries.map(entry => {
  entry.postDate();
});

transactionBundle = [...transactionBundle, ...result];

Wrap Method

Imagine we have a function like:

const pay = () => {
  // functionality blah blah
};

And we need to add a feature in which we log the data to be used later. And that on feature happens at the very same time as the pay function. One way is to add the feature right into the pay function but this is called temporal coupling and is very awful. One other way is to use wrap method:

const pay = () => {
  dispatchPay();
  logPay();
};

const dispatchPay = () => {
  // functionality blah blah
};

const logPay = () => {
  // log log log Zzz...
};

This technique has 2 issues:

• The new logic cannot be mixed with the old logic
• It results in bad names for variables and functions

Furthur Reading:

• JS Testing Terminology