{"id":1608,"date":"2024-05-31T22:00:00","date_gmt":"2024-05-31T20:00:00","guid":{"rendered":"https:\/\/demo.sidekick.be\/itenium\/array-prototype\/"},"modified":"2025-11-28T13:31:45","modified_gmt":"2025-11-28T12:31:45","slug":"array-prototype","status":"publish","type":"post","link":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/array-prototype\/","title":{"rendered":"Array.prototype for .NET developers"},"content":{"rendered":"

Whenever you want to write a for<\/code> to loop over an array, the Array.prototype<\/code> functions probably allow you to achieve the same result but in more functional and succinct manner.<\/p>\n

Do note that the deferred execution we know from Linq does not apply to Array.prototype<\/code>!<\/p>\n

Comparison Table<\/h1>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
C#<\/th>\nJavaScript<\/th>\nMDN Link<\/th>\n<\/tr>\n<\/thead>\n
Select()<\/td>\nmap<\/b>((cur, index, array): any)<\/td>\nmap<\/a><\/td>\n<\/tr>\n
Where()<\/td>\nfilter<\/b>((cur): boolean)<\/td>\nfilter<\/a><\/td>\n<\/tr>\n
Contains()<\/td>\nincludes<\/b>(value, fromIndex)<\/td>\nincludes<\/a><\/td>\n<\/tr>\n
FirstOrDefault()<\/td>\nfind<\/b>((cur): boolean): undefined | any<\/td>\nfind<\/a> \/ findIndex<\/a><\/td>\n<\/tr>\n
LastOrDefault()<\/td>\nfindLast<\/b>((cur): boolean): undefined | any<\/td>\nfindLast<\/a> \/ findLastIndex<\/a><\/td>\n<\/tr>\n
All()<\/td>\nevery<\/b>((cur): boolean): boolean<\/td>\nevery<\/a><\/td>\n<\/tr>\n
Any()<\/td>\nsome<\/b>((cur): boolean): boolean<\/td>\nsome<\/a><\/td>\n<\/tr>\n
Concat()<\/td>\nconcat<\/b>(arr: any[]): any[]<\/td>\nconcat<\/a><\/td>\n<\/tr>\n
Skip(start).Take(start – end)<\/td>\nslice<\/b>(start = 0, end = length-1)<\/td>\nslice<\/a><\/td>\n<\/tr>\n
string.Join()<\/td>\njoin<\/b>(separator = \u2018,\u2019)<\/td>\njoin<\/a><\/td>\n<\/tr>\n
Array.IndexOf()<\/td>\nfindIndex<\/b>((cur): boolean): -1 | number<\/td>\nfindIndex<\/a><\/td>\n<\/tr>\n
ElementAt()<\/td>\nat<\/b>(index) (accepts negative indexes)<\/td>\nat<\/a><\/td>\n<\/tr>\n
Count()<\/td>\nlength<\/b>: number<\/td>\nlength<\/a><\/td>\n<\/tr>\n
SelectMany()<\/td>\nflat<\/b>(levels = 1) \/ flatMap<\/b>(fn)<\/td>\nflat<\/a> \/ flatMap<\/a><\/td>\n<\/tr>\n
GroupBy()<\/td>\nObject.groupBy<\/b>(arr, groupFn)<\/td>\ngroupBy<\/a><\/td>\n<\/tr>\n
Distinct()<\/td>\nfilter<\/b>((el, i, arr) => arr.indexOf(el) === i)<\/td>\n<\/td>\n<\/tr>\n
Extension method<\/td>\nforEach((cur): void): void<\/td>\nforEach<\/a><\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/td>\n<\/tr>\n
Mutating in JS<\/strong><\/td>\nThese are in place<\/a> operations<\/td>\n<\/td>\n<\/tr>\n
OrderBy()<\/td>\nsort<\/b>((a, b): number)<\/td>\nsort<\/a> \/ toSorted<\/a><\/td>\n<\/tr>\n
Reverse()<\/td>\nreverse()<\/td>\nreverse<\/a> \/ toReversed<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Commonly used methods<\/h1>\n

Select = map<\/h2>\n
\/\/ C#\nvar result = enumerable.Select(x => x);\n\n\/\/ JavaScript\nlet result = array.map(x => x);\n\n\/\/ Using spread to avoid mutation\nconst input = [{k: 1, v: true}, {k: 2, v: false}];\nconst result = input.map(x => ({...x, v: !x.v}))\n<\/code><\/pre>\n
When mapping to an object without code block, you need to wrap your object between extra parentheses like<\/p>\n
[0, 1].map(x => ({value: x}));\n\n\/\/ Because without the extra parentheses\n[0, 1].map(x => {value: x});\n\/\/ --> [undefined, undefined]\n\n\/\/ it is the same as writing:\n[0, 1].map(x => {\n  value: x; \/\/ No error, because JavaScript?\n  return undefined;\n});\n<\/code><\/pre>\n
Where, Distinct = filter<\/h2>\n
Where<\/code> and filter<\/code><\/a> behave pretty much exactly alike. Linqs Distinct<\/code> we\u2019ll need to implement ourselves.<\/p>\n
const input = [0, 0, 1, 5, 5];\n\/\/ Equals true when the first occurrence of the value is the current value\nconst result = input.filter((element, index, array) => array.indexOf(element) === index);\n\/\/ Or: [...new Set(input)];\nexpect(result).toEqual([0, 1, 5]);\n<\/code><\/pre>\n
Aggregate, GroupBy, \u2026 = reduce<\/h2>\n
Linq has Sum, Min, Max, Average, GroupBy, etc. While JavaScript doesn\u2019t have them, they can all be achieved trivially with reduce<\/code><\/a><\/p>\n
<\/p>\n
Sum, Min, Max, Average<\/strong>:<\/p>\n
const input = [0, 1];\nconst sum = input.reduce((total, cur) => total + cur, 0);\nconst average = sum \/ input.length;\nconst min = Math.min.apply(Math, input); \/\/ Old school\nconst min = Math.min(...input); \/\/ Using spread\n<\/code><\/pre>\n
Aggregate, GroupBy<\/strong>:<\/p>\n
const input = [0, 1, 2, 3];\n\nconst result = input.reduce((acc, cur) => {\n  if (cur % 2 === 0) {\n    acc.even.push(cur);\n  } else {\n    acc.odd.push(cur);\n  }\n  return acc;\n}, {even: [], odd: []});\n\nexpect(result).toEqual({even: [0, 2], odd: [1, 3]});\n<\/code><\/pre>\n
Since 2024, JS has a dedicated Object.groupBy<\/code>:<\/p>\n
const socks = [\n  { name: 'JavaScript', type: 'lang' },\n  { name: 'Angular', type: 'package' },\n  { name: 'React', type: 'package' },\n];\n\nconst grouped = Object.groupBy(socks, sock => sock.type);\n\nexpect(grouped).toEqual({\n  lang: [{ name: 'JavaScript', type: 'lang' }],\n  package: [\n    { name: 'Angular', type: 'package' },\n    { name: 'React', type: 'package' },\n  ]\n})\n<\/code><\/pre>\n
slice<\/h2>\n
Linq has First, Last, Skip, SkipLast, SkipWhile, Take, TakeLast, TakeWhile. JavaScript has slice<\/code><\/a>.<\/p>\n
\/\/ Shallow copy\nconst input = [0, 1, 2, 3];\nexpect(input.slice()).toEqual([...input]);\n\n\/\/ Signature\nslice(startIndex = 0, endIndex = length-1);\n<\/code><\/pre>\n
C# Ranges<\/h3>\n
var array = new[] { 1, 2, 3, 4, 5 };\n\nAssert.Equal(new[] { 3, 4 }, array[2..^1]);\nAssert.Equal(new[] { 1, 2 }, array[..^3]);\nAssert.Equal(new[] { 3, 4, 5 }, array[2..]);\nAssert.Equal(new[] { 1, 2, 3, 4, 5 }, array[..]);\n<\/code><\/pre>\n
with<\/h3>\n
Since 2023, there is also with<\/code><\/a> which returns a new array where one item is replaced with a new value by index.<\/p>\n
const newArr = arr.with(index, newValue);\n<\/code><\/pre>\n
Mutations<\/h1>\n
These functions operate in place.
 Since ECMAScript 2023, some have non-mutating alternatives!<\/p>\n
OrderBy = sort and toSorted<\/h2>\n