Modifying reduce callback to prevent accumulator reassignment

Question

Modifying reduce callback to prevent accumulator reassignment

Here is a function I wrote:

 type Data = {
    x?: number[],
    y?: number[],
    z?: number[],
  };

  const sampleData = [{ x: 1, y: 2, z: 3 }, { x: 4, y: 7, z: 10 }];

  const updatedData = sampleData.reduce((accumulator, element) => {
    Object.entries(element!).forEach(([key, value]) => {
      accumulator = { ...accumulator, [key]: [...(accumulator[key as keyof Data] || []), value] };
    });

    return accumulator;
  }, {} as Data);

Although this code accomplishes its purpose, it triggers an eslint error stating no-param-reassign.

I am aware that I can disable the rule, but I'm curious if there's a more optimal way to structure this reduce callback without reassigning accumulator.

javascript arrays typescript javascript-objects

Answer 1

Answer №1

To directly assign to acc[k], you can use the following code:

const data = [{ x: 1, y: 2, z: 3 }, { x: 4, y: 7, z: 10 }];

const formattedData = data.reduce((acc, el) => {
  Object.entries(el).forEach(([k, v]) => {
    acc[k] = (acc[k] || []).concat(v);
  });
  return acc;
}, {});

console.log(formattedData);

For a more efficient approach with fewer allocations and copies, you can use this optimized code:

const data = [{ x: 1, y: 2, z: 3 }, { x: 4, y: 7, z: 10 }];

const formattedData = data.reduce((acc, el) => {
  Object.entries(el).forEach(([k, v]) => {
    if (!acc[k]) {
      acc[k] = [];
    }
    acc[k].push(v);
  });
  return acc;
}, {});

console.log(formattedData);

Answer 2

To directly assign to acc[k], you can use the following code:

const data = [{ x: 1, y: 2, z: 3 }, { x: 4, y: 7, z: 10 }];

const formattedData = data.reduce((acc, el) => {
  Object.entries(el).forEach(([k, v]) => {
    acc[k] = (acc[k] || []).concat(v);
  });
  return acc;
}, {});

console.log(formattedData);

For a more efficient approach with fewer allocations and copies, you can use this optimized code:

const data = [{ x: 1, y: 2, z: 3 }, { x: 4, y: 7, z: 10 }];

const formattedData = data.reduce((acc, el) => {
  Object.entries(el).forEach(([k, v]) => {
    if (!acc[k]) {
      acc[k] = [];
    }
    acc[k].push(v);
  });
  return acc;
}, {});

console.log(formattedData);

Answer 3

Answer №2

When you see the 'no-param-reassign' warning, it indicates that you have altered the function parameters within the function itself. To address this warning, consider implementing a solution like the following:

type ChartData = {
  x?: number[],
  y?: number[],
  z?: number[],
};

const data = [{ x: 1, y: 2, z: 3 }, { x: 4, y: 7, z: 10 }];

const formattedData = data.reduce((acc, el) => {
  let newAcc = { ...acc };
  Object.entries(el!).forEach(([k, v]) => {
    newAcc = { ...newAcc , [k]: [...(newAcc [k as keyof ChartData] || []), v] };
  });

  return newAcc ;
}, {} as ChartData);

Answer 4

When you see the 'no-param-reassign' warning, it indicates that you have altered the function parameters within the function itself. To address this warning, consider implementing a solution like the following:

type ChartData = {
  x?: number[],
  y?: number[],
  z?: number[],
};

const data = [{ x: 1, y: 2, z: 3 }, { x: 4, y: 7, z: 10 }];

const formattedData = data.reduce((acc, el) => {
  let newAcc = { ...acc };
  Object.entries(el!).forEach(([k, v]) => {
    newAcc = { ...newAcc , [k]: [...(newAcc [k as keyof ChartData] || []), v] };
  });

  return newAcc ;
}, {} as ChartData);

Modifying reduce callback to prevent accumulator reassignment

Answer №1

Answer №2

Similar questions

Is there a way to use Javascript to verify if a window is fully open?

Can you explain the role of the faceVertexUV array within the three.js Geometry class?

Utilizing PHP and JavaScript to Transmit Multiple MySQL Result Sets from a Popup Window

Re-rendering multiple components with the new `use` feature in React version 18.3.0

The error message "TypeError: Cannot access the tapAsync property because it is undefined"

Switching between nested lists with a button: A simple guide

Javascript error when attempting to add leading zeros

Does MongoDB have a method to identify the presence of an element within an array?

Simultaneously removing and inserting components with Meteor.js

Using UI-Router in AngularJS to redirect a state to its default substate

Utilize JavaScript to substitute font family with a designated class name

JSX conditionally rendering with an inline question: <option disabled value="">Select an option</option>

Incorporate the ability to display a shape on a map when hovering over a table element, without the need to manually code a JavaScript function for every instance

Finding it difficult to grasp the concept of asynchronous functions in NodeJS

The element is inferred to have an 'any' type due to the fact that a 'string' type expression cannot be used to access elements in the type '{ Categories: Element; Admin: Element; }'

Using Angular to make an API call within a JavaScript function

Unexpected behavior: Angular4/Javascript Date object alters when timezone is specified in Date constructor

nw.js sending a multipart/form-data request

How can Firebase and Ionic be used to customize the password reset template for sending verification emails and more?

Generate a 2D array in C programming language