16+ JavaScript snippets to save your time

Detect if dark mode

This snippet detects if the user is in dark mode. And if so, it returns true.

const isDarkMode = () =>
	globalThis.matchMedia?.("(prefers-color-scheme:dark)").matches ?? false;

// Usage
isDarkMode();

Copy to clipboard

This snippet copies the given text to the clipboard.

const copyToClipboard = (text) =>
	navigator?.clipboard?.writeText(text) ?? false;

// Usage
copyToClipboard("Hello World!");

Make items in an array unique

This snippet makes items in an array unique.

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

// Usage
uniqueArray([1, 2, 3, 4, 5, 1, 2, 3, 4, 5]); // [1, 2, 3, 4, 5]

Get random number

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

// Usage
getRandomNumber(1, 10); // Random number between 1 and 10

Get random hex color

This snippet returns a random hex color. It first generates a random number between 0 and 255, then converts it to hex.

const getRandomHexColor = () =>
	"#" + ((Math.random() * 0xffffff) << 0).toString(16);

// Usage
getRandomHexColor(); // Random hex color

Shuffle array

This snippet shuffles an array.

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

// Usage
shuffleArray([1, 2, 3, 4, 5]); // Randomly shuffled array

Loop a function x times

This snippet loops a function x times. Useful if you have many loops.

const loop = (x, fn) => [...Array(x)].forEach(fn);

// Usage
loop(10, () => console.log("Hello World!"));

Get random element from array

This snippet returns a random element from an array.

const getRandomElement = (array) => array[~~(Math.random() * array.length)];

// Usage
getRandomElement([1, 2, 3, 4, 5]); // Random element from array

Get random string

This snippet returns a random string.

const getRandomString = (length) =>
	[...Array(length)]
		.map(() => String.fromCharCode(~~(Math.random() * 26) + 97))
		.join("");

// Usage
getRandomString(10); // Random string with 10 characters

Get random boolean

This snippet returns a random boolean.

const getRandomBoolean = () => Math.random() >= 0.5;

// Usage
getRandomBoolean(); // Random boolean

Get random number between two numbers

This snippet returns a random number between two numbers.

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

// Usage
getRandomNumberBetween(1, 10); // Random number between 1 and 10

Get cookie

This snippet returns the value of a cookie.

const getCookie = (name) =>
	("; " + document.cookie).split(`; ${name}=`).pop().split(";")[0];

// Usage
getCookie("name"); // Value of cookie "name"

Clear all cookies

const clearCookies = () =>
	document.cookie
		.split(";")
		.forEach(
			(c) =>
				(document.cookie = c
					.replace(/^ +/, "")
					.replace(/=.*/, "=;expires=Thu, 01 Jan 1970 00:00:00 UTC"))
		);

// Usage
clearCookies(); // Clear all cookies

Scroll to top of element

const scrollToTop = (element) => element.scrollIntoView({ behavior: "smooth" });

// Usage
scrollToTop(document.querySelector("#element"));

Get average of numbers

const avg = (...numbers) => numbers.reduce((a, b) => a + b, 0) / numbers.length;

// Usage
avg(1, 2, 3, 4, 5); // 3

Validate email

This snippet validates an email using a regex.

const validateEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

// Usage
validateEmail("[email protected]"); // true

Validate object

This snippet validates an object using a rules object.

const validateObject = (object, rules) =>
	Object.keys(rules).every((key) => rules[key](object[key]));

// Usage
const rules = {
	name: (name) => name.length > 0,
	email: (email) => validateEmail(email),
	password: (password) => password.length > 0,
};

validateObject({ name: "", email: "", password: "" }, rules); // false

Chunk array

Chunks the array into x length chunks.

const chunkArray = (array, chunkSize) =>
	[...Array(Math.ceil(array.length / chunkSize))].map((_, index) =>
		array.slice(index * chunkSize, (index + 1) * chunkSize)
	);

// Usage
chunkArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 3); // [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10]]

RGB to HEX

const rgbToHex = (r, g, b) =>
	"#" + ((r << 16) + (g << 8) + b).toString(16).padStart(6, "0");

// Usage
rgbToHex(255, 0, 0); // #ff0000

Raw String to normal string

This is useful if you're having a situation like this:

formatFn("string") + formatFn("string");

Instead of doing that, you can use the power of ES6's raw string syntax:

const f = (...args) => String.raw(...args); // This returns a normal string

formatFn(f`string` + f`string`);

Compare two objects

const compareObjects = (obj1, obj2) => {
    const c = Object.keys(obj1),
        n = Object.keys(obj2);
    return c.length === n.length && c.every((c) => obj1[c] === obj2[c]);
};

// Usage
compareObjects({ a: 1, b: 2 }, { a: 1, b: 2 }); // true

Get selected text

const getSelectedText = () => window.getSelection().toString();

// Usage
getSelectedText(); // Selected text

Get object of query params in the url

const getQueryParams = (url) => new URLSearchParams(url.split("?")[1]);

// Usage
getQueryParams("https://example.com?a=1&b=2"); // { a: "1", b: "2" }

Convert number to word

Converts large numbers like 1000000 to "1M".

const numToWord = (number) =>
    number.toLocaleString("en-US", { notation: "compact" });

// Usage
numToWord(1000000); // "1M"

Count number of duplicates in array

Returns an object with the number of duplicates in the array.

const countDuplicates = (c) => {
    const t = {};
    return c.forEach((c) => (t[c] = (t[c] || 0) + 1)), t;
};

// Usage
countDuplicates([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); // { 1: 1, 2: 1, 3: 1, 4: 1, 5: 1, 6: 1, 7: 1, 8: 1, 9: 1, 10: 1 }

Generate tree from depth

If you need some testing JSON, you can use this snippet to generate a tree of depth depth.

const generateTree = (depth) =>
    [...Array(depth)].map(() => ({ tree: generateTree(depth - 1) }));

// Usage
generateTree(3); // [{ tree: [{ tree: [{ tree: [] }, { tree: [] }] }, { tree: [{ tree: [] }, { tree: [] }] }] }, { tree: [{ tree: [] }, { tree: [] }] }]