DEV Community

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

Read full post

Jon Randy 🎖️ • Sep 19 '21 • 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())

😊

Comment deleted

Lluís Josep Martínez • Sep 22 '21

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

Andrea Giammarchi • Sep 22 '21

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.

Andrea Giammarchi • Sep 23 '21 • Edited

P.S.

// this works fast and correct at the same time
const reverse = str => [...str].reverse().join('');

EIO • Emmanuel Imolorhe • Sep 26 '21

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

const reverse = str => [...str].reverse().join``;

Jon Randy 🎖️ • Sep 21 '21 • 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

Soldeplata Saketos • Sep 23 '21

alternative reverse:

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

Siddharth • Sep 19 '21

Nice list!

Some things I want to mention

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

DaCurse • Sep 22 '21

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

Siddharth • Sep 22 '21

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.

LucasCardim • Sep 19 '21

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

Lluís Josep Martínez • Sep 22 '21

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

Soldeplata Saketos • Sep 23 '21

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

codingjlu • Mar 19 '22

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

Ashutosh Sharma • Sep 20 '21

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

zeys • Sep 22 '21

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

André Castelo • Sep 23 '21

He's 14

Timur Murtukov • Sep 22 '21

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.

André Castelo • Sep 23 '21

He's 14 though, give him a break.

Rahul • Jan 1 '23

hahah seriously?

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

Manohar Reddy Poreddy • Sep 20 '21

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

Jon Randy 🎖️ • Sep 20 '21 • 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

Manohar Reddy Poreddy • Sep 20 '21

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.

Jon Randy 🎖️ • Sep 19 '21 • Edited

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

Math.floor(Math.random() * x)

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

Tracy Gilmore • Sep 20 '21

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

Dumitru Uzun • Sep 26 '21

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)}`;

0826gm • Sep 21 '21

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]);

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

Matt Ellen-Tsivintzeli • Sep 22 '21 • Edited

This has come up before!

Frederik Ring • Aug 12

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

Erick Eduardo Petrucelli • Sep 22 '21

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.

Luis • Sep 22 '21

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