DEV Community

Cover image for 20 Killer JavaScript One Liners ☝️

20 Killer JavaScript One Liners ☝️

Savio Martin on September 19, 2021

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 wit...
Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited
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)
const randomHex = ()=>'#'+(~~(Math.random()*8**8)).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
 
Sloan, the sloth mascot
Comment deleted
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

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 | EIO

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

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
 
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
 
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
 
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

Thread Thread
 
codingjlu profile image
codingjlu

Yes, especially when one post has 1k votes and another has -16?

Collapse
 
ashu profile image
Ashutosh Sharma

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

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
 
rahxuls profile image
Rahul

hahah seriously?

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

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

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

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
 
tracygjg profile image
Tracy Gilmore

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

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
 
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-Tsivintzeli • Edited

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
 
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
 
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
 
chrdiede profile image
Christian Diederich

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

Collapse
 
developersatish profile image
Satish Singh

wow :-)

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
 
che3vinci profile image
jinbo.wang

great

Collapse
 
timhuang profile image
Timothy Huang

Thanks for sharing. Well done.

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.