What would be the most stylish approach to restructure this code, especially when the only variation is the name of the key in the returned object?

Question

What would be the most stylish approach to restructure this code, especially when the only variation is the name of the key in the returned object?

Is there a more elegant solution for restructuring this code, especially considering the only variation is in the key name of a return object?

function generateContactInput(rawData, contactId) {
  const data = rawData
    ? rawData.replace(/["]+/g, '').split(SEMICOLON)
    : undefined;
  const populatedData = data
    ? data.map((value) => ({ contactId, value }))
    : undefined;
  if (Array.isArray(populatedData) && populatedData.length > 0)
    populatedData[0].isPrimary = true;
  return populatedData;
}

function generateContactAddressInput(rawAddresses, contactId) {
  const data = rawAddresses
    ? rawAddresses.replace(/["]+/g, '').split(SEMICOLON)
    : undefined;
  const populatedData = data
    ? data.map((streetAddress) => ({ contactId, streetAddress }))
    : undefined;
  if (Array.isArray(populatedData) && populatedData.length > 0)
    populatedData[0].isPrimary = true;
  return populatedData;
}

The distinguishing line is:

? data.map((streetAddress) => ({ contactId, streetAddress }))

typescript refactoring

Answer 1

Answer №1

If you're keen on exploring the functional programming paradigm, feel free to reach out

const combine = (...functions: any[]) => (data: any) => functions.reduceRight((accumulator, fn) => fn(accumulator), data);

const SEMICOLON = ';'

const extractInfo = (id, title) => (value) => ({ id, [title]: value })

const modify = (rawData) => rawData ? rawData.replace(/["]+/g, '').split(SEMICOLON) : undefined

const process = (callback) => (data) => data ? data.map(callback) : undefined

const convertToArray = (data) => {
    if (Array.isArray(data) && data.length > 0) {
        const [firstElement, ...rest] = data

        const updatedFirstElement = {
            ...firstElement,
            isPrimary: true
        }
        return [updatedFirstElement, ...rest]
    }

    return data
}

const execute = (rawData, id, method: 'value' | 'streetAddress') =>
    combine(convertToArray, process(extractInfo(id, method)), modify)(rawData)

Check out this resource for a detailed explanation of my combine function

Answer 2

If you're keen on exploring the functional programming paradigm, feel free to reach out

const combine = (...functions: any[]) => (data: any) => functions.reduceRight((accumulator, fn) => fn(accumulator), data);

const SEMICOLON = ';'

const extractInfo = (id, title) => (value) => ({ id, [title]: value })

const modify = (rawData) => rawData ? rawData.replace(/["]+/g, '').split(SEMICOLON) : undefined

const process = (callback) => (data) => data ? data.map(callback) : undefined

const convertToArray = (data) => {
    if (Array.isArray(data) && data.length > 0) {
        const [firstElement, ...rest] = data

        const updatedFirstElement = {
            ...firstElement,
            isPrimary: true
        }
        return [updatedFirstElement, ...rest]
    }

    return data
}

const execute = (rawData, id, method: 'value' | 'streetAddress') =>
    combine(convertToArray, process(extractInfo(id, method)), modify)(rawData)

Check out this resource for a detailed explanation of my combine function

Answer 3

Answer №2

One effective strategy involves developing a single helper function that takes a specific name for mapping:

function generateInput(rawData, contactId, fieldName) {
  const data = rawData
    ? rawData.replace(/["]+/g, '').split(SEMICOLON)
    : undefined;
  const populatedData = data
    ? data.map((value) => ({ contactId, [fieldName]: value }))
    : undefined;
  if (Array.isArray(populatedData) && populatedData.length > 0)
    populatedData[0].isPrimary = true;
  return populatedData;
}

... you can then either directly utilize this helper function or form a range of wrappers with preset values:

function generateContactInput(rawData, contactId) {
  return generateInput(rawData, contactId, 'value');
}

function generateContactAddressInput(rawData, contactId) {
  return generateInput(rawData, contactId, 'streetAddress');
}

In fact, I would recommend reconsidering the code to eliminate the ternaries as well:

function generateInput(rawData, contactId, fieldName) {
  if (!rawData) return; // it's unnecessary to propagate this special case 
      
  const data = rawData.replace(/["]+/g, '').split(SEMICOLON);
  const populatedData = data.map((value) => ({ contactId, [fieldName]: value }));
  if (populatedData.length > 0) 
    populatedData[0].isPrimary = true;
  return populatedData;
}

Answer 4

One effective strategy involves developing a single helper function that takes a specific name for mapping:

function generateInput(rawData, contactId, fieldName) {
  const data = rawData
    ? rawData.replace(/["]+/g, '').split(SEMICOLON)
    : undefined;
  const populatedData = data
    ? data.map((value) => ({ contactId, [fieldName]: value }))
    : undefined;
  if (Array.isArray(populatedData) && populatedData.length > 0)
    populatedData[0].isPrimary = true;
  return populatedData;
}

... you can then either directly utilize this helper function or form a range of wrappers with preset values:

function generateContactInput(rawData, contactId) {
  return generateInput(rawData, contactId, 'value');
}

function generateContactAddressInput(rawData, contactId) {
  return generateInput(rawData, contactId, 'streetAddress');
}

In fact, I would recommend reconsidering the code to eliminate the ternaries as well:

function generateInput(rawData, contactId, fieldName) {
  if (!rawData) return; // it's unnecessary to propagate this special case 
      
  const data = rawData.replace(/["]+/g, '').split(SEMICOLON);
  const populatedData = data.map((value) => ({ contactId, [fieldName]: value }));
  if (populatedData.length > 0) 
    populatedData[0].isPrimary = true;
  return populatedData;
}

What would be the most stylish approach to restructure this code, especially when the only variation is the name of the key in the returned object?

Answer №1

Answer №2

Similar questions

Unreachable variable in Vue 2.0

What is the process for invoking an asynchronous cleanup function?

Transmit information using express handlebars in a straightforward node application

React canvas losing its WebGL context

I'm confused about this CallbackRouteError with the provider named "credentials". Can someone please explain?

Ways to eliminate nested properties in JSON.stringify()

Retrieving a Promise's value for an HTML Element

What could be the reason for TypeScript throwing an error despite having a condition in place?

Utilizing *ngIf for Showing Elements Once Data is Completely Loaded

In the production build, the RegEx validation is lacking and fails to accept certain characters like 0, 2, 7, a, c, u, x, and occasionally z

Tips for safely storing data in local storage using Angular 5

Inquiries regarding code optimization with Selenium

Encountering difficulties in generating a personalized Angular Element

What steps should I take to resolve an unhandled promise error in a React TypeScript application while making an axios POST request?

I encountered an unexpected obstacle while reloading my Next.js application with animejs. The error message reads: "SyntaxError: Unexpected token 'export'." This unwelcome occurrence took place during the

Automated Async Saving in Angular 2 using Typescript

Utilizing Typescript to Load JSON File into React Context Provider

Calculating the minimum value of a number in Angular 8

Guide to slicing strings specifically with numerical characters at the end

The canActivate: [AuthGuard] feature on the external router is not functioning as expected