1622

How do I remove empty elements from an array in JavaScript?

Is there a straightforward way, or do I need to loop through it and remove them manually?

3
  • 27
    It would be helpful if your question had specified exactly what you mean by "empty elements", since most of the answers here interpret that incorrectly (IMHO) to mean "falsey" elements. NB: there is a difference between what you get for var a = [,,] and var a = [undefined, undefined]. The former is truly empty, but the latter actually has two keys, but with undefined values.
    – Alnitak
    Dec 29, 2015 at 11:30
  • Not quite an answer, but I would say it's better practice to try to avoid null/undefined in an array in this first place as much as you can. For instance, if your nulls come from mapping over another array with the map function returning null for certain elements, try to Array.filter out those elements prior to running the map. Makes your code more readable/self-documenting. Obviously, this doesn't work for every use case, but it can be applied to a lot. Aug 11, 2021 at 17:01
  • For long sparse arrays Array.filter does not help. See solution in the answer stackoverflow.com/questions/16196338/…
    – Monday
    Mar 26 at 11:51

50 Answers 50

1791

A few simple ways:

var arr = [1,2,,3,,-3,null,,0,,undefined,4,,4,,5,,6,,,,];

arr.filter(n => n)
// [1, 2, 3, -3, 4, 4, 5, 6]

arr.filter(Number) 
// [1, 2, 3, -3, 4, 4, 5, 6]

arr.filter(Boolean) 
// [1, 2, 3, -3, 4, 4, 5, 6]

or - (only for single array items of type "text")

['','1','2',3,,'4',,undefined,,,'5'].join('').split(''); 
// output:  ["1","2","3","4","5"]

or - Classic way: simple iteration

var arr = [1,2,null, undefined,3,,3,,,0,,,[],,{},,5,,6,,,,],
    len = arr.length, i;

for(i = 0; i < len; i++ )
    arr[i] && arr.push(arr[i]);  // copy non-empty values to the end of the array

arr.splice(0 , len);  // cut the array and leave only the non-empty values
// [1,2,3,3,[],Object{},5,6]

jQuery:

var arr = [1,2,,3,,3,,,0,,,4,,4,,5,,6,,,,];
    
arr = $.grep(arr, n => n == 0 || n);
// [1, 2, 3, 3, 0, 4, 4, 5, 6]
34
  • 37
    earliest IE support for filter is IE9 standards mode.
    – yincrash
    Nov 2, 2011 at 2:19
  • 21
    for pure javascript it should be arr = arr.filter(function(n){return n; });
    – ilumin
    Jan 12, 2013 at 8:38
  • 28
    foo.join("").split("") only seems to work if the strings are single characters
    – Atav32
    Jul 26, 2013 at 16:32
  • 17
    Your pure JavaScript code has a bug. If the array has a value with "0" in it, the value will be filtered out because "0" is falsy. What you want is: arr.filter(function (n) { return (n !== undefined && n !== null); }); Mar 7, 2014 at 21:55
  • 13
    ES6 can do it even simpler arr.filter(e=>e) and this can be chained by map, reduce, etc.
    – Sheepy
    Feb 9, 2015 at 4:32
1485

EDIT: This question was answered almost nine years ago when there were not many useful built-in methods in the Array.prototype.

Now, certainly, I would recommend you to use the filter method.

Take in mind that this method will return you a new array with the elements that pass the criteria of the callback function you provide to it.

For example, if you want to remove null or undefined values:

var array = [0, 1, null, 2, "", 3, undefined, 3,,,,,, 4,, 4,, 5,, 6,,,,];

var filtered = array.filter(function (el) {
  return el != null;
});

console.log(filtered);

It will depend on what you consider to be "empty" for example, if you were dealing with strings, the above function wouldn't remove elements that are an empty string.

One typical pattern that I see often used is to remove elements that are falsy, which include an empty string "", 0, NaN, null, undefined, and false.

You can pass to the filter method, the Boolean constructor function, or return the same element in the filter criteria function, for example:

