Efficiently Combining Multiple Array Method Transformations in Javascript

Question

I have a working program that satisfies the conditions below but I'm wondering if there is a more efficient solution. Currently, I apply 4 different Javascript array method transformations which results in returning a new array for each transformation for a total of 4 new arrays. Can these transformations be combined to only create 1 additional array instead of 4 new arrays? I could chain together the calls but I was thinking it might be possible to combine them all into reduce() method but I'm not sure how that would look or if there is some better solution.

The criteria that needs to be satisfied:

Only include employees from the Google organization but allow this to be passed as an input parameter
Last names should be unique (no duplicate last names)
Employees should be sorted by ID (ascending)
Each employee should have an added property called fullName that is a combination of first and last names, separated by a space

const GOOGLE_ORG = 'Google';

const employees = [
  {
    id: 3,
    firstName: 'John',
    lastName: 'Doe',
    organization: 'Google',
  },
  {
    id: 7,
    firstName: 'Jake',
    lastName: 'Smith',
    organization: 'Google',
  },
  {
    id: 1,
    firstName: 'Jane',
    lastName: 'Doe',
    organization: 'Google',
  },
  {
    id: 2,
    firstName: 'Vanessa',
    lastName: 'Smith',
    organization: 'Meta',
  },
  {
    id: 5,
    firstName: 'Sarah',
    lastName: 'Hernandez',
    organization: 'Meta',
  },
  {
    id: 8,
    firstName: 'Jessica',
    lastName: 'Morales',
    organization: 'Google',
  },
  {
    id: 4,
    firstName: 'Paul',
    lastName: 'Stark',
    organization: 'Google',
  },
  {
    id: 6,
    firstName: 'Peter',
    lastName: 'Brown',
    organization: 'Meta',
  },
];

const transformArray = (org) => {
  const filteredByOrg = employees.filter((employee) => employee.organization === org);
  const addedFullName = filteredByOrg.map((employee) => ({
    ...employee,
    fullName: employee.firstName + ' ' + employee.lastName,
  }));
  const uniqueByLastName = [...addedFullName.reduce((map, obj) => map.set(obj.lastName, obj), new Map()).values()];
  return uniqueByLastName.sort((a, b) => a.id - b.id);
};

transformArray(GOOGLE_ORG);

For example, instead of map.set(obj.lastName, obj), you could write map.set(obj.lastName, { ...obj, fullName: obj.firstName + " " + obj.lastName }) and remove the map. Personally, I prefer your split approach, as it’s more readable, but I would chain method calls as much as possible. You could also consider using Iterator Helpers. — Sebastian Simon
– Sebastian Simon, Commented Dec 31, 2021 at 12:00

Ramesh Reddy · Accepted Answer · 2021-12-31 19:20:47Z

Yes, you can use Array.prototype.reduce to minimize creating arrays and the number of iterations.

const GOOGLE_ORG = 'Google';

const employees = [
  {
    id: 3,
    firstName: 'John',
    lastName: 'Doe',
    organization: 'Google',
  },
  {
    id: 7,
    firstName: 'Jake',
    lastName: 'Smith',
    organization: 'Google',
  },
  {
    id: 1,
    firstName: 'Jane',
    lastName: 'Doe',
    organization: 'Google',
  },
  {
    id: 2,
    firstName: 'Vanessa',
    lastName: 'Smith',
    organization: 'Meta',
  },
  {
    id: 5,
    firstName: 'Sarah',
    lastName: 'Hernandez',
    organization: 'Meta',
  },
  {
    id: 8,
    firstName: 'Jessica',
    lastName: 'Morales',
    organization: 'Google',
  },
  {
    id: 4,
    firstName: 'Paul',
    lastName: 'Stark',
    organization: 'Google',
  },
  {
    id: 6,
    firstName: 'Peter',
    lastName: 'Brown',
    organization: 'Meta',
  },
];

const transformArray = (org) => {
  return (employees.reduce((lastNames => ((acc, curr) => {
    if(!lastNames.has(curr.lastName) && curr.organization === org) {
        lastNames.add(curr.lastName)
        acc.push({...curr, fullName: `${curr.firstName} ${curr.lastName}`})
    }
    return acc;
  }))(new Set()), []).sort((a, b) => a.id - b.id));
};

console.log(transformArray(GOOGLE_ORG));

Nina Scholz · Accepted Answer · 2022-01-20 21:43:22Z

1

You could chain all operations.

Actually it returns a different reuslt by filtering unique lastnames and sorting after or by sorting first and then filtering.

An example of a closure:

Take this line for filtering with a Set:

.filter((s => ({ lastName }) => !s.has(lastName) && s.add(lastName))(new Set))

A closure takes variables into the scope of the calling function and returns another function. This function has access to the variable. Let's have a look with a different formatting:

.filter(
    (s => ({ lastName }) => !s.has(lastName) && s.add(lastName))
    (new Set)
)

Here, the function is called with new Set and this function is returned

          ({ lastName }) => !s.has(lastName) && s.add(lastName)

as callback for the filter method.

const
    GOOGLE_ORG = 'Google',
    employees = [{ id: 3, firstName: 'John', lastName: 'Doe', organization: 'Google' }, { id: 7, firstName: 'Jake', lastName: 'Smith', organization: 'Google' }, { id: 1, firstName: 'Jane',  lastName: 'Doe', organization: 'Google' }, { id: 2, firstName: 'Vanessa', lastName: 'Smith', organization: 'Meta' }, { id: 5, firstName: 'Sarah', lastName: 'Hernandez', organization: 'Meta' }, { id: 8, firstName: 'Jessica', lastName: 'Morales', organization: 'Google' }, { id: 4, firstName: 'Paul', lastName: 'Stark', organization: 'Google' }, { id: 6, firstName: 'Peter', lastName: 'Brown', organization: 'Meta' }],
    result = employees
        .filter(({ organization }) => organization === GOOGLE_ORG)
        .filter((s => ({ lastName }) => !s.has(lastName) && s.add(lastName))(new Set))
        .sort((a, b) => a.id - b.id)
        .map(o => ({ ...o, fullName: o.firstName + o.lastName }));
        
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Jan 20, 2022 at 21:43

answered Dec 31, 2021 at 13:51

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

2 Comments

Negan Over a year ago

Could you explain what exactly is happening in the second filter ".filter((s => ({ lastName }) => !s.has(lastName) && s.add(lastName))(new Set))" ? How is the set being created? I usually will see filter with one return arrow function and not two. I'm curious how the "s" variable becomes a "new Set()" to be used in the second arrow function.

Nina Scholz Over a year ago

please see edit.

Collectives™ on Stack Overflow

Efficiently Combining Multiple Array Method Transformations in Javascript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related