Tips and Tricks for Refactoring Javascript Applications

NashJS - June 12th, 2019

Brandon Morrison

What is Code Refactoring?

Refactoring: a change made to the internal structure of software to make it easier to understand and cheaper to modify without changing its observable behavior.

Intentional code changes that don't affect an applications outside behavior.

Why Should I Care?

Makes Code Easier to Understand

Helps You Find Bugs

Makes Adding New Features Easier/Faster

What Do I Need to Get Started?

Buy-in From Your Team

Test Suite

How Do I Convince My Boss?

Technical Debt and Return on Investment

General Strategies & Techniques

Keep Changes Simple & Incremental

Target Areas Where Frequent Changes Are Needed

Test and Commit Often

Don't Overdo It!

Technique: Extract Function

Extract Function

Before

							function printReceipt(invoice) {
							  printBanner();
							  let outstanding = calculateOutstanding(invoice);

							  // print details
							  console.log(`Name: ${invoice.customer}`);
							  console.log(`Amount: ${outstanding}`);
							}
						

Extract Function

After

							function printReceipt(invoice) {
							  printBanner();
							  let outstanding = calculateOutstanding(invoice);
							  printDetails(invoice, outstanding);

							  
							  function printDetails(invoice, outStanding) {
							    console.log(`Name: ${invoice.customer}`);
							    console.log(`Amount: ${outstanding}`);
							  }
							}
						

Technique: Inline Function

Inline Function

Before

							function getRating(driver) {
							  return moreThanFiveDeliveries(driver) ? 2 : 1;
							}

							
							function moreThankFiveDeliveries(driver) {
							  return driver.deliveries > 5;
							}
						

Inline Function

After

							function getRating(driver) {
							  return (driver.deliveries > 5) ? 2 : 1;
							}
						

Technique: Change Function Declaration

Change Function Declaration

Before

							function someFunction() {
							  console.log(`The circumference is ${circum(5)}.`);
							}

							function circum(radius) {
							  return Math.PI * 2 * radius;
							}
						

Change Function Declaration

Initial Step

							function someFunction() {
							  console.log(`The circumference is ${circum(5)}.`);
							}

							function circum(radius) {
							  return circumference(radius);
							}

							function circumference(radius) {
							  return Math.PI * 2 * radius;
							}
						

Change Function Declaration

After

							function someFunction() {
							  console.log(`The circumference is ${circumference(5)}.`);
							}

							function circum(radius) {
							  console.log(`Depreciated.`);
							}

							function circumference(radius) {
							  return Math.PI * 2 * radius;
							}
						

How Can I Learn More?