var filtered = array.filter(Boolean);

Or

var filtered = array.filter(function(el) { return el; });

In both ways, this works because the filter method in the first case, calls the Boolean constructor as a function, converting the value, and in the second case, the filter method internally turns the return value of the callback implicitly to Boolean.

If you are working with sparse arrays, and you are trying to get rid of the "holes", you can use the filter method passing a callback that returns true, for example:

var sparseArray = [0, , , 1, , , , , 2, , , , 3],
    cleanArray = sparseArray.filter(function () { return true });

console.log(cleanArray); // [ 0, 1, 2, 3 ]

Old answer: Don't do this!

I use this method, extending the native Array prototype:

Array.prototype.clean = function(deleteValue) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] == deleteValue) {         
      this.splice(i, 1);
      i--;
    }
  }
  return this;
};

test = new Array("", "One", "Two", "", "Three", "", "Four").clean("");
test2 = [1, 2,, 3,, 3,,,,,, 4,, 4,, 5,, 6,,,,];
test2.clean(undefined);

Or you can simply push the existing elements into other array:

// Will remove all falsy values: undefined, null, 0, false, NaN and "" (empty string)
function cleanArray(actual) {
  var newArray = new Array();
  for (var i = 0; i < actual.length; i++) {
    if (actual[i]) {
      newArray.push(actual[i]);
    }
  }
  return newArray;
}

cleanArray([1, 2,, 3,, 3,,,,,, 4,, 4,, 5,, 6,,,,]);
19
  • 122
    WARNING: The 2nd option will remove any elements from an array considered "falsy," i.e. the values of false, 0, null & undefined. This array would end up with nothing at all in it: [null,,,0,,0,0,0,false,null,0] even though I might want the elements with values of 0, as in this array: [1,0,1,0,0,1] Nov 11, 2008 at 16:48
  • 5
    I realize that - which is why I only spoke of the second option. As for the first one, it is so narrow in scope that I would hesitate to make it part of the Array's prototype. See Alnitak's answer on this page for something that would be more ideal. Yours does allow for chaining though, obviously. Nov 11, 2008 at 17:02
  • 1
    Your first solution is really nice if you don't have access to the "filter" method. Else I believe Alnitak's answer is better.
    – Joe Pineda
    Nov 11, 2008 at 18:06
  • 2
    @AlfaTek - on all apart from the newest browsers #2 will have the best performance, because arrays in JS aren't really arrays. The splice call is really expensive on older browsers because they have to renumber all of the array keys to close up the gap.
    – Alnitak
    May 10, 2011 at 19:35
  • 1
    @David no, in modern code you should safely extend Array.prototype using Object.defineProperty to make the new function a non-enumerable property and then avoid the performance hit caused by putting .hasOwnProperty in every loop.
    – Alnitak
    Nov 23, 2015 at 11:57
265

If you need to remove ALL empty values ("", null, undefined and 0):

arr = arr.filter(function(e){return e}); 

To remove empty values and Line breaks:

arr = arr.filter(function(e){ return e.replace(/(\r\n|\n|\r)/gm,"")});

Example:

arr = ["hello",0,"",null,undefined,1,100," "]  
arr.filter(function(e){return e});

Return:

["hello", 1, 100, " "]

