I read on some forums that lodash chain should be avoided when possible for better performances and readability of code. So is there a way to use native javascript functions on collection to replace this code.
_(userCollection).chain()
.map('name')
pact()
.uniq()
.value();
Something like this bellow, but I' not sure that it gives any added value to write it like so
_.uniq(_pact(userCollection.map('name')))
I read on some forums that lodash chain should be avoided when possible for better performances and readability of code. So is there a way to use native javascript functions on collection to replace this code.
_(userCollection).chain()
.map('name')
.pact()
.uniq()
.value();
Something like this bellow, but I' not sure that it gives any added value to write it like so
_.uniq(_.pact(userCollection.map('name')))
Share
Improve this question
edited Jun 7, 2019 at 8:17
Ori Drori
193k32 gold badges238 silver badges229 bronze badges
asked Apr 12, 2018 at 14:20
kyserslickkyserslick
5911 gold badge10 silver badges28 bronze badges
3
-
1
Izaak Schroeder's article making this point is a good read. The short answer is to switch to lodash/fp, and use constructs like
flow
/flowRight
instead of the chain. – Scott Sauyet Commented Apr 12, 2018 at 14:28 -
1
It's a wonderful article but I'm unclear about the OP's statement "I read on some forums that lodash chain should be avoided when possible for better performances and readability of code." and it's relation to that article. The article talks about "how to get a 2x build-time performance increase and 1.5x bundle size decrease" which is not a "run time performance increase". The article also discusses why/how
.chain
promotes readability, which is why people use it. – gforce301 Commented Apr 12, 2018 at 14:43 -
@gforce301: The main point of the article is to show problems with
chain
and to promote an alternative that is at least as readable, perhaps more so:flow
. That's the same style promoted by Ramda (of which I'm an author) and which is mon in functional languages. – Scott Sauyet Commented Apr 13, 2018 at 12:54
2 Answers
Reset to default 7You can use _.flow()
to run a sequence of methods:
const { flow, partialRight: pr, map, pact, uniq } = _;
const getUniqeNames = flow(
pr(map, 'name'),
pact,
uniq
);
const arr = [{ name: 'John' }, {}, { name: 'Smith' }, {}, { name: 'John' }, { name: 'Smith' }]
const result = getUniqeNames(arr);
console.log(result);
<script src="https://cdnjs.cloudflare./ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
Flow works better with lodash/fp, since the methods are iteratee-first and data-last. This saves the need to partial right every method that requires an argument (pr(map, 'name')
in the lodash example).
const { flow, map, pact, uniq } = _;
const getUniqeNames = flow(
map('name'),
pact,
uniq
);
const arr = [{ name: 'John' }, {}, { name: 'Smith' }, {}, { name: 'John' }, { name: 'Smith' }]
const result = getUniqeNames(arr);
console.log(result);
<script src='https://cdn.jsdelivr/g/lodash@4(lodash.min.js+lodash.fp.min.js)'></script>
I believe this is what you're looking for. No lodash needed.
lodash.map
can be changed to Array.prototype.map
lodash.pact
can be changed to Array.prototype.filter
lodash.uniq
can be changed to a Set
constructor and optionally be converted to an Array again.
const users = [
{name: 'Me'},
{name: 'Someone Else'},
{name: 'Someone Else'},
{name: ''},
];
const uniqueNames = Array.from(new Set(users
.map(user => user.name)
.filter(name => name)));
console.log(uniqueNames);