Tronic247 Logo

16+ JavaScript snippets to save your time

Published on August 30, 2022 • Updated on June 13, 2024

I made some JavaScript snippets to save you some time. See them below and let me know your thoughts!

Contents

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

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('obama@gmail.com'); // 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: [] }] }]

javascript, tricks-and-tips, html-tutorials

javascript, snippets

Something wrong or just found a typo? Edit this page on GitHub and make a PR!

Comments