UPDATE (based on Alnitak's comment)

In some situations you may want to keep "0" in the array and remove anything else (null, undefined and ""), this is one way:

arr.filter(function(e){ return e === 0 || e });

Return:

["hello", 0, 1, 100, " "]
7
  • Yup this is nice cuz removes "" as well.
    – Vladimirs
    Mar 29, 2013 at 15:51
  • 3
    The test function could be a little more explicit: function(e){return !!e}
    – Koen.
    Nov 2, 2014 at 0:45
  • 4
    @Koen Please note that !!e will include NaN (unlike 0) whereous e would not (like 0).
    – Sheepy
    Feb 9, 2015 at 4:35
  • Doesn't actually answer the question that was asked.
    – Alnitak
    Feb 24, 2015 at 17:16
  • 2
    OR use var myarr=[1, 2,, 3,, 3,undefined,,"",,0, 4,, 4,, 5,, 6,,,,].filter(Boolean); removes undefined,"" and 0 Apr 17, 2016 at 13:53
144

Simply one liner:

[1, false, "", undefined, 2].filter(Boolean); // [1, 2]

or using underscorejs.org:

_.filter([1, false, "", undefined, 2], Boolean); // [1, 2]
// or even:
_.compact([1, false, "", undefined, 2]); // [1, 2]
7
  • 1
    This is really cool - I have a newb question though: it looks like you're using a class name as a function call -- is that typecasting? I haven't seen this before and am not sure I get why passing Boolean works as a function...
    – Andrew
    Feb 3, 2013 at 0:50
  • 9
    If you treat Boolean as a function it will simply return true or false wether the value is truly/falsy. Feb 7, 2013 at 16:38
  • 9
    You're not treating Boolean as a function; it is a function. (A completely normal function, except that it's natively-implemented.) Somebody needs to do a little research on the JavaScript object model. ;) Feb 24, 2015 at 17:28
  • @ELLIOTTCABLE Im just gonna leave this here, (true).constructor === Boolean. And then tell me if we can do this with other build-ins in JS. ;)) (of course excluted the other 5 build-in constructors. (String, Array, Object, Function, Number)) Feb 24, 2015 at 17:33
  • 1
    Will fail both if there is value 0 in the array
    – Sai Ram
    Jan 31, 2017 at 6:13
139

If you've got Javascript 1.6 or later you can use Array.filter using a trivial return true callback function, e.g.:

arr = arr.filter(function() { return true; });

since .filter automatically skips missing elements in the original array.

The MDN page linked above also contains a nice error-checking version of filter that can be used in JavaScript interpreters that don't support the official version.

Note that this will not remove null entries nor entries with an explicit undefined value, but the OP specifically requested "missing" entries.

7
  • You're right! It can be so simple as this (and works!): test3 = [1,2,,3,,3,,,,7,,,7,,,0,,,4,,4,,5,,6,,undefined,,null,,]; printp( "Using array's native filtering: ", test3.filter( function(value){return (value==undefined) ? 0 : 1;} ) );
    – Joe Pineda
    Nov 11, 2008 at 18:02
  • 3
    +1 As Alnitak said, they have the code that can be used in the case of not having js 1.6 available Apr 28, 2010 at 18:50
  • 3
    @katsh I've clarified - the code above does work to remove entries for which no value exists at all, which (I've subsequently) learnt is semantically different to the case of a key that exists but which has undefined as its given value.
    – Alnitak
    Jul 10, 2014 at 7:56
  • 4
    To remove undefined or null entries, just make a small modification... arr = arr.filter(function(v) { return v; });
    – Alan CN
    Oct 6, 2016 at 21:13
  • 6
    @AlanCN you've completely missed my point. The OP asked to remove missing entries, whilst the bulk of the answers here (incorrectly) remove any "falsey" entries.
    – Alnitak
    Oct 7, 2016 at 9:28
116

For removing holes, you should use

arr.filter(() => true)
arr.flat(0) // New in ES2019

For removing hole, null, and, undefined:

arr.filter(x => x != null)

For removing hole, and, falsy (null, undefined, 0, -0, 0n, NaN, "", false, document.all) values:

arr.filter(x => x)

arr = [, null, (void 0), 0, -0, 0n, NaN, false, '', 42];
console.log(arr.filter(() => true)); // [null, (void 0), 0, -0, 0n, NaN, false, '', 42]
console.log(arr.filter(x => x != null)); // [0, -0, 0n, NaN, false, "", 42]
console.log(arr.filter(x => x)); // [42]

Note:

  • Holes are some array indexes without elements.
arr = [, ,];
console.log(arr[0], 0 in arr, arr.length); // undefined, false, 2; arr[0] is a hole
arr[42] = 42;
console.log(arr[10], 10 in arr, arr.length); // undefined, false, 43; arr[10] is a hole

