Removing undefined values from Array

Question

In certain situations, it may happen that we have undefined or generally falsy values in Array structures. For instance when reading and filling data from some unknown sources like Databases or HTML structures. Like

var data = [42, 21, undefined, 50, 40, undefined, 9]

Since that might cause trouble when looping over such arrays and working on the elements, what is the best practice to remove undefined (falsy values) ?

How about this http://jsfiddle.net/5uuyoo5t/ ? – Rakesh_Kumar Feb 19 '15 at 13:27 — Rakesh_Kumar, Feb 19 '15 at 13:27

score 218 · Accepted Answer · edited Jun 28 '16 at 01:07

218

To use Array.prototype.filter here might be obvious. So to remove only undefined values we could call

var data = [42, 21, undefined, 50, 40, undefined, 9];

data = data.filter(function( element ) {
   return element !== undefined;
});

If we want to filter out all the falsy values (such as 0 or null) we can use return !!element; instead.

But we can do it slighty more elegant, by just passing the Boolean constructor function, respectively the Number constructor function to .filter:

data = data.filter( Number );

That would do the job in this instance, to generally remove any falsy value, we would call

data = data.filter( Boolean );

Since the Boolean() constructor returns true on truthy values and false on any falsy value, this is a very neat option.

edited Jun 28 '16 at 01:07

Ivan Castellanos

8,041
1
47
42

answered Feb 19 '15 at 13:19

jAndy

231,737
57
305
359

19

Just note that `filter(Number)` will also remove `0`. – Lewis Mar 05 '16 at 10:05
6

this will also remove falsey values like `false`, which may exist in the array – random-forest-cat May 22 '16 at 21:42
@jAndy Thanks. It solved my problem in IE 11 as well. Earlier I used arrow function to remove undefined. – sgajera Oct 22 '18 at 08:44
2

This can be shortened to `.filter(n=>n!==undefined)` – ctwheels Dec 12 '19 at 16:09
If you just said "...damn..." under your breath then you're officially a nerd like me! – wle8300.com Sep 11 '20 at 17:03
2

