Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save a-kyselova/b8fc3049d9765ed4e8383a5a48f0f162 to your computer and use it in GitHub Desktop.
Save a-kyselova/b8fc3049d9765ed4e8383a5a48f0f162 to your computer and use it in GitHub Desktop.
JS

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

  1. Use ESM yourself. (preferred)
    Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
  2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
  3. Stay on the existing version of the package until you can move to ESM.

You also need to make sure you're on the latest minor version of Node.js. At minimum Node.js 16.

FAQ

How can I move my CommonJS project to ESM?

  • Add "type": "module" to your package.json.
  • Replace "main": "index.js" with "exports": "./index.js" in your package.json.
  • Update the "engines" field in package.json to Node.js 16: "node": ">=16".
  • Remove 'use strict'; from all JavaScript files.
  • Replace all require()/module.export with import/export.
  • Use only full relative file paths for imports: import x from '.';import x from './index.js';.
  • If you have a TypeScript type definition (for example, index.d.ts), update it to use ESM imports/exports.
  • Use the node: protocol for Node.js built-in imports.

Sidenote: If you're looking for guidance on how to add types to your JavaScript package, check out my guide.

Can I import ESM packages in my TypeScript project?

Yes, but you need to convert your project to output ESM. See below.

How can I make my TypeScript project output ESM?

Read the official ESM guide.

Quick steps:

  • Make sure you are using TypeScript 4.7 or later.
  • Add "type": "module" to your package.json.
  • Replace "main": "index.js" with "exports": "./index.js" in your package.json.
  • Update the "engines" field in package.json to Node.js 16: "node": ">=16".
  • Add "module": "node16", "moduleResolution": "node16" to your tsconfig.json. (Example)
  • Use only full relative file paths for imports: import x from '.';import x from './index.js';.
  • Remove namespace usage and use export instead.
  • Use the node: protocol for Node.js built-in imports.
  • You must use a .js extension in relative imports even though you're importing .ts files.

If you use ts-node, follow this guide. Example config.

How can I import ESM in Electron?

Electron doesn't yet support ESM natively.

You have the following options:

  1. Stay on the previous version of the package in question.
  2. Bundle your dependencies with Webpack into a CommonJS bundle.
  3. Use the esm package.

I'm having problems with ESM and Webpack

The problem is either Webpack or your Webpack configuration. First, ensure you are on the latest version of Webpack. Please don't open an issue on my repo. Try asking on Stack Overflow or open an issue the Webpack repo.

I'm having problems with ESM and Next.js

Upgrade to Next.js 12 which has full ESM support.

I'm having problems with ESM and Jest