arr1 = [1, 2, 3];
arr1[0] = (void 0);
console.log(arr1[0], 0 in arr1); // undefined, true; a[0] is undefined, not a hole

arr2 = [1, 2, 3];
delete arr2[0]; // NEVER do this please
console.log(arr2[0], 0 in arr2, arr2.length); // undefined, false; a[0] is a hole
  • All above methods are returning a copy of the given array, not modifying it in-place.
arr = [1, 3, null, 4];
filtered = arr.filter(x => x != null);
console.log(filtered); // [1, 3, 4]
console.log(arr); // [1, 3, null, 4]; not modified
4
  • 4
    This should be high up in the answer. Can you expand what you mean by holes/hole ..?
    – samayo
    Jan 9, 2018 at 14:43
  • 2
    @samayo holes are unfilled array items ie [, ,] Apr 23, 2018 at 20:06
  • 1
    By using arr.filter(x => x), JS will check whether x is truthy or falsy, i.e. if (x), therefore only the truthy value will be assigned to the new list.
    – ckybonist
    Apr 21, 2019 at 11:30
  • arr.flat() is my new favorite way of doing this.
    – jdunning
    Feb 7 at 3:00
60

The clean way to do it.

var arr = [0,1,2,"Thomas","false",false,true,null,3,4,undefined,5,"end"];
arr = arr.filter(Boolean);
// [1, 2, "Thomas", "false", true, 3, 4, 5, "end"]
1
  • 7
    Empty elements are undefined; this basically removes all falsy values.
    – pimvdb
    Mar 26, 2011 at 17:17
53

Actually, you can use ES6+ methods, assume the array is below:

const arr = [1,2,3,undefined,4,5,6,undefined,7,8,undefined,undefined,0,9];

And the answer could be one of these two ways:

  • First way:

    const clearArray = arr.filter(i => i); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
    
  • Second way:

    const clearArray = arr.filter(Boolean); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
    

Update 14th Oct 2022:

Those two answers aren't utterly correct, even in the given example, yeah, it works but pay attention to the number 0 in the given array, by both ways number zero is disappeared and it's obviously related to checking items by using boolean coercion.

A completely correct way is to check nulish and remove them:

const notNil = (i) => !(typeof i === 'undefined' || i === null);

const clearArray = arr.filter(i => isNil(i));

const arr = [1,2,3,undefined,4,5,6,undefined,7,8,undefined,undefined,0,9];
const notNil = (i) => !(typeof i === 'undefined' || i === null);

console.log("Not nil: ", arr.filter(notNil));

3
  • Would arr.filter(i) => typeof i === 'number'; produce the same result?
    – iiminov
    Oct 18, 2022 at 8:45
  • Dear @iiminov, Why did you preassume the array items are number? They could be anything, the primary purpose is to wipe all Nil things.
    – AmerllicA
    Oct 18, 2022 at 8:53
  • Sorry @AmerllicA, I wasn't assuming anything. All I wanted from the array are the numbers. So as per example array, I should be able to filter directly by type to obtain the same result. Of course, if I wanted to keep everything except null and undefined then I would filter accordingly.
    – iiminov
    Oct 19, 2022 at 9:56
43

ES6:

let newArr = arr.filter(e => e);
0
42

Simple ES6

['a','b','',,,'w','b'].filter(v => v);
2
  • 2
    This does not work: [1, 'two', null, undefined, , NaN, false, true, 0].filter(v => v).
    – zipper
    Oct 3, 2019 at 3:52
  • [1, 'two', null, undefined, , NaN, false, true, 0].filter(v => v!=null) preserves NaN and false.
    – Julian
    Oct 2, 2021 at 7:17
22

With Underscore/Lodash:

General use case:

_.without(array, emptyVal, otherEmptyVal);
_.without([1, 2, 1, 0, 3, 1, 4], 0, 1);

With empties:

