Top 15 Best JavaScript important codes you will always need

Photo by Gabriel Heinzer on Unsplash

Top 15 Best JavaScript important codes you will always need

Braincuber Technologies's photo
Braincuber Technologies
·Mar 21, 2022·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Table of contents

Top 15 Best javascript important codes you will always need

1 Shuffle an Array

Shuffling an array is super easy with sort and random methods.

const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
console.log(shuffleArray([1, 2, 3, 4]));
// Result: [ 1, 4, 3, 2 ]

2 Check if Date is Valid

Use the following snippet to check if a given date is valid or not.

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
isDateValid("December 17, 1995 03:24:00");
// Result: true

3 Copy to Clipboard

Easily copy any text to clipboard using navigator.clipboard.writeText.

const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard("Hello World");

4 Find the day of the year

Find which is the day by a given date.

const dayOfYear = (date) =>
  Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
dayOfYear(new Date());
// Result: 272

5 Capitalize a String

Javascript doesn’t have an inbuilt capitalize function, so we can use the following code for this purpose.

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
capitalize("follow for more")
// Result: Follow for more

6 Find the number of days between two days

Find the days between 2 given days using the following snippet.

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
dayDif(new Date("2020-10-21"), new Date("2021-10-22"))
// Result: 366

7 Clear All Cookies

You can easily clear all cookies stored on a web page by accessing the cookie using document.cookie and clearing it.

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));

8 Generate Random Hex

You can generate random hex colors with Math.random and padEnd properties.

const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
console.log(randomHex());
// Result: #92b008

9 Remove Duplicated from Array

You can easily remove duplicates with Set in JavaScript. It's a lifesaver.

const removeDuplicates = (arr) => [...new Set(arr)];
console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6]));
// Result: [ 1, 2, 3, 4, 5, 6 ]

10 Get Query Params from URL

You can easily retrieve query params from a URL either bypassing window.location or the raw URL goole.com?search=easy&page=3

const getParameters = (URL) => {
  URL = JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') +'"}');
  return JSON.stringify(URL);
};
getParameters(window.location)
// Result: { search : "easy", page : 3 }

11 Log Time from Date

We can log time, in the format hour::minutes::seconds from a given date.

const timeFromDate = date => date.toTimeString().slice(0, 8);
console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); 
// Result: "17:30:00"

12 Check if a number is even or odd

const isEven = num => num % 2 === 0;
console.log(isEven(2)); 
// Result: True

13 Find Average of Numbers

Find the average between multiple numbers using reducemethod.

const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4);
// Result: 2.5

14 Check if the array is empty

A simple one-liner to check if an array is empty, will return trueor false.

const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;
isNotEmpty([1, 2, 3]);
// Result: true

15 Get Selected Text

Get the text the user has selected using inbuilt getSelectionproperty.

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

16 Detect Dark Mode

Check if a user’s device is in dark mode with the following code.

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode) 
// Result: True or False

if you like our javascript important codes guide then follow our blog for more such a useful content

Did you find this article valuable?

Support Braincuber Technologies by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this