Read this first. The problem is either Jest (#9771) or your Jest configuration. First, ensure you are on the latest version of Jest. Please don't open an issue on my repo. Try asking on Stack Overflow or open an issue the Jest repo.

I'm having problems with ESM and TypeScript

If you have decided to make your project ESM ("type": "module" in your package.json), make sure you have "module": "node16" in your tsconfig.json and that all your import statements to local files use the .js extension, not .ts or no extension.

I'm having problems with ESM and ts-node

Follow this guide and ensure you are on the latest version of ts-node.

Example config.

I'm having problems with ESM and Create React App

Create React App doesn't yet fully support ESM. I would recommend opening an issue on their repo with the problem you have encountered. One known issue is #10933.

How can I use TypeScript with AVA for an ESM project?

Follow this guide.

How can I make sure I don't accidentally use CommonJS-specific conventions?

We got you covered with this ESLint rule. You should also use this rule.

What do I use instead of __dirname and __filename?

import {fileURLToPath} from 'node:url';
import path from 'node:path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(fileURLToPath(import.meta.url));

However, in most cases, this is better:

import {fileURLToPath} from 'node:url';

const foo = fileURLToPath(new URL('foo.js', import.meta.url));

And many Node.js APIs accept URL directly, so you can just do this:

const foo = new URL('foo.js', import.meta.url);

How can I import a module and bypass the cache for testing?

There's no good way to do this yet. Not until we get ESM loader hooks. For now, this snippet can be useful:

const importFresh = async modulePath => import(`${modulePath}?x=${new Date()}`);

const chalk = (await importFresh('chalk')).default;

Note: This will cause memory leaks, so only use it for testing, not in production. Also, it will only reload the imported module, not its dependencies.

How can I import JSON?

JavaScript Modules will eventually get native support for JSON, but for now, you can do this:

import fs from 'node:fs/promises';

const packageJson = JSON.parse(await fs.readFile('package.json'));

When should I use a default export or named exports?

My general rule is that if something exports a single main thing, it should be a default export.

Keep in mind that you can combine a default export with named exports when it makes sense:

import readJson, {JSONError} from 'read-json';

Here, we had exported the main thing readJson, but we also exported an error as a named export.

Asynchronous and synchronous API

If your package has both an asynchronous and synchronous main API, I would recommend using named exports:

import {readJson, readJsonSync} from 'read-json';

This makes it clear to the reader that the package exports multiple main APIs. We also follow the Node.js convention of suffixing the synchronous API with Sync.

Readable named exports

I have noticed a bad pattern of packages using overly generic names for named exports:

import {parse} from 'parse-json';

This forces the consumer to either accept the ambiguous name (which might cause naming conflicts) or rename it:

import {parse as parseJson} from 'parse-json';

Instead, make it easy for the user:

import {parseJson} from 'parse-json';

Examples

With ESM, I now prefer descriptive named exports more often than a namespace default export:

CommonJS (before):

const isStream = require('is-stream');

isStream.writable();

ESM (now):

import {isWritableStream} from 'is-stream';

isWritableStream();
/*
JavaScript: Learn JavaScript in Y Minutes
Reference URL: https: //learnxinyminutes.com/docs/javascript/
JavaScript was created by Netscape’s Brendan Eich in 1995. It was originally intended as a
simpler scripting language for websites, complementing the use of Java for more complex web
applications, but its tight integration with Web pages and built-in support in browsers has
caused it to become far more common than Java in web frontends.
JavaScript isn’t just limited to web browsers, though: Node.js, a project that provides a
standalone runtime for Google Chrome’s V8 JavaScript engine, is becoming more and more popular.
JavaScript has a C-like syntax, so if you’ve used languages like C or Java, a lot of the basic
syntax will already be familiar. Despite this, and despite the similarity in name, JavaScript’s
object model is significantly different to Java’s.
*/
// Single-line comments start with two slashes.
/* Multiline comments start with slash-star,
and end with star-slash */
// Statements can be terminated by ;
doStuff();
// ... but they don't have to be, as semicolons are automatically inserted
// wherever there's a newline, except in certain cases.
doStuff()
// Because those cases can cause unexpected results, we'll keep on using
// semicolons in this guide.
///////////////////////////////////
// 1. Numbers, Strings and Operators
// JavaScript has one number type (which is a 64-bit IEEE 754 double).
// Doubles have a 52-bit mantissa, which is enough to store integers
// up to about 9✕10¹⁵ precisely.
3; // = 3
1.5; // = 1.5
// Some basic arithmetic works as you'd expect.
1 + 1; // = 2
0.1 + 0.2; // = 0.30000000000000004
8 - 1; // = 7
10 * 2; // = 20
35 / 5; // = 7
// Including uneven division.
5 / 2; // = 2.5
// And modulo division.
10 % 2; // = 0
30 % 4; // = 2
18.5 % 7; // = 4.5
// Bitwise operations also work; when you perform a bitwise operation your float
// is converted to a signed int *up to* 32 bits.
1 << 2; // = 4
// Precedence is enforced with parentheses.
(1 + 3) * 2; // = 8
// There are three special not-a-real-number values:
Infinity; // result of e.g. 1/0
-Infinity; // result of e.g. -1/0
NaN; // result of e.g. 0/0, stands for 'Not a Number'
// There's also a boolean type.
true;
false;
// Strings are created with ' or ".
'abc';
"Hello, world";
// Negation uses the ! symbol
!true; // = false
!false; // = true
// Equality is ===
1 === 1; // = true
2 === 1; // = false
// Inequality is !==
1 !== 1; // = false
2 !== 1; // = true
// More comparisons
1 < 10; // = true
1 > 10; // = false
2 <= 2; // = true
2 >= 2; // = true
// Strings are concatenated with +
"Hello " + "world!"; // = "Hello world!"
// ... which works with more than just strings
"1, 2, " + 3; // = "1, 2, 3"
"Hello " + ["world", "!"]; // = "Hello world,!"
// and are compared with < and >
"a" < "b"; // = true
// Type coercion is performed for comparisons with double equals...
"5" == 5; // = true
null == undefined; // = true
// ...unless you use ===
"5" === 5; // = false
null === undefined; // = false
// ...which can result in some weird behaviour...
13 + !0; // 14
"13" + !0; // '13true'
// You can access characters in a string with `charAt`
"This is a string".charAt(0); // = 'T'
// ...or use `substring` to get larger pieces.
"Hello world".substring(0, 5); // = "Hello"
// `length` is a property, so don't use ().
"Hello".length; // = 5
// There's also `null` and `undefined`.
null; // used to indicate a deliberate non-value
undefined; // used to indicate a value is not currently present (although
// `undefined` is actually a value itself)
// false, null, undefined, NaN, 0 and "" are falsy; everything else is truthy.
// Note that 0 is falsy and "0" is truthy, even though 0 == "0".
///////////////////////////////////
// 2. Variables, Arrays and Objects
// Variables are declared with the `var` keyword. JavaScript is dynamically
// typed, so you don't need to specify type. Assignment uses a single `=`
// character.
var someVar = 5;
// If you leave the var keyword off, you won't get an error...
someOtherVar = 10;
// ...but your variable will be created in the global scope, not in the scope
// you defined it in.
// Variables declared without being assigned to are set to undefined.
var someThirdVar; // = undefined
// If you want to declare a couple of variables, then you could use a comma
// separator
var someFourthVar = 2, someFifthVar = 4;
// There's shorthand for performing math operations on variables:
someVar += 5; // equivalent to someVar = someVar + 5; someVar is 10 now
someVar *= 10; // now someVar is 100
// and an even-shorter-hand for adding or subtracting 1
someVar++; // now someVar is 101
someVar--; // back to 100
// Arrays are ordered lists of values, of any type.
var myArray = ["Hello", 45, true];
// Their members can be accessed using the square-brackets subscript syntax.
// Array indices start at zero.
myArray[1]; // = 45
// Arrays are mutable and of variable length.
myArray.push("World");
myArray.length; // = 4
// Add/Modify at specific index
myArray[3] = "Hello";
// Add and remove element from front or back end of an array
myArray.unshift(3); // Add as the first element
someVar = myArray.shift(); // Remove first element and return it
myArray.push(3); // Add as the last element
someVar = myArray.pop(); // Remove last element and return it
// Join all elements of an array with semicolon
var myArray0 = [32,false,"js",12,56,90];
myArray0.join(";"); // = "32;false;js;12;56;90"
// Get subarray of elements from index 1 (include) to 4 (exclude)
myArray0.slice(1,4); // = [false,"js",12]
// Remove 4 elements starting from index 2, and insert there strings
// "hi","wr" and "ld"; return removed subarray
myArray0.splice(2,4,"hi","wr","ld"); // = ["js",12,56,90]
// myArray0 === [32,false,"hi","wr","ld"]
// JavaScript's objects are equivalent to "dictionaries" or "maps" in other
// languages: an unordered collection of key-value pairs.
var myObj = {key1: "Hello", key2: "World"};
// Keys are strings, but quotes aren't required if they're a valid
// JavaScript identifier. Values can be any type.
var myObj = {myKey: "myValue", "my other key": 4};
// Object attributes can also be accessed using the subscript syntax,
myObj["my other key"]; // = 4
// ... or using the dot syntax, provided the key is a valid identifier.
myObj.myKey; // = "myValue"
// Objects are mutable; values can be changed and new keys added.
myObj.myThirdKey = true;
// If you try to access a value that's not yet set, you'll get undefined.
myObj.myFourthKey; // = undefined
///////////////////////////////////
// 3. Logic and Control Structures
// The `if` structure works as you'd expect.
var count = 1;
if (count == 3){
// evaluated if count is 3
} else if (count == 4){
// evaluated if count is 4
} else {
// evaluated if it's not either 3 or 4
}
// As does `while`.
while (true){
// An infinite loop!
}
// Do-while loops are like while loops, except they always run at least once.
var input;
do {
input = getInput();
} while (!isValid(input));
// The `for` loop is the same as C and Java:
// initialization; continue condition; iteration.
for (var i = 0; i < 5; i++){
// will run 5 times
}
// Breaking out of labeled loops is similar to Java
outer:
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
if (i == 5 && j ==5) {
break outer;
// breaks out of outer loop instead of only the inner one
}
}
}
// The for/in statement allows iteration over properties of an object.
var description = "";
var person = {fname:"Paul", lname:"Ken", age:18};
for (var x in person){
description += person[x] + " ";
} // description = 'Paul Ken 18 '
// The for/of statement allows iteration over iterable objects (including the built-in String,
// Array, e.g. the Array-like arguments or NodeList objects, TypedArray, Map and Set,
// and user-defined iterables).
var myPets = "";
var pets = ["cat", "dog", "hamster", "hedgehog"];
for (var pet of pets){
myPets += pet + " ";
} // myPets = 'cat dog hamster hedgehog '
// && is logical and, || is logical or
if (house.size == "big" && house.colour == "blue"){
house.contains = "bear";
}
if (colour == "red" || colour == "blue"){
// colour is either red or blue
}
// && and || "short circuit", which is useful for setting default values.
var name = otherName || "default";
// The `switch` statement checks for equality with `===`.
// Use 'break' after each case
// or the cases after the correct one will be executed too.
grade = 'B';
switch (grade) {
case 'A':
console.log("Great job");
break;
case 'B':
console.log("OK job");
break;
case 'C':
console.log("You can do better");
break;
default:
console.log("Oy vey");
break;
}
///////////////////////////////////
// 4. Functions, Scope and Closures
// JavaScript functions are declared with the `function` keyword.
function myFunction(thing){
return thing.toUpperCase();
}
myFunction("foo"); // = "FOO"
// Note that the value to be returned must start on the same line as the
// `return` keyword, otherwise you'll always return `undefined` due to
// automatic semicolon insertion. Watch out for this when using Allman style.
function myFunction(){
return // <- semicolon automatically inserted here
{thisIsAn: 'object literal'};
}
myFunction(); // = undefined
// JavaScript functions are first class objects, so they can be reassigned to
// different variable names and passed to other functions as arguments - for
// example, when supplying an event handler:
function myFunction(){
// this code will be called in 5 seconds' time
}
setTimeout(myFunction, 5000);
// Note: setTimeout isn't part of the JS language, but is provided by browsers
// and Node.js.
// Another function provided by browsers is setInterval
function myFunction(){
// this code will be called every 5 seconds
}
setInterval(myFunction, 5000);
// Function objects don't even have to be declared with a name - you can write
// an anonymous function definition directly into the arguments of another.
setTimeout(function(){
// this code will be called in 5 seconds' time
}, 5000);
// JavaScript has function scope; functions get their own scope but other blocks
// do not.
if (true){
var i = 5;
}
i; // = 5 - not undefined as you'd expect in a block-scoped language
// This has led to a common pattern of "immediately-executing anonymous
// functions", which prevent temporary variables from leaking into the global
// scope.
(function(){
var temporary = 5;
// We can access the global scope by assigning to the "global object", which
// in a web browser is always `window`. The global object may have a
// different name in non-browser environments such as Node.js.
window.permanent = 10;
})();
temporary; // raises ReferenceError
permanent; // = 10
// One of JavaScript's most powerful features is closures. If a function is
// defined inside another function, the inner function has access to all the
// outer function's variables, even after the outer function exits.
function sayHelloInFiveSeconds(name){
var prompt = "Hello, " + name + "!";
// Inner functions are put in the local scope by default, as if they were
// declared with `var`.
function inner(){
alert(prompt);
}
setTimeout(inner, 5000);
// setTimeout is asynchronous, so the sayHelloInFiveSeconds function will
// exit immediately, and setTimeout will call inner afterwards. However,
// because inner is "closed over" sayHelloInFiveSeconds, inner still has
// access to the `prompt` variable when it is finally called.
}
sayHelloInFiveSeconds("Adam"); // will open a popup with "Hello, Adam!" in 5s
///////////////////////////////////
// 5. More about Objects; Constructors and Prototypes
// Objects can contain functions.
var myObj = {
myFunc: function(){
return "Hello world!";
}
};
myObj.myFunc(); // = "Hello world!"
// When functions attached to an object are called, they can access the object
// they're attached to using the `this` keyword.
myObj = {
myString: "Hello world!",
myFunc: function(){
return this.myString;
}
};
myObj.myFunc(); // = "Hello world!"
// What this is set to has to do with how the function is called, not where
// it's defined. So, our function doesn't work if it isn't called in the
// context of the object.
var myFunc = myObj.myFunc;
myFunc(); // = undefined
// Inversely, a function can be assigned to the object and gain access to it
// through `this`, even if it wasn't attached when it was defined.
var myOtherFunc = function(){
return this.myString.toUpperCase();
};
myObj.myOtherFunc = myOtherFunc;
myObj.myOtherFunc(); // = "HELLO WORLD!"
// We can also specify a context for a function to execute in when we invoke it
// using `call` or `apply`.
var anotherFunc = function(s){
return this.myString + s;
};
anotherFunc.call(myObj, " And Hello Moon!"); // = "Hello World! And Hello Moon!"
// The `apply` function is nearly identical, but takes an array for an argument
// list.
anotherFunc.apply(myObj, [" And Hello Sun!"]); // = "Hello World! And Hello Sun!"
// This is useful when working with a function that accepts a sequence of
// arguments and you want to pass an array.
Math.min(42, 6, 27); // = 6
Math.min([42, 6, 27]); // = NaN (uh-oh!)
Math.min.apply(Math, [42, 6, 27]); // = 6
// But, `call` and `apply` are only temporary. When we want it to stick, we can
// use `bind`.
var boundFunc = anotherFunc.bind(myObj);
boundFunc(" And Hello Saturn!"); // = "Hello World! And Hello Saturn!"
// `bind` can also be used to partially apply (curry) a function.
var product = function(a, b){ return a * b; };
var doubler = product.bind(this, 2);
doubler(8); // = 16
// When you call a function with the `new` keyword, a new object is created, and
// made available to the function via the `this` keyword. Functions designed to be
// called like that are called constructors.
var MyConstructor = function(){
this.myNumber = 5;
};
myNewObj = new MyConstructor(); // = {myNumber: 5}
myNewObj.myNumber; // = 5
// Unlike most other popular object-oriented languages, JavaScript has no
// concept of 'instances' created from 'class' blueprints; instead, JavaScript
// combines instantiation and inheritance into a single concept: a 'prototype'.
// Every JavaScript object has a 'prototype'. When you go to access a property
// on an object that doesn't exist on the actual object, the interpreter will
// look at its prototype.
// Some JS implementations let you access an object's prototype on the magic
// property `__proto__`. While this is useful for explaining prototypes it's not
// part of the standard; we'll get to standard ways of using prototypes later.
var myObj = {
myString: "Hello world!"
};
var myPrototype = {
meaningOfLife: 42,
myFunc: function(){
return this.myString.toLowerCase();
}
};
myObj.__proto__ = myPrototype;
myObj.meaningOfLife; // = 42
// This works for functions, too.
myObj.myFunc(); // = "hello world!"
// Of course, if your property isn't on your prototype, the prototype's
// prototype is searched, and so on.
myPrototype.__proto__ = {
myBoolean: true
};
myObj.myBoolean; // = true
// There's no copying involved here; each object stores a reference to its
// prototype. This means we can alter the prototype and our changes will be
// reflected everywhere.
myPrototype.meaningOfLife = 43;
myObj.meaningOfLife; // = 43
// The for/in statement allows iteration over properties of an object,
// walking up the prototype chain until it sees a null prototype.
for (var x in myObj){
console.log(myObj[x]);
}
///prints:
// Hello world!
// 43
// [Function: myFunc]
// true
// To only consider properties attached to the object itself
// and not its prototypes, use the `hasOwnProperty()` check.
for (var x in myObj){
if (myObj.hasOwnProperty(x)){
console.log(myObj[x]);
}
}
///prints:
// Hello world!
// We mentioned that `__proto__` was non-standard, and there's no standard way to
// change the prototype of an existing object. However, there are two ways to
// create a new object with a given prototype.
// The first is Object.create, which is a recent addition to JS, and therefore
// not available in all implementations yet.
var myObj = Object.create(myPrototype);
myObj.meaningOfLife; // = 43
// The second way, which works anywhere, has to do with constructors.
// Constructors have a property called prototype. This is *not* the prototype of
// the constructor function itself; instead, it's the prototype that new objects
// are given when they're created with that constructor and the new keyword.
MyConstructor.prototype = {
myNumber: 5,
getMyNumber: function(){
return this.myNumber;
}
};
var myNewObj2 = new MyConstructor();
myNewObj2.getMyNumber(); // = 5
myNewObj2.myNumber = 6;
myNewObj2.getMyNumber(); // = 6
// Built-in types like strings and numbers also have constructors that create
// equivalent wrapper objects.
var myNumber = 12;
var myNumberObj = new Number(12);
myNumber == myNumberObj; // = true
// Except, they aren't exactly equivalent.
typeof myNumber; // = 'number'
typeof myNumberObj; // = 'object'
myNumber === myNumberObj; // = false
if (0){
// This code won't execute, because 0 is falsy.
}
if (new Number(0)){
// This code will execute, because wrapped numbers are objects, and objects
// are always truthy.
}
// However, the wrapper objects and the regular builtins share a prototype, so
// you can actually add functionality to a string, for instance.
String.prototype.firstCharacter = function(){
return this.charAt(0);
};
"abc".firstCharacter(); // = "a"
// This fact is often used in "polyfilling", which is implementing newer
// features of JavaScript in an older subset of JavaScript, so that they can be
// used in older environments such as outdated browsers.
// For instance, we mentioned that Object.create isn't yet available in all
// implementations, but we can still use it with this polyfill:
if (Object.create === undefined){ // don't overwrite it if it exists
Object.create = function(proto){
// make a temporary constructor with the right prototype
var Constructor = function(){};
Constructor.prototype = proto;
// then use it to create a new, appropriately-prototyped object
return new Constructor();
};
}
// ES6 Additions
// The "let" keyword allows you to define variables in a lexical scope,
// as opposed to a block scope like the var keyword does.
let name = "Billy";
// Variables defined with let can be reassigned new values.
name = "William";
// The "const" keyword allows you to define a variable in a lexical scope
// like with let, but you cannot reassign the value once one has been assigned.
const pi = 3.14;
pi = 4.13; // You cannot do this.
// There is a new syntax for functions in ES6 known as "lambda syntax".
// This allows functions to be defined in a lexical scope like with variables
// defined by const and let.
const isEven = (number) => {
return number % 2 === 0;
};
isEven(7); // false
// The "equivalent" of this function in the traditional syntax would look like this:
function isEven(number) {
return number % 2 === 0;
};
// I put the word "equivalent" in double quotes because a function defined
// using the lambda syntax cannnot be called before the definition.
// The following is an example of invalid usage:
add(1, 8);
const add = (firstNumber, secondNumber) => {
return firstNumber + secondNumber;
};