_.without(['foo', 'bar', '', 'baz', '', '', 'foobar'], '');
--> ["foo", "bar", "baz", "foobar"]

See lodash documentation for without.

1
  • 1
    Issue with #compact is that it removes any falsy values. So if your array contain 0 values, they will also be removed. Mar 18, 2016 at 9:44
16

If using a library is an option I know underscore.js has a function called compact() http://documentcloud.github.com/underscore/ it also has several other useful functions related to arrays and collections.

Here is an excerpt from their documentation:

_.compact(array)

Returns a copy of the array with all falsy values removed. In JavaScript, false, null, 0, "", undefined and NaN are all falsy.

_.compact([0, 1, false, 2, '', 3]);

=> [1, 2, 3]

1
  • 1
    It also removes non-empty elements defined elements like 0.
    – Timothy Gu
    Nov 11, 2014 at 4:09
15

@Alnitak

Actually Array.filter works on all browsers if you add some extra code. See below.

var array = ["","one",0,"",null,0,1,2,4,"two"];

function isempty(x){
if(x!=="")
    return true;
}
var res = array.filter(isempty);
document.writeln(res.toJSONString());
// gives: ["one",0,null,0,1,2,4,"two"]  

This is the code you need to add for IE, but filter and Functional programmingis worth is imo.

//This prototype is provided by the Mozilla foundation and
//is distributed under the MIT license.
//http://www.ibiblio.org/pub/Linux/LICENSES/mit.license

if (!Array.prototype.filter)
{
  Array.prototype.filter = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var res = new Array();
    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this)
      {
        var val = this[i]; // in case fun mutates this
        if (fun.call(thisp, val, i, this))
          res.push(val);
      }
    }

    return res;
  };
}
2
  • This should be the accepted answer, as it works out of the box. Thanks very much.
    – Tony
    Aug 6, 2014 at 21:44
  • 2
    @Tony no, it shouldn't, because an element with an empty string in it is not the same as an "empty element", the latter being what the OP asked for.
    – Alnitak
    Feb 24, 2015 at 17:18
14

Since nobody else mentioned it and most people have underscore included in their project you can also use _.without(array, *values);.

_.without(["text", "string", null, null, null, "text"], null)
// => ["text", "string", "text"]
0
13

To remove undefined elements from an array you can simply use

const array = [
  { name: "tim", age: 1 },
  undefined,
  { name: "ewrfer", age: 22 },
  { name: "3tf5gh", age: 56 },
  null,
  { name: "kygm", age: 19 },
  undefined,
];
console.log(array.filter(Boolean));

11
foo = [0, 1, 2, "", , false, 3, "four", null]

foo.filter(e => e === 0 ? true : e)

returns

[0, 1, 2, 3, "four"]

If you're positive you won't have any 0's in your array, it can look a bit nicer:

foo.filter(e => e)
0
8

You may find it easier to loop over your array and build a new array out of the items you want to keep from the array than by trying to loop and splice as has been suggested, since modifying the length of the array while it is being looped over can introduce problems.

You could do something like this:

function removeFalsyElementsFromArray(someArray) {
    var newArray = [];
    for(var index = 0; index < someArray.length; index++) {
        if(someArray[index]) {
            newArray.push(someArray[index]);
        }
    }
    return newArray;
}

Actually here is a more generic solution:

function removeElementsFromArray(someArray, filter) {
    var newArray = [];
    for(var index = 0; index < someArray.length; index++) {
        if(filter(someArray[index]) == false) {
            newArray.push(someArray[index]);
        }
    }
    return newArray;
}

// then provide one or more filter functions that will 
// filter out the elements based on some condition:
function isNullOrUndefined(item) {
    return (item == null || typeof(item) == "undefined");
}

// then call the function like this:
var myArray = [1,2,,3,,3,,,,,,4,,4,,5,,6,,,,];
var results = removeElementsFromArray(myArray, isNullOrUndefined);

// results == [1,2,3,3,4,4,5,6]

You get the idea - you could then have other types of filter functions. Probably more than you need, but I was feeling generous... ;)

