Removing an item when using Array.prototype.map() in Javascript

Question

I currently have a variable that contains an array of numbers

let numbersArray = [12, 15, 19, 20];

When looping over it I want to delete the entry if it is a certain value

let numbersArray = [12,15,19,20],
    filteredNumbersArray = numbersArray.map(function(value)
    {
        if(value === 15)
        {
            //delete the value
        } else {
            return value * 2;
        }
    });

In regards to using .filter(), the value must be mutatable, I have updated the example

I have searched through MDN but couldn't find anything about removing an element within a map().

_{The Rubber Duck didn't help either}

Array#filter can remove an item, Array#map returns a value for each item. — Nina Scholz
– Nina Scholz, Commented Apr 1, 2018 at 15:59
@NinaScholz Ah I see, it seems I missed a detail out of my question which I thought wasn't needed, I require value manipulation as well. — Ian
– Ian, Commented Apr 1, 2018 at 16:01

Nina Scholz · Accepted Answer · 2018-04-01 16:30:50Z

9

You could filter and then map

var array = [12, 15, 19, 20],
    result = array
        .filter(v => v !== 15)
        .map(v => 2 * v);
        
console.log(result);

Or use the swiss knife of all array manipulations: Array#reduce

var array = [12, 15, 19, 20],
    result = array.reduce((r, v) => v !== 15 ? r.concat(v): r, []);
        
console.log(result);

With some optimizations

var array = [12, 15, 19, 20],
    result = array.reduce(function (r, v) {
        if (v !== 15) {
            r.push(2 * v);
        }
        return r;
    }, []);
        
console.log(result);

edited Apr 1, 2018 at 16:30

answered Apr 1, 2018 at 16:07

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

3 Comments

Ian Over a year ago

I had never seen the reduce() that's a pretty neat way of doing it, thank you!

T.J. Crowder Over a year ago

@Ian: It's also hideously inefficient, as given above, creating a whole new array for each iteration. If you want to use reduce for this (it doesn't gain you anything but a decrease in clarity), then: filtered = original.reduce((r, v) => { if (v !== 15) { r.push(v); } return r; }, []); so it's not copying the array each time.

Ian Over a year ago

Thank you for the heads up @T.J.Crowder

T.J. Crowder · Accepted Answer · 2018-04-01 16:26:25Z

map can't remove values. If you need to simultaneously map and filter, your options are:

filter, then map, e.g.:

filteredNumbersArray = numbersArray.filter(function(v) { return v !== 15; })
                                   .map(function(v) { return v * 2; });

or with ES2015+ syntax:

filteredNumbersArray = numbersArray.filter(v => v !== 15)
                                   .map(v => v * 2);

or

Write your own thing, probably:
```
filteredNumbersArray = [];
numbersArray.forEach(function(v) {
    if (v !== 15) {
        filteredNumbersArray.push(v * 2);
    }
});
```
or with ES2015+ syntax:
```
filteredNumbersArray = [];
for (const v of numbersArray) {
    if (v !== 15) {
        filteredNumbersArray.push(v * 2);
    }
}
```
(You can also [ab]use reduce here, but it doesn't gain you anything worth having, and costs clarity.)

If it comes up a lot for you, give yourself a combined map-and-filter function that uses some special return value to indicate that the entry should be dropped.

Dries Meerman · Accepted Answer · 2018-04-01 16:05:45Z

0

Map doesn't remove values it just mutates them. You could set the value to null but that is probably not your intent.

Filter might server you better
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

let numbersArray = [12,15,19,20],
filteredNumbersArray = numbersArray.filter(function(value)
{
    return value != 15
});

This would return an array without the number 15.

answered Apr 1, 2018 at 16:05

Dries Meerman

961 silver badge6 bronze badges

Collectives™ on Stack Overflow

Removing an item when using Array.prototype.map() in Javascript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related