20 killer JavaScript single lines of code

👋

---

This article has compiled some practical JavaScript one-line codes, is very easy to use ~~

---

Get the value of the browser cookie

Find the value of cookie through document.cookie

const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();
    
cookie('_ga');
// Result: "GA1.2.1929736587.1601974046"

Color RGB to hexadecimal

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    
rgbToHex(0, 51, 255); 
// Result: #0033ff

Copy to clipboard

With the help of navigator.clipboard.writeText you can easily copy the text to the clipboard

The specification requires the use of Permissions API obtain the "clipboard write" permission before writing to the clipboard. However, different browsers have different specific requirements because this is a new API. For more information, please check compatibility table and Clipboard availability in Clipboard .

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

Check if the date is valid

Use the following code snippet to check if the given date is valid.

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

Find the day of the year where the date is

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

Capitalize the first letter of an English string

Javascript does not have a built-in capitalization function, so we can use the following code.

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

Calculate how many days are the difference between 2 dates

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

Clear all cookies

By using document.cookie access cookies and clear them, you can easily clear all cookies stored on the web page.

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

Generate random hexadecimal colors

You can use the Math.random and padEnd attributes to generate random hexadecimal colors.

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

Array deduplication

You can easily delete duplicates Set

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 ]

Get query parameters from URL

You can easily retrieve query parameters from the url window.location or the original 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 }

Or more simply:

Object.fromEntries(new URLSearchParams(window.location.search))
// Result: { search : "easy", page : 3 }

Time processing

We can record the time from a given date in hour::minutes::seconds

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

Whether the check digit is odd or even

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

Use bit operations

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

Find the average of numbers

Use the reduce method to find the average value between multiple numbers.

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

back to the top

You can use the window.scrollTo(0, 0) method to automatically scroll to the top. Set both x and y to 0.

const goToTop = () => window.scrollTo(0, 0);
    
goToTop();

Reverse string

You can use the split , reverse and join methods to easily reverse the string.

const reverse = str => str.split('').reverse().join('');
    
reverse('hello world');     
// Result: 'dlrow olleh'

Check if the array is empty

One line of code to check if the array is empty, it will return true or false

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

Get the text selected by the user

Use the built-in getSelection attribute to get the text selected by the user.

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

Shuffle the array

You can use the sort and 06182408da2f49 methods to random

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

Check if the user's device is in dark mode

Use the following code to check if the user's device is in dark mode.

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

---