JS

Awesome JavaScript Snippets (one-liners)

Generate a random number between two values

const randomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

Check if a number is an integer

const isInteger = (num) => Number.isInteger(num);

Check if a value is null or undefined

const isNil = (value) => value == null;

Check if a value is a truthy value

const isTruthy = (value) => Boolean(value);

Check if a value is a falsy value

const isFalsy = (value) => !value;

Check if a value is a valid credit card number

const isCreditCard = (cc) => {
  const regex = /(?:(?<visa>4[0-9]{12}(?:[0-9]{3})?)|(?<mastercard>25[1-7][0-9]{14})|(?<discover>6(?:011|5[0-9]{2})(?:[0-9]{12}))(?<amex>3[47][0-9]{13})|(?(8)^(?:2131|1800|35\d{3})\d{11}$))/;
  return regex.test(cc);
}

Check if a value is an object

const isObject = (value) => value !== null && typeof value === 'object';

Check if a value is a function

const isFunction = (value) => typeof value === 'function';

Remove Duplicates from Array

const removeDuplicates = (array) => [...new Set(array)];

Check if a value is a promise

const isPromise = (promise) => Promise.resolve(promise) === promise;

Check if a value is a valid email address

const isEmail = (email) => {
  const regex = /(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
  return regex.test(email);
}

Check if a string ends with a given suffix

const endsWith = (str, suffix) => str.endsWith(suffix);

Check if a string starts with a given prefix

const startsWith = (str, prefix) => str.startsWith(prefix);

Check if a value is a valid URL

const isURL = (url) => {
  const regex = /(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+/;
  return regex.test(url);
}

Check if a value is a valid hexadecimal color code

const isHexColor = (hex) => {
  const regex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
  return regex.test(hex);
}

Check if a value is a valid postal code

const isPostalCode = (postalCode, countryCode) => {
  const regexMap = {
    US: /^([0-9]{5})(?:[-\s]*([0-9]{4}))?$/,
    CA: /^([A-Za-z]\d[A-Za-z][-]?\d[A-Za-z]\d)$/
  };
  const regex = regexMap[countryCode.toUpperCase()];
  return regex ? regex.test(postalCode) : false;
}

Check if a value is a DOM element

const isDOMElement = (value) => value instanceof Element;

Check if a value is a valid CSS length (e.g. 10px, 1em, 50%)

const isCSSLength = (value) => {
  const regex = /^[-+]?(\d*\.)?\d+(em|ex|px|in|cm|mm|pt|pc|%|vw|vh|vmin|vmax)$/;
  return regex.test(value);
}

Check if a value is a valid date string (e.g. 2022-09-01,yyyy/mm/dd, etc.)

const isDateString = (value) => !isNaN(Date.parse(value));

Calculate the factorial of a number

const factorial = (num) => {
if (num < 0) return -1; else if (num === 0) return 1; else return (num * factorial(num-1)); }

Find the maximum value in an array

const max = (array) => Math.max(...array);

Find the minimum value in an array

const min = (array) => Math.min(...array);

Calculate the sum of values in an array

const sum = (array) => array.reduce((acc, val) => acc + val, 0);

Create an array of unique values from an array of objects based on a specific key

const uniqueBy = (array, key) => [...new Map(array.map((obj) => [obj[key], obj])).values()];

Quickly create an array of characters from a string

const string = "abcdefg";
const array = [...string];

Quickly create an object with all the properties and values of another object, but with a different key for each property

const original = {a: 1, b: 2, c: 3};
const mapped = {...original, ...Object.keys(original).reduce((obj, key) => ({...obj, [key.toUpperCase()]: original[key]}), {})};

Quickly create an array of numbers from 1 to 10

const array = [...Array(10).keys()].map(i => i + 1);

Quickly shuffle an array

const shuffle = (array) => array.sort(() => Math.random() - 0.5);

Convert an array-like object (such as a NodeList) to an array

```javascript

const toArray = (arrayLike) => Array.prototype.slice.call(arrayLike);


### Sort Arrays

```javascript
//Ascending
const sortAscending = (array) => array.sort((a, b) => a - b);

//Descending
const sortDescending = (array) => array.sort((a, b) => b - a);

Debounce a function

const debounce = (fn, time) => {
let timeout;
return function(...args) {
  clearTimeout(timeout);
  timeout = setTimeout(() => fn.apply(this, args), time);
};
};

Open a new tab with a given URL

```javascript

const openTab = (url) => { window.open(url, "_blank"); };


### Get the difference between two dates

  ```javascript
const dateDiff = (date1, date2) => Math.abs(new Date(date1) - new Date(date2));

Generate a random string of a given length

```javascript

const randomString = (length) => { let result = ""; const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for (let i = 0; i < length; i++) { result += characters.charAt(Math.floor(Math.random() * characters.length)); } return result; };

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment