2018-03-03
How to Implement LINQ methods in JavaScript - Part 2
blogentry, programming, quicktip, series
blogentry, programming, quicktip, series
Photo by Daniil Silantev on Unsplash
In the previous post, I've covered most used LINQ methods and implemented them in JavaScript.
Here are the methods covered so far.
In this post, I will cover following methods.
[table id=2 /]
And I will try to stick to using Vanilla JS.
The sample collection used in this part is the same as the previous one but I will list them again.
https://gist.github.com/dance2die/91eccd44af4248a07ca031c7cb97c1d5
https://gist.github.com/dance2die/8ddcdfd02c4dc710d16cc71875a748c5
⚡ NOTE ⚡ : In all of examples, WriteLine is used for printing result in console in both C# & JavaScript codes to make the code difference a bit easier to see.
In C#, it's statically imported as using static System.Console. In JavaScript, it's an alias of console.log declared as const WriteLine = console.log.
some is equivalent to Any in LINQ. They do the same thing and both LINQ & JavaScript might as well have an alias to both "some" and "any" as TSQL does.
https://gist.github.com/dance2die/3e2e638f7c520ef91ef4b35b5e62b142
https://gist.github.com/dance2die/3dbc0bbddf1c096dd4b4ca69187787d2
https://gist.github.com/dance2die/db8898560a8ba350b39495832dd02121
The only differences in JavaScript code are:
There are some equivalent methods in jQuery (unique) or in Lodash (uniqby) but I will show you two implementations in Vanilla JS.
https://gist.github.com/dance2die/faaecb5c7983a1d10d7baf34d9029193
https://gist.github.com/dance2die/d231f73111e8ba2ae50e0cf0d98ed563
The results for all three methods are the same.
https://gist.github.com/dance2die/a68300269427c5c5407be7a09327a66d
distinctDemo1 in JavaScript code uses filter to filter out records that does not show up as the first element in the list (Please refer to this StackOverflow question for more information for implementation details).
distinctDemo2 uses a Set object (sets by definition stores only unique values and is available from ES6) to store unique values in it, and uses a spread syntax to convert the Set object instance to an array (You could use another new ES6 addition, Array.from if you think it's not readable enough, as shown below).
https://gist.github.com/dance2die/815fe01e43ab0bc048f341d150475330
Thankfully 🙏, JavaScript has a method named concat, which does what LINQ version does. ⚠️ WARNING: Beware of super contrived example used in this demo.
https://gist.github.com/dance2die/99bdf777a871ab15046dd58197863aba
https://gist.github.com/dance2die/ba57bf94913338798cc4769647efc021
https://gist.github.com/dance2die/9a7be90fb858994df776e047edb7a46c
Syntax is exactly the same 😄(except capitalization), so moving right along to the next example⤵️, SelectMany.
This example does exactly the same thing (and just as contrived) as Concat does but wanted to share a different way you can implement it in JavaScript.
https://gist.github.com/dance2die/0250f31df2bc300ae0aea6cb4e6cfdb1
https://gist.github.com/dance2die/c75ae463ad1f7b2fa0eee1f39d813e85
As you can see, the result is exactly the same as the one in Concat demo.
https://gist.github.com/dance2die/ff83b11a362f9e11a278cf55b903f11b
SelectMany basically flattens multiple collections into a single one, while Spread syntax in ES6 is used to flatten all arrays into a single one.
I have selected frequently used LINQ methods (at least for me that is) and shown you the JavaScript implementations. I hope you found the mapping between LINQ to JavaScript code useful. Please let me know should you find any errors or improvements I can make to the codes.
The full source code and instructions on how to run them are on GitHub. (Same as the first part as demos are added onto existing source code)