How to Implement LINQ methods in JavaScript – Part 1

featured
February 25, 2018
💫 Originally posted here. Broken? Let me know ~

Photo by Simon Migaj on Unsplash
LINQ has been around since 2007. It made the code more readable as you specify what you do with a collection not how to process it.JavaScript is the de facto standard so you should be working with it often if you are doing web development.

I will share some “approximate” JavaScript equivalents below for those working primarily with .NET but want to use the existing skill in JavaScript.

Since each method do not match exactly one to one functionality wise, I will drop “approximate” hereafter.

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

Here are the examples I will show you in this article.

LINQ MethodsJavaScript EquivalentsGo to example
SelectmapSelect
AggregatereduceAggregate
WherefilterWhere
OrderBysortOrderBy - Ascending
OrderByDescendingsortOrderBy - Descending

I tried to match the code look similar to each other (as you can see the full source codes in LINQ & JavaScript on GitHub).

Here are the sample collections I will use to demo each method.

C#
JavaScript

🔴 Examples

🔸 Select

map is the equivalent of Select.

Syntax-wise, it’s basically one-to-one replacement from Select to map.
I said “equivalent” but I lied. While map returns a new array, Select has a side effect (it can update the iterating collection). Just remember this difference for the rest of JavaScript methods.

Results of calling SelectDemo and mapDemo.

🔸 Aggregate

reduce works the same way Aggregate does.

⚡ NOTE ⚡: While the initial value for the accumulator is passed as a first argument in Aggregate, it’s passed as the last one in reduce.

Results of calling AggregateDemo and reduceDemo.

🔸  Where

As you might have guessed it 😉, Where is for filtering records in a collection.  So the equivalent is…, 🎉 filter.

Another drop-in replacement of filter for Where. The code so far looked the same thanks to the Lamda expression syntax in both C# & JavaScript (ES6).

Results of calling WhereDemo and filterDemo.

🔸 OrderBy

Now here is where it gets tricky.

While there are two methods for ordering (ascending/descending) in LINQ, there is only one method in Javascript, sort, which can handle both scenarios.

sort is more roughly equivalent to .NET’s Array.Sort method which accepts an object instance of type IComparer<T>, which works the same as a callback in sort.

In the examples below, if the callback, which requires two arguments, returns a value less than 0, then the left value comes before right value, and vice versa. For 0, the order is not changed.

That’s why you can emulate OrderBy and OrderByDescending with only sort.

1. Ascending Order

In sortByAscendingDemo, if o1.quantity - o2.quantity returns a negative value, then o1 comes before o2 and vice versa. If quantity in both objects are equal (the difference is 0) then the order is not changed.

Results of calling OrderByDemo and sortByAscendingDemo.

2. Descending Order

In this JavaScript function, sortByDescendingDemo, two objects are switched from sortByAscendingDemo. To emulate the descending order, we simply switch o1 and o2, which will negate the return values from the callback.

Result of OrderByDescendingDemo and sortByDescendingDemo.

🔴 Closing Remark

In this article, I’ve shown examples of each LINQ method (approximate) equivalents in JavaScript.

Please feel free to leave a feedback on errors you might have spotted 😎.

The full source code and instructions on how to run them are on GitHub.