DEV Community

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

Posted on

20 Killer JavaScript One Liners ☝️

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

👀 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

Discussion (41)

Collapse
siddharthshyniben profile image
Siddharth

Nice list!

Some things I want to mention

  1. You forgot const (or let) in the first code block
  2. You can get URL Params easily in modern browsers like so: Object.fromEntries(new URLSearchParams(window.location.search))
Collapse
dacurse profile image
DaCurse

For 2, I think converting to an object is pointless, nothing wrong with the URLSearchParams object (which is basically a Map)

Collapse
siddharthshyniben profile image
Siddharth

But it's not an actual object (like arguments is not an actual array), so If you want to do some advanced object stuff you need to convert it to an object.

Collapse
jonrandy profile image
Jon Randy • Edited on
const rgbToHex = (...rgb)=>'#'+rgb.reduce((a,v)=>a+(256|v).toString(16).slice(1),'')
const rgbToHex = (...rgb)=>'#'+rgb.reduce((a,v)=>a+v.toString(16).padStart(2,0),'')

const randomHex = (a='facedb')=>[...a].reduce(x=>x+(a+0x3d00b615)[~~(Math.random()*16)],'#')
const randomHex = (f='reduce')=>[...f][f](a=>a+(~~(Math.random()*16)).toString(16),'#')
const randomHex = ()=>'#'+(~~(Math.random()*(1<<24))|1<<25).toString(16).slice(1)
const randomHex = ()=>'#'+(~~(Math.random()*(1<<24))).toString(16).padStart(6,0)
// Anyone got any shorter?


const reverse = str=>[...str].reduce((a,v)=>v+a)

const isEven = x=>~x&1

const capitalize = ([a,...b])=>a.toUpperCase()+b.join('')
const capitalize = a=>a.replace(/./,a=>a.toUpperCase())
Enter fullscreen mode Exit fullscreen mode

😊

Collapse
danbamikiya profile image
Dan Bamikiya

Shorter !== Performant

His string reverse function is faster than yours.

Collapse
lluismf profile image
Lluís Josep Martínez

But who has the need in the real world / real apps to reverse a string? Nobody.

Collapse
webreflection profile image
Andrea Giammarchi

Faster !== Correct ... his string reverse breaks with code points, while [...str] doesn't.

Try it: OP reverse breaks the emoji with reverse('some 💩'); while this reduce suggestion doesn't.

Thread Thread
webreflection profile image
Andrea Giammarchi • Edited on

P.S.

// this works fast and correct at the same time
const reverse = str => [...str].reverse().join('');
Enter fullscreen mode Exit fullscreen mode
Thread Thread
eioluseyi profile image
Emmanuel Imolorhe

In a bid to be obnoxious 😏 you could have shortened your code further by 2 characters 🌚

const reverse = str => [...str].reverse().join``;
Enter fullscreen mode Exit fullscreen mode
Collapse
jonrandy profile image
Jon Randy • Edited on

I made no claim to it being faster, but in this case the reduce method is almost twice as fast - jsbench.me/3tkttupth4/1 - at least on Chrome. On Firefox though, the situation is reversed. Different JS engines, different optimisations I guess

Collapse
silverium profile image
Soldeplata Saketos

alternative reverse:

const reverse = str => [...str].reduceRight((a,v)=> a+v)
Enter fullscreen mode Exit fullscreen mode

:D

Collapse
lucascardim profile image
LucasCardim

What do you mean with "I have proved my superiority in frontend technologies.". Be humble, you're not superior than anyone.

Collapse
ashu profile image
Ashutosh Sharma

I believe English is not his primary language(not mine either). I guess he means skill/competency.

Collapse
lluismf profile image
Lluís Josep Martínez

He has proved that he can copy paste from StackOverflow :-)

Collapse
silverium profile image
Soldeplata Saketos

but to distinguish the better code to copy is the hardest thing

Collapse
zeys profile image
zeys

Dont be hard on him he's just a kid (he's 14)

Collapse
andrecastelo profile image
André Castelo

He's 14

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
jonrandy profile image
Jon Randy • Edited on

I think there is also an issue with your randomHex function - it will never return #ffffff since:

Math.floor(Math.random() * x)
Enter fullscreen mode Exit fullscreen mode

can only ever return values from 0 to x-1. You need to use Math.round()

Collapse
manoharreddyporeddy profile image
Manohar Reddy Poreddy

Once I used to use JS to capitalize, and everything else.
Feedback comments came in from Experts
Now I just use the simpler CSS.
Ex: w3schools.com/cssref/pr_text_text-...

Collapse
jonrandy profile image
Jon Randy • Edited on

That doesn't do the same thing, merely changes the appearance of the string on screen - doesn't change the string. Depending on the use case, that could be okay

Collapse
manoharreddyporeddy profile image
Manohar Reddy Poreddy

Yes, but that was an example (Ex:) for conversation.
I used to do everything in JS
including building accessible menus, etc
wrote several 100s of lines of code for each.
In CSS, it was always less than 50 each, very easy to change, and by everyone.

Collapse
tracygjg profile image
TGJ Gilmore

Suggested alternative:
const capitalize = ([init, ...rest]) => init.toUpperCase() + rest.join('')

Collapse
0826gm profile image
0826gm

Array shuffling this way won't be statistically random, it's biased due to how sort works with non-deterministic compare function. I propose changing the snippet to the similar

const shuffleArray = (arr) => arr.map(e => [Math.random(), e]).sort((a,b) => a[0] - b[0]).map(e => e[1]);
Enter fullscreen mode Exit fullscreen mode

...which assigns a random "position" to each element, compares by those, then discards them.

There are even better ways (O(n)).

For more on this, see stackoverflow.com/q/2450954/8376184

Collapse
mellen profile image
Matt Ellen • Edited on

This has come up before!

Nice post. Be aware that shuffling an Array like this is not perfectly random and a proper implementation is a little more complicated: medium.com/@nitinpatel_20236/how-t...

Collapse
erickpetru profile image
Erick Eduardo Petrucelli

Since line breaks are optional in JavaScript, any code can be one line if you want to. 🤣

Ok, jokes aside, I understand one liner functions have appeal with developers, since Functional Programming is receiving full love nowadays.

So if anyone here needs to convert browser's rgb string to hex: stackoverflow.com/a/3627747/424498. This way you can directly send the result of a getComputedStyle(someElement).backgroundColor call to the one line function and receive the hex string as result.

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
casperbraske profile image
Luis

That's great. Just one correction: "capitalise"¹ is applied to each word in a string. In your example, it should be "upper case first" or something like that.

Best regards.

¹ developer.apple.com/documentation/...

Collapse
chrdiede profile image
Christian Diederich

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

Collapse
timhuang profile image
Timothy Huang

Thanks for sharing. Well done.

Collapse
developersatish profile image
Satish Singh

wow :-)

Collapse
che3vinci profile image
jinbo.wang

great

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
martin2844 profile image
martin2844

Good post. Just wanted to comment that making a set removes duplicates but also converts the array into a set. It stops being an array.

Collapse
nacho profile image
Nacho Iacovino ⚡

It's not a set because he's spreading it inside an array, so it becomes an array again.

Collapse
spock123 profile image
Lars Rye Jeppesen

Removing duplicates example will not work for deep objects.

Collapse
robsonmuniz16 profile image
Robson Muniz

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

Collapse
sayyedhammadali profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Sayyed Hammad Ali

That is a very nice article. I was writing recently on the same topic, when i came across your article and it helped me a lot. Special Thanks.
checkout my article as well on medium:
javascript.plainenglish.io/27-esse...