How to remove undefined and create a new array Javascript?

Question

I have the following array:

var imagesList = [undefined x 1, cars.jpg, undefined x 1, boats.jpg];

How do I filter out the undefined? so I can get it as follows:

var imagesShow = [cars.jpg, boats.jpg];

I have not found much documentation on getting rid of undefined in an array using javascript.

When you use "delete" method for Javascript arrays, you get undefined x1 — ticktock, Jun 25 '17 at 19:12

Nina Scholz · Accepted Answer · 2017-06-25T20:09:16.383

12

You could use Array#filter with Boolean as callback for truthy values.

var imagesList = [undefined, 'cars.jpg', undefined, 'boats.jpg'],
    imagesShow = imagesList.filter(Boolean);
    
console.log(imagesShow);

edited Jun 25 '17 at 20:09

answered Jun 25 '17 at 18:59

Nina Scholz

376,160
25
347
392

score 7 · Answer 2 · answered Jun 25 '17 at 18:58

7

Use Array#filter:

var imagesList = [undefined, 'cars.jpg', undefined, 'boats.jpg'];

var result = imagesList.filter(function(v) {
  return v !== undefined;
})

console.log(result);

answered Jun 25 '17 at 18:58

Ori Drori

183,571
29
224
209

score 3 · Answer 3 · answered Jun 25 '17 at 19:03

Try using the Array.filter function

var imagesShow = imagesList.filter(function (value) {
    return value != undefined;
};

Any array element that does not pass the check in the callback function above will be filtered out - in this case, if the element is undefined.

score 2 · Answer 4 · answered Jun 25 '17 at 18:59

2

Use Array.Filter

 var imagesList = [undefined, 'cars.jpg', undefined, 'boats.jpg'];
    var result = imagesList.filter(function( element ) {
       return element !== undefined;
    });
console.log(result);

answered Jun 25 '17 at 18:59

Sajeetharan

216,225
63
350
396

score 1 · Answer 5 · answered Jun 25 '17 at 19:14

1

Try Array.filter() method with ES6 Arrow function expression.

var imagesList = [undefined, "cars.jpg", undefined, "boats.jpg"];

var filteredList = imagesList.filter(item => { return item !== undefined });

console.log(filteredList);

answered Jun 25 '17 at 19:14

Debug Diva

26,058
13
70
123

score 0 · Answer 6 · edited Jun 20 '20 at 09:12

By displaying undefined x 2, your array clearly indicates that it's a sparse one which means you don't have any undefined items. You just don't have the keys to hold items to start with.

OK you may have and wish to keep proper void 0 or undefined items (in which case all of the above solutions will fail) or a numeric value 0 or null object item (in which case the accepted answer will fail).

In order to convert a sparse array to dense form the most efficient method would be a for in loop (or Object.keys()).

So for sparse array looping it's best to use

var res = [],
    a   = [];
a[1] = "cars.jpg";
a[5] = null;
a[999999] = "beauty.jpg";

// [undefined × 1, "cars.jpg", undefined × 3, null, undefined × 999993, "beauty.jpg"]

function dense(a){
  var r = [];
  for (i in a) r.push(a[i]);
  return r;
}

console.time("test");
res = dense(a);
console.timeEnd("test");
console.log(res);

Now lets compare the above code with an elegant filtering solution;

var res = [],
    a   = [];
a[1] = "cars.jpg";
a[5] = null;
a[999999] = "beauty.jpg";

// [undefined × 1, "cars.jpg", undefined × 3, null, undefined × 999993, "beauty.jpg"]

console.time("test");
res = a.filter(Boolean);
console.timeEnd("test");
console.log(res);

So as you see null is disappeared and it is slower since it checks all non existing keys. However with for in loop keeping the falsey values or not is totally under your control.

How to remove undefined and create a new array Javascript?

6 Answers6

Linked