Merge two functions that are alike into a single function

Question

Merge two functions that are alike into a single function

I am faced with a challenge of combining two similar functions that have some minor differences:

private filterByOperationType() {
    let operationBuffer: IProductOperation[] = [];
    if (this.filterConditions[0].selected.length > 0) {
      operationBuffer = this.operations.filter(({ operationDetails }) => {
          let operationType = false;
          for (const details of this.filterConditions) {
            if (details.name === 'Type') {
              const parsedGroup = details.selected[0].text;
              if (parsedGroup === operationDetails) {
                operationType = true;
              }
            }
          }
          return operationType;
        });
      }
    return operationBuffer;
  }

  /** Filter the operations by function group when dropdown is used */
  private filterByFunctionGroup() {
    const filteredData = this.operations.filter(({ functionDetails }) => {
      let groupDescriptionMatch = false;
      for (const details of this.filterConditions) {
        if (!details.selected[0]) {
          return;
        }
        if (details.name === 'Function group') {
          const parsedGroup = details.selected[0].text.match(/[a-zA-Z]+/g);
          if (parsedGroup?.join(' ') === functionDetails) {
            groupDescriptionMatch = true;
          }
        }
      }
      return groupDescriptionMatch;
    });
    return filteredData;
  }
}

Although both functions are filtering the same object, they target different keys (type and function group). The function group value undergoes a regex transformation since the dropdown value includes an index number and dash which is not accounted for in the logic. For example:

1 - myFunctionGroup --regex-->myFunctionGroup

This modification is not applied to the type key. How can these two functions be combined effectively?

javascript typescript

Answer 1

Answer №1

It seems like the main struggle here is not just about separation of concerns, but also about reusability and abstraction. After some rewriting to improve readability, I realized that most of the work can be simplified using language constructs, leaving only the essential business logic.

Once you focus solely on the business logic, it becomes clear that no refactoring is necessary due to its simplicity.

const filterByOperationType = () => {
  if (!filterConditions[0].selected.length) {
    return [];
  }

  return operations.filter(({ operationDetails }) => {
    return filterConditions.some(fc =>
      fc.name === "Type" && fc.selected[0].text === operationDetails,
    );
  });
};

/** Filter the operations by function group when dropdown is used */
const filterByFunctionGroup = () => {
  if (!filterConditions[0].selected.length) {
    return [];
  }

  return operations.filter(({ functionDetails }) => {
    return filterConditions.some(fc =>
      fc.name === "Function group"
      && intoLetterOnlyWords(fc.selected[0].text) === functionDetails,
    );
  });
};

// Perform custom transformation on text
const intoLetterOnlyWords = (text) => text.match(/[a-zA-Z]+/g).join(" ");

If you want to enhance this further, consider creating a higher-order function to encapsulate the concerns of each filtering function.


const createFilterBy = (nameToMatch: string, formatSelectedText = (t: string) => t) => () => {
  if (!filterConditions[0].selected.length) {
    return [];
  }

  return operations.filter(({ functionDetails }) => {
    return filterConditions.some(fc =>
      fc.name === nameToMatch
      && formatSelectedText(fc.selected[0].text) === functionDetails,
    );
  });
};

// Perform custom transformation on text
const intoLetterOnlyWords = (text: string) => text.match(/[a-zA-Z]+/g).join(" ");

const filterByFunctionGroup = createFilterBy("Function group", intoLetterOnlyWords);
const filterByOperationType = createFilterBy("Type");

Answer 2

It seems like the main struggle here is not just about separation of concerns, but also about reusability and abstraction. After some rewriting to improve readability, I realized that most of the work can be simplified using language constructs, leaving only the essential business logic.

Once you focus solely on the business logic, it becomes clear that no refactoring is necessary due to its simplicity.

const filterByOperationType = () => {
  if (!filterConditions[0].selected.length) {
    return [];
  }

  return operations.filter(({ operationDetails }) => {
    return filterConditions.some(fc =>
      fc.name === "Type" && fc.selected[0].text === operationDetails,
    );
  });
};

/** Filter the operations by function group when dropdown is used */
const filterByFunctionGroup = () => {
  if (!filterConditions[0].selected.length) {
    return [];
  }

  return operations.filter(({ functionDetails }) => {
    return filterConditions.some(fc =>
      fc.name === "Function group"
      && intoLetterOnlyWords(fc.selected[0].text) === functionDetails,
    );
  });
};

// Perform custom transformation on text
const intoLetterOnlyWords = (text) => text.match(/[a-zA-Z]+/g).join(" ");

If you want to enhance this further, consider creating a higher-order function to encapsulate the concerns of each filtering function.


const createFilterBy = (nameToMatch: string, formatSelectedText = (t: string) => t) => () => {
  if (!filterConditions[0].selected.length) {
    return [];
  }

  return operations.filter(({ functionDetails }) => {
    return filterConditions.some(fc =>
      fc.name === nameToMatch
      && formatSelectedText(fc.selected[0].text) === functionDetails,
    );
  });
};

// Perform custom transformation on text
const intoLetterOnlyWords = (text: string) => text.match(/[a-zA-Z]+/g).join(" ");

const filterByFunctionGroup = createFilterBy("Function group", intoLetterOnlyWords);
const filterByOperationType = createFilterBy("Type");

Merge two functions that are alike into a single function

Answer №1

Similar questions

The path('/') in $rootScope is not functioning properly

What methods are available for updating the href color of an element using the DOM?

When attempting to upgrade from Angular 10 to 13, users may encounter the following error message: "TS2307: Unable to locate module 'path_to_service' or its corresponding type declarations."

Attaching a click event to an input field

A tutorial on ensuring Angular loads data prior to attempting to load a module

When Vue.js is compiled, it removes a script tag

Monitoring and recording user's browsing activities while excluding server-side scripting

Is it possible to dynamically append and delete rows of interconnected dropdown menus?

Using Node.js to parse JSON data fetched from the web

Is it possible to develop in React without using webpack, relying solely on Gulp instead?

Encountering repeated requests (duplicating calls) for each API request while using AngularJS with a JWT authentication token

Maintain your position on the current page when refreshing Angular 4

What is the most effective way to utilize getStaticPaths in a dynamic manner within next.js

Developing HTML components for the purpose of testing JavaScript

Navigating with buttons in React JS

Angular 2: Copious Errors in the Mix

Is there a way to cancel a fetch request and initiate a new one right away?

Guide to naming Vite build JS and CSS bundles in Vue

What is causing the qtip tooltip to show up on buttons with different ids?

Pass JavaScript variables to a PHP file with the help of AJAX