How to manipulate an array, eliminating the empty items?

Question

I have an array which has some empty items.

const array = ["a","","c","","e","f","g"]

I am trying to eliminate empty items and leave only the items having string. I mean manipulating the array as:

array = ["a","c","e","f","g"]

There are many alternative like array.map, array.filter, array.slice, array.splice.. What is the most costless and recommended way of doing this?

What have you tried? Have you tried using a JS benchmarking tool? If you don't know how to find one, what methods have you tried? Your whole approach seems extremely lazy, given the wealth of resources available on the internet. — Neek, Dec 21 '22 at 17:31
Filter probably is the best for readability and run time. Using slice could be fast, but would take a lot of extra coding, and using splice in a loop is inefficient. — General Grievance, Dec 21 '22 at 17:49
@GeneralGrievance thanks, my head is more clear now. I am selecting the filter post as correct. Best regards! — JeremyFc, Dec 21 '22 at 18:50
How do you determine if an array element is 'empty'? I know your example shows empty strings, but often in the real world we find NULL values, unexpected objects, zeroes (due to JS being weird sometimes), etc. especially if your data is coming from a third party source. I just wanted to remind you that something like `element !== ''` as in your Answer below may fail in some cases that you could have otherwise guarded against. In JS a simple `!!` can be useful as it converts a lot of these cases to false, but watch out for `!!"0" == true` being `true` and `!!0 == true` being `false`. — Neek, Dec 22 '22 at 07:54

score 1 · Accepted Answer · answered Dec 21 '22 at 17:26

1

As far as I know most cost effective way is to use the array filter method:

const array = ["a","","c","","e","f","g"];

const results = array.filter(element => {
  return element !== '';
});

console.log(results);

answered Dec 21 '22 at 17:26

I appreciate your response @JeremyFc and @General_Grievance (not sure how to quote your name). How about `array.filter(i => !!i)` The bang bang operator `!!` will convert each element into a boolean usign JS's weird rules, which may work in your data, it may not. For example, it would fail in the case where your array contains a Number `0` which you may care about. `array = ["a","","c","","e","f",0]; array.filter(i => !!i) results in: ['a', 'c', 'e', 'f']` Apologies if the formatting here is awful, it's a Comment so I cannot preview. – Neek Dec 22 '22 at 07:35
@JeremyFc an actual test of the two approaches: https://jsbench.me/m6lbyrvtge/1 Apparently mine is almost 40% slower, which I find quite surprising. Lots of weirdness in the JS engine :) – Neek Dec 22 '22 at 07:39
1

@JeremyFc Another option I ran into https://stackoverflow.com/questions/44610543/how-do-you-remove-falsy-values-with-splice is also slower than your original solution: https://jsbench.me/m6lbyrvtge/2 Presumably due to lots of array allocation going on during execution. Your solution is nice and simple. Allocate one array, populate it only with elements that pass the test. It will reallocate as it grows, so how big is your data, and would it help to preallocate a larger array accordingly? I feel like we're optimizing unnecessarily here, though :) – Neek Dec 22 '22 at 08:00

1 Answers1