Thanga Ganapathy

Posted on Apr 14 • Edited on Apr 16

You Don’t Need JavaScript Native Methods!

#webdev #javascript #typescript #native

Welcome,

I'm sure you have come across articles like, You don't need Lodash, Underscore or Ramda, but this is the opposite.

When ES6 came, people got excited and started using native JS methods instead of using utility lib functions for various reasons like performance, size reduction, dependencies-free, etc.

Context

I recommend you check out this post, Introducing Our New JavaScript Standard Library, to learn more about the JS library @opentf/std, which we will be using throughout this article.

Why?

Let us explain why again you need to reverse it when using a standard library like @opentf/std.

Works across runtime environments (Browsers, Node.js, Deno, Bun, etc.)
Consistent & Concise function names
Helpful in functions composition (Pipe or Compose)
Supports some older browsers & Node.js >=16
Avoids polyfills

Examples

Let us compare some native methods vs @opentf/std functions.

1. Array.prototype.toReversed()

✅ Browsers: Baseline 2023
✅ Node.js: 20.0.0

import { reverse } from "@opentf/std";

const items = [1, 2, 3];

items.toReversed(); //=> [3, 2, 1]

reverse(items); //=> [3, 2, 1]

2. Array.prototype.toSorted()

✅ Browsers: Baseline 2023
✅ Node.js: 20.0.0

import { sort } from "@opentf/std";

const values = [1, 10, 21, 2];

values.toSorted((a, b) => b - a); //=> [ 21, 10, 2, 1 ]

sort(values, "desc"); //=> [ 21, 10, 2, 1 ]

3. Array.prototype.toSpliced()

✅ Browsers: Baseline 2023
✅ Node.js: 20.0.0

import { arrIns, arrRm, arrReplace } from "@opentf/std";

const months = ["Jan", "Mar", "Apr", "May"];

// Inserting an element at index 1
const months2 = months.toSpliced(1, 0, "Feb");
//=> ["Jan", "Feb", "Mar", "Apr", "May"]
const m2 = arrIns(months, 1, "Feb");
//=> ["Jan", "Feb", "Mar", "Apr", "May"]

// Deleting two elements starting from index 2
const months3 = months2.toSpliced(2, 2);
//=> ["Jan", "Feb", "May"]
const m3 = arrRm(m2, 2, 2);
//=> ["Jan", "Feb", "May"]

// Replacing one element at index 1 with two new elements
const months4 = months3.toSpliced(1, 1, "Feb", "Mar");
//=> ["Jan", "Feb", "Mar", "May"]
const m4 = arrReplace(m3, 1, 1, "Feb", "Mar");
//=> ["Jan", "Feb", "Mar", "May"]

4. Object.groupBy()

✅ Browsers: Baseline 2024
✅ Node.js: 21.0.0

import { groupBy } from "@opentf/std";

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
];

Object.groupBy(inventory, ({ type }) => type);
/*
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

groupBy(inventory, "type");
/*
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

5. Array Unique

import { uniq } from "@opentf/std";

const arr = [2, 1, 2];

[...new Set(arr)]; //=> [2, 1]

uniq(arr); //=> [2, 1]

6. Set.prototype.intersection()

Here we need Set intersection method for finding intersecting values in arrays.

⚠️ Browsers: Limited availability
❌ Node.js: Not available

import { intersection } from "@opentf/std";

const odds = [1, 3, 5, 7, 9];
const squares = [1, 4, 9];

const result = new Set(odds).intersection(new Set(squares));
[...result]; //=> [1, 9]

intersection([odds, squares]); //=> [1, 9]

7. Async/Await With Array.prototype.map()

import { aMap } from "@opentf/std";

const arr = [1, 2, 3, 4, 5];

function multiply(n, i) {
  return Promise.resolve(n * i);
}

async function main(params) {
  // Using Promise, runs in parallel
  let result = await Promise.all(arr.map((e, i) => multiply(e, i)));
  console.log(result); //=> [ 0, 2, 6, 12, 20 ]

  // Using for...of, runs in sequence
  result = [];
  let i = 0;
  for (const n of arr) {
    result.push(await multiply(n, i));
    i++;
  }
  console.log(result); //=> [ 0, 2, 6, 12, 20 ]

  // Using aMap, runs in sequence
  result = await aMap(arr, async (n, i) => await multiply(n, i));
  console.log(result); //=> [ 0, 2, 6, 12, 20 ]
}

main();

8. structuredClone() global function

✅ Browsers: Baseline 2022
✅ Node.js: 17.0.0

import { clone } from "@opentf/std";

const obj = {
  arr: [1, 2, 3],
  obj: {
    a: "abc",
    b: new Map([
      ["a", 1],
      ["b", 2],
    ]),
  },
  date: new Date(),
};

structuredClone(obj); // Returns a deeply clone value

clone(obj); // Returns a deeply clone value

9. Object.prototype.hasOwnProperty() & Object.hasOwn()

import { has } from "@opentf/std";

const foo = Object.create(null);
foo.prop = "exists";
foo.a = { b: 1 };

foo.hasOwnProperty("prop"); // Uncaught TypeError: foo.hasOwnProperty is not a function

Object.hasOwn(foo, "prop"); //=> true
Object.hasOwn(foo, "a.b"); //=> false

has(foo, "prop"); //=> true
has(foo, "a.b"); //=> true
has(foo, "a.c"); //=> false

10. Number.isFinite() & global isFinite()

import { isNum } from "@opentf/std";

Number.isFinite(Infinity); // false
Number.isFinite(NaN); // false
Number.isFinite(-Infinity); // false
Number.isFinite(0); // true
Number.isFinite(2e64); // true
Number.isFinite("0"); // false

isFinite("0"); // true; coerced to number 0

isNum(Infinity); // false
isNum(NaN); // false
isNum(-Infinity); // false
isNum(0); // true
isNum(2e64); // true
isNum("0"); // false
isNum("0", true); // true; coerced to number 0

Conclusion

In this exploration of JavaScript native methods and their alternatives, we’ve discovered the power of the @opentf/std library. By replacing native functions with well-tested alternatives, developers can achieve cleaner, more efficient code.

If you need to find out the performance of the lib, please check out these benchmarks.

Note:
Here we don't say you should stop using regular array methods like map, filter, or reduce, but the external library is not bad at all and will give you some benefits from using it.

As you continue your coding journey, consider adopting these alternatives and contributing to the open-source ecosystem.

Remember that collaboration and community involvement play a crucial role in advancing our collective knowledge.

Happy coding! 🚀

🙏 Thanks for reading.

DEV Community