DEV Community

Cover image for 20 Killer JavaScript One Liners ☝️
Savio Martin
Savio Martin

Posted on • Edited on

20 Killer JavaScript One Liners ☝️

#javascript #github #programming #productivity

Hello Folks 👋

This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.

Today, I'd like to share 20 Killer JavaScript one liners to make your life easier. Let's goooo 🚀

Get Value of a brower Cookie

Retrieve the value of a cookie by accessing with document.cookie

const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();

cookie('_ga');
// Result: "GA1.2.1929736587.1601974046"
Enter fullscreen mode Exit fullscreen mode

Convert RGB to Hex 

const rgbToHex = (r, g, b) =>
  "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

rgbToHex(0, 51, 255); 
// Result: #0033ff
Enter fullscreen mode Exit fullscreen mode

Copy to Clipboard

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

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

copyToClipboard("Hello World");
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Find the day of 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
Enter fullscreen mode Exit fullscreen mode

Capitalise a String

Javascript doesn't have an inbuilt capitalise function, so we can use the following code for the purpose.

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)

capitalize("follow for more")
// Result: Follow for more
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Clear All Cookies

You can easily clear all cookies stored in 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=/`));
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Remove Duplicated from Array

You can easily remove duplicates with Set in JavaScript. Its a life saver.

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 ]
Enter fullscreen mode Exit fullscreen mode

Get Query Params from URL

You can easily retrieve query params from a url either by passing 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 }
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

Check if a number is even or odd 

const isEven = num => num % 2 === 0;

console.log(isEven(2)); 
// Result: True
Enter fullscreen mode Exit fullscreen mode

Find Average of Numbers

Find the average between multiple numbers using reduce method.

const average = (...args) => args.reduce((a, b) => a + b) / args.length;

average(1, 2, 3, 4);
// Result: 2.5
Enter fullscreen mode Exit fullscreen mode

Scroll to Top

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

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

goToTop();
Enter fullscreen mode Exit fullscreen mode

Reverse a string

You can easily reverse a string using split, reverse and join methods.

const reverse = str => str.split('').reverse().join('');

reverse('hello world');     
// Result: 'dlrow olleh'
Enter fullscreen mode Exit fullscreen mode

Check if array is empty

Simple one liner to check if an array is empty, will return true or false.

const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;

isNotEmpty([1, 2, 3]);
// Result: true
Enter fullscreen mode Exit fullscreen mode

Get Selected Text

Get the text the user has select using inbuilt getSelection property.

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

getSelectedText();
Enter fullscreen mode Exit fullscreen mode

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 ]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Do you want to test your project?

Try LambdaTest, test your browers in 3000+ browers like that with an image of your website
Image description

👀 Wrapping Up

Yeah, that's a wrap. Hope you enjoyed the article. Do not hesitate to share your feedback. I am on Twitter @saviomartin7. Give a follow!

Follow me on Github @saviomartin, Don't miss my amazing projects! 💯

Feedbacks are greatly appreciated! 🙌 Have an amazing day!

🌎 Lets connect

Latest comments (43)

Collapse
 
alexmelw profile image
Alex Melvin •

Check if an array is not empty?
let arr = [];
arr?.some(x => x)

Collapse
 
alexmelw profile image
Alex Melvin •

I'd do padStart instead of padEnd bacause of the obvious reasons.

const randomHex = () => #${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, "0")};

Collapse
 
robsonmuniz16 profile image
Robson Muniz •

Nice content, Savio Martin, thanks for sharing it with us!

Collapse
 
dioxmio profile image
Jose Granja Martinez •

Nice one! I wrote a similar article not long ago. Please check my take on the subject here

Collapse
 
chrdiede profile image
Christian Diederich •

I like this one: await new Promise(r => setTimeout(r, 2000))

Collapse
 
duzun profile image
Dumitru Uzun •

Shorter:

const isDateValid = (...val) => !Number.isNaN(+new Date(...val));
const dayDif = (date1, date2) => Math.ceil(Math.abs(date1 - date2) / 86400000);
const randomHex = () => `#${((1<<24)|Math.random() * 0xffffff).toString(16).slice(1)}`;
Enter fullscreen mode Exit fullscreen mode
Collapse
 
che3vinci profile image
jinbo.wang •

great

Collapse
 
timhuang profile image
Timothy Huang •

Thanks for sharing. Well done.

Collapse
 
murtukov profile image
Timur Murtukov •

Nah, these are not killer one-liners, just a beginner level. Besides that, writing something in 1 line doesn't mean good. It can sometimes harm readability, for example the first snippet is just a good example of how NOT to write your code.

And some of the examples are pretty useless. Why would you create a function for window.scrollTo(0, 0)? It's short enough on its own to use it directly.

In fact you just stolen all these snippets either from 30secondsofcode.org/ or from StackOverflow (I checked) and you have audacity to call yourself "superior". If you are really "an enthusiastic frontend developer" as you call yourself, than go and learn instead of posting useless articles.

Collapse
 
andrecastelo profile image
André Castelo •

He's 14 though, give him a break.

Collapse
 
rahxuls profile image
Rahul •

hahah seriously?

go do a background research on him, 14 and oversmart and fooling on internet.

View full discussion (43 comments)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.