Someone might get confused, so : The callback function receives the element, that means that doing `filter(Boolean)` is the same as `filter((elem)=>Boolean(elem)`. – trogne Jan 16 '21 at 21:37
Does it also work with Interface? Custom types? in TypeScript? I tried but failed :( – Adarsh Pawar Mar 30 '23 at 17:28

score 131 · Answer 2 · answered Sep 08 '17 at 22:31

131

Inline using lambda

result.filter(item => item);

answered Sep 08 '17 at 22:31

raphaklaus

1,645
1
10
8

14

this one will remove all falsey values. Since the OP specified falsey values being unwanted, this is definitely the best answer IMO. However, thy also specifically point out undefined at which point you'd want `result.filter(item => item !== undefined)` – Braden Rockwell Napier Oct 30 '17 at 23:12
4

`[true,false,undefined,null,'a',1,0,'0'].filter(x=>x)` returns `[true, "a", 1, "0"]` – frumbert Sep 26 '18 at 01:51
1

best answer here – Omar Jul 15 '19 at 19:15
JS newby here. People say this is the best answer but why is this better than `filter(Boolean)` or `filter(item => !!item)` – Adam Hughes Jun 14 '22 at 20:42
1

@AdamHughes It's not, ppl often overvalue brevity compared to clarity. Of the 3, `filter(item => !!item)` would actually be the best bc it clearly communicates that you're filtering on the truthiness of item. `Boolean` would be the worst bc both the input and operation are no longer explicit. Plus it looks like you're filtering for booleans, which is definitely not what it does. – John Neuhaus Jun 27 '23 at 19:34

score 30 · Answer 3 · edited May 06 '22 at 22:32

30

You can use lodash compact method, which removes null, undefined and ''.

_.compact(data)

edited May 06 '22 at 22:32

leonheess

16,068
14
77
112

answered Jun 21 '18 at 11:33

Akash Dathan

4,348
2
24
45

13

that's not freely available without another library. That's overkill – Paul Brunache Aug 15 '18 at 21:26
2

This works and cleans the array. this is the solution i prefer – Rigin Oommen Dec 03 '18 at 09:20

score 26 · Answer 4 · answered Jan 15 '21 at 05:55

26

[NaN, undefined, null, 0, 1, 2, 2000, Infinity].filter(Boolean)
//[ 1, 2, 2000, Infinity ]

answered Jan 15 '21 at 05:55

Anil

523
1
8
16

score 22 · Answer 5 · answered Oct 15 '19 at 16:47

22

If you have an array of objects and want to remove all null and undefined items:

[].filter(item => !!item);

answered Oct 15 '19 at 16:47

Diogo Capela

5,669
5
24
35

score 20 · Answer 6 · answered Jun 10 '20 at 18:02

20

ES6 single line

data.filter(e => e)

answered Jun 10 '20 at 18:02

Rejo Chandran

599
4
22

8

Careful, this also removes any "falsey" values, like zero. `[undefined, null, 0, false].filter(e => e) // []` – Jason Moore Jul 27 '21 at 04:06
1

JavaScript is weird at times :D – Rejo Chandran Jul 27 '21 at 18:19

score 16 · Answer 7 · answered Oct 27 '20 at 06:46

16

data.filter(Boolean)

Is the most short and readable way to do it.

answered Oct 27 '20 at 06:46

Yan Takushevich

1,843
2
18
23

3

Why does this work? Don't just post "magic" explain also how it works and why this is a good solution. – Lucian Enache Feb 26 '21 at 10:40
1

@LucianEnache it applies Boolean function for every item of the array and if it converts to false, it filters it out. Read more here: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Boolean – Yan Takushevich Mar 25 '22 at 08:22
Why is the resulting array, still typed as potentially containing undefined? – SeanMC Dec 07 '22 at 16:52
2

@SeanMC It's another question, concerning typescript. It doesn't play well with array.filter. You can find additional info on this topic here: https://stackoverflow.com/questions/43010737/way-to-tell-typescript-compiler-array-prototype-filter-removes-certain-types-fro – Yan Takushevich Dec 08 '22 at 10:32
The most short way to say most short is shortest. It's also the readablest way. – jox Mar 05 '23 at 01:27

score 5 · Answer 8 · edited Jan 05 '20 at 10:11

5

As Diogo Capela said, but where 0 is not filtered out as well.

[].filter(item => item !== undefined && item !== null)

edited Jan 05 '20 at 10:11

Akber Iqbal

14,487
12
48
70

answered Jan 05 '20 at 09:48

Tobias Waaentz

75
1
6

score 3 · Answer 9 · answered Nov 21 '16 at 05:09

var a =  ["3","", "6"];
var b =  [23,54,56];
var result = [];

for (var i=0;i<a.length;++i) {
    if (a[i] != "") {
        result[i] = b[i];
    }
}

result = result.filter(function( element ) {
   return element !== undefined;
});

console.log(result);

score 3 · Answer 10 · edited Jan 05 '20 at 12:05

3

var arr1 = [NaN, 0, 15, false, -22, '',undefined, 47, null];

var array1 = arr1.filter(function(e){ return e;});

document.write(array1);

single lined answer

edited Jan 05 '20 at 12:05

ROOT

11,363
5
30
45

answered Jun 02 '19 at 15:33

vishal

381
2
4

score 1 · Answer 11 · answered Jun 16 '17 at 20:46

Array.prototype.reduce() can be used to delete elements by condition from an array but with additional transformation of the elements if required in one iteration.

Remove undefined values from array, with sub-arrays support.

function transform(arr) {
    return arr.reduce((memo, item) => {
        if (typeof item !== "undefined") {
            if (Array.isArray(item)) item = transform(item);
            // We can transform item here.
            memo.push(item);
        }
        return memo;
    }, []);
}

let test1 = [1, 2, "b", 0, {}, "", , " ", NaN, 3, undefined, null, 5, false, true, [1, true, 2, , undefined, 3, false, ''], 10];

console.log(transform(test1));

Try it on jsfiddle.net/bjoy4bcc/

score 1 · Answer 12 · answered Jan 05 '20 at 10:25

1

in ES6 this can be achieved by simply using using filter with function return the value like this:

const array = [NaN, 0, 15, false, -22, '',undefined, 47, null];
const filteredArr = array.filter(elm => elm);
console.log(filteredArr);

answered Jan 05 '20 at 10:25

ROOT

11,363
5
30
45

score 1 · Answer 13 · answered Sep 14 '20 at 04:57

The solution with Array.filter will actually keep the array unchanged and create a new array without the undesired items. If you want to clean an array without duplicating it, you can use this:

for (var i = data.length-1; i >= 0; i--) {
    if (!data[i]) {
        data.splice(i, 1);
    }
}

score 0 · Answer 14 · answered Aug 17 '23 at 18:06

If you are in Typescript and want to return an Array of strings vs from Array<string|undefined> try one of these...

var arr = ['a', 'b', 'c', undefined, 'e', undefined, 'g'];
var solutionA = arr.reduce((acc, item) => {
    item && acc.push(item);
    return acc;
}, []);

console.log('solution a', solutionA);

var solutionB = [];
arr.forEach((each) => each && solutionB.push(each), []);

console.log('solution b', solutionB);

arr.forEach((each,index) => (!each) && arr.splice(index,1),[]);
console.log('solution c', arr);

score -4 · Answer 15 · answered Mar 25 '20 at 18:14

-4

var data = Object.keys(data)

This will remove undefined values but array index will change

answered Mar 25 '20 at 18:14

SANTHOSH.SJ

343
1
4
7

2

Was there supposed to be more code here? All this is going to do is return an array of the numbers 0-6. – John Montgomery Nov 24 '20 at 00:49

Removing undefined values from Array

15 Answers15

Linked

Related