2018-03-03

How to Implement LINQ methods in JavaScript - Part 2

blogentry, programming, quicktip, series

banner

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.

  1. Part 1 〰️ Select, Aggregate, Where, OrderBy (Ascending, Descending)
  2. Part 2 〰️ Any, Distinct, Concat, SelectMany
  3. Part 3 〰️ Reverse, Zip, Min/Max
  4. Part 4 〰️ Union, Intersect, Except
  5. Part 5 〰️ Sum, Average, Count
  6. Part 6 〰️ First, Last, DefaultIfEmpty, Skip, Take
  7. Part 7 〰️ Empty, Repeat, Range
  8. Part 8 〰️ All, Contains, SequenceEqual

🔴 Overview

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.

C#

https://gist.github.com/dance2die/91eccd44af4248a07ca031c7cb97c1d5

JavaScript

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.

🔴 Examples

🔸 Any

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

Results

https://gist.github.com/dance2die/db8898560a8ba350b39495832dd02121

The only differences in JavaScript code are:

  1. some is used instead of Any
  2. Year is retrieved with a method call , getFullyear()
🔸 Distinct

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

Results

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

🔸 Concat

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

Results

https://gist.github.com/dance2die/9a7be90fb858994df776e047edb7a46c

Syntax is exactly the same 😄(except capitalization), so moving right along to the next example⤵️, SelectMany.

🔸 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

Results

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.

🔴 Closing Remark

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)