Functional immutable way in javascript to copy an array with additional items in certain positions depending on condition on items

Question

I have an array:

[
    { "name": "batman", "hasSidekick": true },
    { "name": "shazam!", "hasSidekick": false },
    { "name": "capt america", "hasSidekick": true },
    { "name": "spiderman", "hasSidekick": false }
]

From this, I want to create a new array of hero names which will have all of the above names but when hasSidekick is true for a hero, there should be an additional name inserted after it.

Expected output:

[
    "batman",
    "batman's sidekick",
    "shazam!", ,
    "capt america",
    "capt america's sidekick",
    "spiderman"
]

I can do it with forEach and pushing additional items conditionally based on hasSidekick:

const heroes = [
  { name: "batman", hasSidekick: true },
  { name: "shazam!", hasSidekick: false },
  { name: "capt america", hasSidekick: true },
  { name: "spiderman", hasSidekick: false },
];
let heroesAndSidekicks = [];
heroes.forEach(hero => {
  heroesAndSidekicks.push(hero.name);
  if (hero.hasSidekick) {
    heroesAndSidekicks.push(`${hero.name}'s sidekick`);
  }
});
console.log(heroesAndSidekicks);

But please suggest how I can do it in functional programming way without mutation.

what do you mean "without mutation"? I'm just confused why you need that? — Addis
– Addis, Commented Jan 15, 2020 at 20:52
Use Array.prototype.concat to combine the results from each iteration. The results from each iteration should be an array with 1 element or 2 elements, depending on whether the hero has a sidekick. — Barmar
– Barmar, Commented Jan 15, 2020 at 20:53
Wouldn't you need at least some mutation if you want add items to your array? There is no adding or removing without changing something. Or do you mean without mutating the original array? — Emiel Zuurbier
– Emiel Zuurbier, Commented Jan 15, 2020 at 20:57
I am also confused by the "without mutation" requirement. You want to create a new array right? Well that new array is going to start out empty and in order to get elements into it you are going to have to "mutate" it. — gforce301
– gforce301, Commented Jan 15, 2020 at 20:58

Nina Scholz · Accepted Answer · 2020-01-15 21:11:36Z

4

You could take Array#flatMap.

var data = [{ name: "batman", hasSidekick: true }, { name: "shazam!", hasSidekick: false }, { name: "capt america", hasSidekick: true }, { name: "spiderman", hasSidekick: false }],
    result = data.flatMap(({ name, hasSidekick }) => hasSidekick
        ? [name, name + '\'s sidekick']
        : name
    );

console.log(result);

edited Jan 15, 2020 at 21:11

answered Jan 15, 2020 at 20:54

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sompnd Over a year ago

Thank you! The flatmap will flatten out if an array is returned. This is fantastic!

norbitrial · Accepted Answer · 2020-01-15 20:53:14Z

1

I think Array.prototype.reduce() can solve your issue. From the documentation:

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

Please find a possible solution below:

const data = [
    { "name": "batman", "hasSidekick": true },
    { "name": "shazam!", "hasSidekick": false },
    { "name": "capt america", "hasSidekick": true },
    { "name": "spiderman", "hasSidekick": false }
];

const result = data.reduce((a, e) => {
  a.push(e.name);

  if (e.hasSidekick) {
     a.push(`${e.name}'s sidekick`);
  }

  return a;
}, []);

console.log(result);

I hope that helps!

edited Jan 15, 2020 at 20:53

answered Jan 15, 2020 at 20:49

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

1 Comment

Barmar Over a year ago

a.push() is mutation.

Collectives™ on Stack Overflow

Functional immutable way in javascript to copy an array with additional items in certain positions depending on condition on items

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related