Posted on Aug 2, 2020 • Edited on Aug 4, 2020

Remove null and undefined from array in JavaScript Code Snippet Series: Remove Junk from Array

#javascript #algorithms #performance #beginners

Quiz

There are two key areas to increase the performance of this code without losing robustness; can you spot them?

/** @func remove junk (non-value-based data) from an arr @param {*[]} a @return {*[]} */ export const removeNonVals = a => a.filter(v => { return v !== null && v !== undefined && !(v.constructor === String && v.trim() === "") && !(v.constructor === Object && Object.keys(v).length === 0) && !(Array.isArray(v) && v.length === 0) }); //@tests //@fixtureData const aDirty = [ "Casbah", "abcd", "", "p", "", "255", undefined, null, "", " ", [], {}, "[]", "{}" [[]], [["nested"]], NaN, Infinity, 0, -0, 5, -1, 1e30, BigInt(3145), n => n , , , , , ]; const aClean = removeNonVals(aDirty); console.log(aClean); /* @output [ 'Casbah', 'abcd', 'p', '255', 'Warsaw', '1855', '[]', [ [ 'nested' ] ], NaN, Infinity, 0, -0, 5, -1, 1e+30, 3145n, [Function (anonymous)] ] */ //@perftest timeInLoop("removeNonVals", 1e6, () => removeNonVals(aDirty)) /* removeNonVals: 1e+6: 2.601s */

TimeInLoop Source Code

https://gist.github.com/funfunction/91b5876a5f562e1e352aed0fcabc3858

Top comments (6)

pentacular • Aug 2 '20

I suggest that you start by defining a predicate to determine if thing is junk or not.

const isJunk = (thing) => ...;

And since you want to filter on the inverse.

const isNotJunk = (thing) => !isJunk(thing);

Now, you have something meaningful to use with things like filter.

stuff.filter(isNotJunk)

BeasTea • Aug 2 '20

Do not know why, I changed the condition from v.constructor to v typeof and get a better performance.

Functional Javascript • Aug 2 '20 • Edited

Good catch BeasTea,

I've replicated your findings.
It's impressively about 4 TIMES faster.

Interestingly, if you compare the v.constructor and v typeof independently, performance-wise they are effectively the same.

The reason I've preferred v.constructor over typeof is because of its robustness factor; the v typeof returns false for explicit instantiations of types, eg. "new String()"

So what's happening here is a compiler optimization for typeof; where the compiler fails to optimize for the v.constructor.

This would actually be a bug, or at least an optimization deficiency, in the V8 compiler.

Because of the vagaries of compilers, we must perf-test our code and hunt out performance bottlenecks.

//@perftest //a. typeof const isEmptyStr = s => typeof s === "string" && s.trim() === ""; timeInLoop("isEmptyStr", 100e6, () => isEmptyStr("asdf")) //isEmptyStr: 1e+8: 1.019s //b. s.constructor const isEmptyStr2 = s => s !== null && s !== undefined && s.constructor === String && s.trim() === ""; timeInLoop("isEmptyStr2", 100e6, () => isEmptyStr2("asdf")) ////isEmptyStr2: 1e+8: 1.038s