You can check out more of my tutorials and articles on my main blog. Enjoy the article!
While Lodash may have become a staple in any JavaScript de...
For further actions, you may consider blocking this person and/or reporting abuse
Extremely quick and dirty homebrew of a flatten function:
EDITED: Return a fresh array instead of modifying flatArray. Clearer, less prone to nitpickery.
It's a little confusing to simultaneously use
reduce
andpush
. Usereduce
when you're actually computing a new value, use afor of
loop when you're mutating things in a loop.Your first example chokes on
[1,[2,3,[4]],5,[6,7]]
, throwing an error. Worse, on['yo',['dawg','I',['herd']],'you',['like','arrays']]
it breaks in a number of interesting ways, spreading some strings, failing to spread some arrays.It is an implementation of the join function for arrays, and works with arrays of arrays, not arrays of mixed objects.
If you need it to work with mixed objects you'll need a recursive call (or
ap
+pure
):Anyway, the point is to avoid mutation in the
reduce
, whatever it is you may be implementing.At this point it honestly seems like you're just trying to score points against me, in some way. I am disinterested in continuing that.
Sorry to hear you feel that way. I was just suggesting that using mutation in
reduce
is confusing, didn't mean for it to turn into this long-running back and forth.The array I am pushing to is the accumulator of the reduce call, though. I'm pushing the elements of each array found, once flattened.
It works like a classic head/tail recursion, if an element is an array it first gets flattened itself, then it's elements are pushed onto the accumulator.
That's fine, but as I said, it's confusing to use
reduce
and mutation simultaneously. You're passing[]
as a seed value, so the only thing that got mutated was that seed array. If you'd usedarray.reduce((flatArray, item) => ...)
without the seed value (which would be fine but for the mutation), it would end up filling the first item in the input array you were passed.In general it's easier on the fallible human developer to make mutation look like mutation and pure computation look like pure computation.
The only way it would matter here is if you somehow changed the function to make
flatArray
available while the function was running. I'm not even sure how you'd do that. But I do want to point your attention to the words, used above: "quick and dirty"...Yeah, I was thinking about posting code snippets that replace Lodash but then I quickly realized that Lodash is SUPER lightweight to begin with and can do this stuff much better than any snippet I can write. Plus docs/tests/code coverage/edge case solutions are part of using Lodash.
You can check it out here and for convenience, here's a copy:
I admit I hesitate to call that bit lightweight, at least in terms of reading and understanding it.😀
Your point re. testing and edge cases and so forth is well seen. My example was mainly to give an alternative where a native function does not currently exist.
Lightweight in size! Especially if you import only what you need. eg:
Reading it isn't too bad but their looping is bizarre to me. It's done for memory/speed use but counting down from a number in a while loop instead of doing a for loop baffles me but I understand they have reasons for it.
Quick way to flatten 1 deep
const feed = [].concat(...sourceArray)
i do the same ;)
wow. That's awesome! It took me a few to figure out how this works.
Great article! Whenever I feel like I need to add Lodash to a new project I try to solve my immediate needs with plain Javascript first. Turns out most of the times that's enough.
It's an awesome library, but I like to keep my projects as simple as possible.
You can also use mutlple sources in the RHS of a spead expression to get a merge
do you mean like this?
My only issue with it is that it doesn't recursively merge. It's fine for flat objects. I use this pattern pretty often at work, sometimes in conjunction with lodash.
For instance, I use Objection for ORM and it has "computed properties" that need to be accessed in order to get the value, they're not serialized when doing
toJSON
so I often resort to:EDIT Totally forgot, this is a pretty common pattern in Redux!
Completely agree. Its shallow like Object.assign. I was just say is an alternative to it really.
measurethat.net/Benchmarks/Show/29...