0
6

What about this(ES6) : To remove Falsy value from an array.

var arr = [0,1,2,"test","false",false,true,null,3,4,undefined,5,"end"];

arr.filter((v) => (!!(v)==true));

//output:

//[1, 2, "test", "false", true, 3, 4, 5, "end"]
6

You should use filter to get array without empty elements. Example on ES6

const array = [1, 32, 2, undefined, 3];
const newArray = array.filter(arr => arr);
4

When using the highest voted answer above, first example, i was getting individual characters for string lengths greater than 1. Below is my solution for that problem.

var stringObject = ["", "some string yay", "", "", "Other string yay"];
stringObject = stringObject.filter(function(n){ return n.length > 0});

Instead of not returning if undefined, we return if length is greater than 0. Hope that helps somebody out there.

Returns

["some string yay", "Other string yay"]
1
  • +1 as this is very practical and exactly what I usually need working with string arrays, but be aware that this removes numbers (if they aren't in string form) since they don't have a .lenghth so, ["", "some string yay", "", "", 123, "Other string yay"].filter(function(n){ return n.length > 0}) //gives your same result removing 123 Replacing that function... with String, ironically, leaves numbers in but would give the same result in your given array.
    – aamarks
    Apr 24, 2018 at 15:45
3

I'm simply adding my voice to the above “call ES5's Array..filter() with a global constructor” golf-hack, but I suggest using Object instead of String, Boolean, or Number as suggested above.

Specifically, ES5's filter() already doesn't trigger for undefined elements within the array; so a function that universally returns true, which returns all elements filter() hits, will necessarily only return non-undefined elements:

> [1,,5,6,772,5,24,5,'abc',function(){},1,5,,3].filter(function(){return true})
[1, 5, 6, 772, 5, 24, 5, 'abc', function (){}, 1, 5, 3]

However, writing out ...(function(){return true;}) is longer than writing ...(Object); and the return-value of the Object constructor will be, under any circumstances, some sort of object. Unlike the primitive-boxing-constructors suggested above, no possible object-value is falsey, and thus in a boolean setting, Object is a short-hand for function(){return true}.

> [1,,5,6,772,5,24,5,'abc',function(){},1,5,,3].filter(Object)
[1, 5, 6, 772, 5, 24, 5, 'abc', function (){}, 1, 5, 3]
3
  • 1
    BEWARE: filter(String) and filter(Object) do not filter out null or numbers. Because a constructor is also a function you can pass String to filter i.e. someArray.filter(String); is actually equivalent to someArray.filter(function(x){ return String(x); });. If you want to remove all falsy values someArray.filter(Boolean); works to remove 0, -0, NaN, false, '', null, and undefined.
    – robocat
    Mar 12, 2013 at 1:07
  • 1
    Nice answer, although I wonder about the performance overhead of calling the Object constructor as opposed to the return true method. @robocat the OP asked for empty elements to be removed, not nulls.
    – Alnitak
    Feb 24, 2015 at 17:22
  • I prefer the shortest, and clearest, solution, except in tight-loops. Personal preference, I suppose. (= Feb 24, 2015 at 17:24
3
var data = [null, 1,2,3];
var r = data.filter(function(i){ return i != null; })

console.log(r) 

[1,2,3]

1
  • This is the obviously correct way to do it and should be at the top! May 11, 2017 at 8:22
3

Removing all empty elements

If an array contains empty Objects, Arrays, and Strings alongside other empty elements, we can remove them with:

const arr = [ [], ['not', 'empty'], {}, { key: 'value' }, 0, 1, null, 2, "", "here", " ", 3, undefined, 3, , , , , , 4, , 4, , 5, , 6, , , ]

let filtered = JSON.stringify(
  arr.filter((obj) => {
    return ![null, undefined, ''].includes(obj)
  }).filter((el) => {
    return typeof el != "object" || Object.keys(el).length > 0
  })
)

console.log(JSON.parse(filtered))

Simple compacting (removing empty elements from an array)

With ES6:

const arr = [0, 1, null, 2, "", 3, undefined, 3, , , , , , 4, , 4, , 5, , 6, , , ,]

let filtered = arr.filter((obj) => { return ![null, undefined].includes(obj) })

console.log(filtered)

With plain Javascript ->

var arr = [0, 1, null, 2, "", 3, undefined, 3, , , , , , 4, , 4, , 5, , 6, , , ,]

var filtered = arr.filter(function (obj) { return ![null, undefined].includes(obj) })

console.log(filtered)

2
  • Hey I just wanted to ask is there a way to remove null elements from a 2D/nested array in ES 6 ? Aug 4, 2020 at 13:10
  • Hi @Mob_Abominator, it can certainly be done, try this same logic by accessing the nested array.
    – Zalom
    Aug 6, 2020 at 9:25
3

You can use filter with index and in operator

let a = [1,,2,,,3];
let b = a.filter((x,i)=> i in a);

console.log({a,b});

5
  • presuming that the array contains index numbers...?
    – Magne
    Nov 29, 2020 at 17:34
  • @Magne in JS standard arrays indexes are numbers. The JS objects can contains other keys than numbers. JS arrays are also object and you can put key-value pair to it e.g let a=[]; a.abc=1 - but usually no body do it (It is quite exotic to do it - because instead arrays you can just use e.g. object {}). And when you use array in so exotic way then standard JS array methods like map, filter etc. will ignore such key-value pairs - my solution based on filter and ignore it too. It is quite obvious that OP ask about standard JS array (because he not mention about such exotic use-case) Nov 29, 2020 at 18:45
  • yeah, I was not referring to that, actually, but thanks for clarifying that too. I skimmed the top of developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… and confusingly believe the in operator returned the value in the array. So I thought it would only work if the values in the array was the same as the index numbers one wanted to filter for. But I see now in refers to the properties (like indexes), not values, of an array.
    – Magne
    Dec 1, 2020 at 13:23
  • SO didn't allow me to change my vote. :( If you make a small edit, then I can change my vote.
    – Magne
    Dec 1, 2020 at 17:34
  • Why is this necessary? .filter() will skip over empty slots in the array, so a.filter((x,i)=> i in a); will only check existing elements. And it's implicit that an existing element's index exists in the array. So, it simplifies to a.filter(() => true); few other answers here already show this approach.
    – VLAZ
    Apr 22, 2021 at 17:22
2

What about that:

js> [1,2,,3,,3,,,0,,,4,,4,,5,,6,,,,].filter(String).join(',')
1,2,3,3,0,4,4,5,6
0
2

Another way to do it is to take advantage of the length property of the array : pack the non-null items on the 'left' of the array, then reduce the length. It is an in-place algorithm -does not allocates memory, too bad for the garbage collector-, and it has very good best/average/worst case behaviour.

This solution, compared to others here, is between 2 to 50 times faster on Chrome, and 5 to 50 times faster on Firefox, as you might see here : http://jsperf.com/remove-null-items-from-array

The code below adds the non-enumerable 'removeNull' method to the Array, which returns 'this' for daisy-chaining :

var removeNull = function() {
    var nullCount = 0           ;
    var length    = this.length ;
    for (var i=0, len=this.length; i<len; i++) { if (!this[i]) {nullCount++} }
    // no item is null
    if (!nullCount) { return this}
    // all items are null
    if (nullCount == length) { this.length = 0; return this }
    // mix of null // non-null
    var idest=0, isrc=length-1;
    length -= nullCount ;                
    while (true) {
         // find a non null (source) slot on the right
         while (!this[isrc])  { isrc--; nullCount--; } 
         if    (!nullCount) { break }       // break if found all null
         // find one null slot on the left (destination)
         while ( this[idest]) { idest++  }  
         // perform copy
         this[idest]=this[isrc];
         if (!(--nullCount)) {break}
         idest++;  isrc --; 
    }
    this.length=length; 
    return this;
};  

Object.defineProperty(Array.prototype, 'removeNull', 
                { value : removeNull, writable : true, configurable : true } ) ;
4
  • Nice answer, although it would be good to see some test cases to show it in action!
    – Alnitak
    Feb 24, 2015 at 17:27
  • 2
    This answer is very fascinating but kind of reminds me of looking at a computer built in 1945 when I have a smartphone: arr.filter(e => e).
    – agm1984
    Sep 8, 2017 at 5:07
  • @agm1984 your smartphone isn't smart Jun 4, 2020 at 15:45
  • That may depend on your definition of smart--such as the verb, to cause a sharp stinging pain. This is relevant due to the physical pain if I weaponize my phone due to your comment.
    – agm1984
    Jun 4, 2020 at 15:57
2

None of the answers above works best for all types. The below solution will remove null, undefined, {} [], NaN and will preserve date string and what's best is it removes even from nested objects.

function removeNil(obj) {
    // recursively remove null and undefined from nested object too.
    return JSON.parse(JSON.stringify(obj), (k,v) => {
      if(v === null || v === '') return undefined;
      // convert date string to date.
      if (typeof v === "string" && /^\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d.\d\d\dZ$/.test(v))
        return new Date(v);
      // remove empty array and object.
      if(typeof v === 'object' && !Object.keys(v).length) return undefined;
      return v;
    });
  }

function removeNil(obj) {
    // recursively remove null and undefined from nested object too.
    return JSON.parse(JSON.stringify(obj), (k,v) => {
      if(v === null || v === '') return undefined;
      // convert date string to date.
      if (typeof v === "string" && /^\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d.\d\d\dZ$/.test(v))
        return new Date(v);
      // remove empty array and object.
      if(typeof v === 'object' && !Object.keys(v).length) return undefined;
      return v;
    });
  }
  
 const ob = {
  s: 'a',
  b: 43,
  countries: [ 'a', 'b', 'c' ],
  l: null,
  n: { ks: 'a', efe: null, ce: '' },
  d: new Date(),
  nan: NaN,
  k: undefined,
  emptyO: {},
  emptyArr: [],
 }
 
 const output = removeNil(ob);
 
 console.log(output);
 console.log('Tests: ', ob.countries.length, typeof(ob.d))

2

Simplest way

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

1

This works, I tested it in AppJet (you can copy-paste the code on its IDE and press "reload" to see it work, don't need to create an account)

/* appjet:version 0.1 */
function Joes_remove(someArray) {
    var newArray = [];
    var element;
    for( element in someArray){
        if(someArray[element]!=undefined ) {
            newArray.push(someArray[element]);
        }
    }
    return newArray;
}

var myArray2 = [1,2,,3,,3,,,0,,,4,,4,,5,,6,,,,];

print("Original array:", myArray2);
print("Clenased array:", Joes_remove(myArray2) );
/*
Returns: [1,2,3,3,0,4,4,5,6]
*/
1
  • 1
    This only appears to work "by accident", since it's the act of enumerating the keys via for ... in that actually causes the skipping of missing elements. The test for undefined only serves to remove real elements that are explicitly set to that value.
    – Alnitak
    Dec 29, 2015 at 11:28
1

'Misusing' the for ... in (object-member) loop. => Only truthy values appear in the body of the loop.

// --- Example ----------
var field = [];

field[0] = 'One';
field[1] = 1;
field[3] = true;
field[5] = 43.68;
field[7] = 'theLastElement';
// --- Example ----------

var originalLength;

// Store the length of the array.
originalLength = field.length;

for (var i in field) {
  // Attach the truthy values upon the end of the array. 
  field.push(field[i]);
}

// Delete the original range within the array so that
// only the new elements are preserved.
field.splice(0, originalLength);
1
  • the code is right, the comment is wrong. The act of using for ... in is what removes the undefined keys from the array, but you've actually no code here to otherwise accept only "truthy" values
    – Alnitak
    Jan 15, 2018 at 10:45

Not the answer you're looking for? Browse other questions tagged or ask your own question.