DEV Community

Cover image for JavaScript One-Liners That Make Me Excited
Andrew Healey
Andrew Healey

Posted on • Updated on • Originally published at healeycodes.com

JavaScript One-Liners That Make Me Excited

Dust off your ternary expressions, we're going in.

One-liners are tricky to maintain (and sometimes even hard to understand) but that doesn't stop them from being cool as hell. There's a certain satisfaction that comes after writing a terse solution.

This is a collection of some of my recent favorites. They will all run in your dev console so pop it open and try them out. I hope you'll share some of your own favorites in the comments!

Calendar Hacking

Ali Spittel tweeted this out recently. It solves a problem I've faced multiple times. If you swap the minus for a plus, it gives you the next seven days.

// Create an array of the past seven days, inclusive
[...Array(7).keys()].map(days => new Date(Date.now() - 86400000 * days));
Enter fullscreen mode Exit fullscreen mode

Random ID generation

This is my go-to function for creating unique ids when prototyping. I've even seen people using it in production in the past. It's not secure but ... there are worse random generation functions out there.

// Generate a random alphanumerical string of length 11
Math.random().toString(36).substring(2);
Enter fullscreen mode Exit fullscreen mode

Quines

A quine is a program that outputs its own source code. Quines have always fascinated me. I've got pretty close to completing my own quines a couple of times in different languages but details are the name of the game.

I've picked some winners for you. Credit to Mama Fun Roll, PleaseStand, and Peter Olson respectively for these three.

// $=_=>`$=${$};$()`;$()
$=_=>`$=${$};$()`;$()

// eval(I="'eval(I='+JSON.stringify(I)+')'")
eval(I="'eval(I='+JSON.stringify(I)+')'")

// For those who like their quines via alert
// (function a(){alert("("+a+")()")})()
(function a(){alert("("+a+")()")})()
Enter fullscreen mode Exit fullscreen mode

Scrape query parameters

Talk about non-maintainable code. This converts the page's query parameters to an object in 78 bytes. Thanks Alex Lohr for code golfing it (and 齐翊 too).

?foo=bar&baz=bing => {foo: bar, baz: bing}

// Set the current page's query parameters to `q`
q={};location.search.replace(/([^?&=]+)=([^&]*)/g,(_,k,v)=>q[k]=v);q;
Enter fullscreen mode Exit fullscreen mode

I'd like to see a minifier work that hard.

Working clock

With a sprinkle of HTML, you can create a working clock with source code you could read out in one breath. I wrote this after a challenge from a co-worker. It ticks every second, updating the page with the current time.

<body onload="setInterval(()=>document.body.innerHTML=new Date().toGMTString().slice(17,25))"></body>
Enter fullscreen mode Exit fullscreen mode

Shuffle an array

Until Pythonistas show up with their import random, random.shuffle(array) solution, we're going to enjoy what we have. This has the bonus of having an infinitesimal chance of being an infinite loop (implementation depending). Michiel Hendriks helped us save a few characters here 👍. Don't use in production.

// Return a shuffled copy of an Array-like
(arr) => arr.slice().sort(() => Math.random() - 0.5)
Enter fullscreen mode Exit fullscreen mode

Generate random hex code

ES7's padEnd is a blessing. Along with padStart, they've made number to string conversions that much easier. Writing hex values right into JavaScript code is always pretty neat too.

// Generate a random hex code such as `#c618b2`
'#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');
Enter fullscreen mode Exit fullscreen mode

Pass the interview in style

The infamous interview question answer but codegolfed. I researched and I don't think it can get any shorter than this.

for(i=0;++i<101;console.log(i%5?f||i:f+'Buzz'))f=i%3?'':'Fizz'
Enter fullscreen mode Exit fullscreen mode

Remove duplicates

This only works with primitives but it's still nifty. Set takes any iterable object, like an array [1,2,3,3], and removes duplicates. The spread operator makes that set [1,2,3].

// Remove duplicates from the iterable `arr`
[...new Set(arr)]
Enter fullscreen mode Exit fullscreen mode

A keyboard so real you can taste it

Okay, I don't really count this as a one-liner but it's too good not to include. A masterful codegolf solution by edc65. It's terse to a fault and codegolfed within an inch of its life but we should bask in its glory.

// Return a ***3D*** ASCII keyboard as string
(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["BS","TAB","CAPS","ENTER"][p++]||'SHIFT',p])}\\|`,m+=y+(x+'    ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`
`)()
Enter fullscreen mode Exit fullscreen mode

It prints:

Amazing.


Join 150+ people signed up to my newsletter on programming and personal growth!

I tweet about tech @healeycodes.

Discussion (55)

Collapse
michi profile image
Michael Z

I've got another good one to create arrays of a specific size and map over it at the same time.

Array.from({length: 3}, (val, i) => i)
// [0, 1, 2]
Enter fullscreen mode Exit fullscreen mode
Collapse
dhe profile image
d-h-e
[...Array(3).keys()]
// [0, 1, 2]
Enter fullscreen mode Exit fullscreen mode
Collapse
qm3ster profile image
Mihail Malo

Oh SHID.
This is exactly what I needed so many times, and it finally seems like it's a performant approach?!

Collapse
brian profile image
Brian • Edited

It looks quite clean and sleek, so I decided to test out the performance on my pc

Weirdly using Array(N) is about 20% faster than using an array-like {length: N} when used inside Array.from()

I also added comparisons of mapping as a parameter vs (dot)map too.

Thread Thread
qm3ster profile image
Mihail Malo

Wow, that's... humbling.
BTW, you could beat out ForLoop with:

const arr = new Array(100)
for (let i = 0, i < 100, i++)
  arr[i] = i

since the size is known in advance.

Collapse
lexlohr profile image
Alex Lohr

You can shave off one more char for your hex color code generator without resorting to padEnd:

// before
'#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');

// after
'#' + (0x1000000 + Math.random() * 0xffffff).toString(16).slice(1, 6);
Collapse
healeycodes profile image
Andrew Healey Author

A clever change. Probably faster too?

Collapse
lexlohr profile image
Alex Lohr

Thanks. Not sure if it's faster, but that's usually a non-issue for code golfing :)

Collapse
rithvikvibhu profile image
Rithvik Vibhu

I was curious and created a test: jsperf.com/hex-color-code-generator
:)

Thread Thread
healeycodes profile image
Andrew Healey Author

Awesome! Close to what I expected 👍

Collapse
moopet profile image
Ben Sinclair • Edited
// I'd like to see a minifier work that hard.
document.location.search.replace(/(^\?)/,'').split('&').reduce(function(o,n){n=n.split('=');o[n[0]]=n[1];return o},{});

// Challenge accepted.
location.search.substr(1).split('&').reduce((o,n)=>{n=n.split('=');o[n[0]]=n[1];return o},{});
Enter fullscreen mode Exit fullscreen mode

I'm not a big Javascript person so I don't know what the difference is between window.location, document.location and just location (which I assume uses the global window context). I know substr works fine on an empty string, and I'm making the (heroically cavalier) assumption that query strings start with a ? in all browsers' implementations of location.search.

But both of these return something incorrect if there's no query string:

{"": undefined}
Enter fullscreen mode Exit fullscreen mode

Oops. Well, we can do something about that:

(() => {let x=location.search.substr(1).split('&').reduce((o,n)=>{n=n.split('=');o[n[0]]=n[1];return o},{});delete x[""];return x})()
Enter fullscreen mode Exit fullscreen mode

And now it's longer and even less maintainable, but hey :)

Collapse
healeycodes profile image
Andrew Healey Author

This is brilliant, Ben! 😄

Collapse
lexlohr profile image
Alex Lohr

I can probably do it in even less characters... let me try:

q={};document.location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);q;
Thread Thread
luckybilly profile image
齐翊

Hey, that one could not accept empty value (eg:'?a=&b=1&c=')
try this instead:

//keys should not be empty, but value can
q={};location.search.replace(/([^?&=]+)=([^&]*)/g,(_,k,v)=>q[k]=v);q;
Collapse
sabberworm profile image
Raphael Schweikert • Edited

Be careful with that shuffle, it won’t yield truly random results because sort expects its comparator to uphold Math.sign(compare(a, b)) === -Math.sign(compare(b, a)). Microsoft once screwed up by using exactly that.

Collapse
healeycodes profile image
Andrew Healey Author

What an interesting story! Thanks for sharing.

And yes, for any production code just use Fisher/Yates!

Collapse
chiangs profile image
Stephen E. Chiang

Awesome one liners... Until you hit save and Prettier formats it to two 🤣

Collapse
greg profile image
greg

It's a shorthand for returning one of three colors if the score is truthy. Otherwise it returns a fallback value.

score => ({1: "#98FB98", 2: "#FFFF99", 3: "#FA8072"}[score] || "#DCDCDC")
Collapse
lexlohr profile image
Alex Lohr

that can be even more minified:

score => (["", "#98FB98", "#FFFF99", "#FA8072"][score] || "#DCDCDC")

you could lose the first array item and use score - 1, but that would have more characters.

Collapse
kenbellows profile image
Ken Bellows

Would it? Wouldn't you shorten by 4 chars to remove "",, or 3 if whitespace doesn't count, and only add 2 chars to go from [score] to [score-1]? Seems like it'd still be shorter by at least a character, or am I missing something?

Collapse
brianjenkins94 profile image
Brian Jenkins • Edited

Does this count? 😈

{
    "precommit": "git ls-files | while read -r FILE; do if file \"$FILE\" | grep -q \"text\"; then vim --clean -n -e -s -c \":%s/\\s\\+$//e|:retab|:wq\" \"$FILE\"; fi ; done"
}
Collapse
healeycodes profile image
Andrew Healey Author

I'll allow it! 😀

Collapse
elmuerte profile image
Michiel Hendriks • Edited

Why waste all those extra characters, this also works

(arr) => arr.slice().sort(() => Math.random() - 0.5)
Enter fullscreen mode Exit fullscreen mode
Collapse
t0nyba11 profile image
Tony B • Edited

Why waste all those extra characters, this also works :)

(a) => [...a].sort(() => Math.random() - 0.5)

Collapse
healeycodes profile image
Andrew Healey Author

Nice find, thanks! Edited 👍.

Collapse
lexlohr profile image
Alex Lohr

There are a lot of byte saving tips one can employ in code golfing. A nice collection can be found here: github.com/jed/140bytes/wiki/Byte-...

Collapse
jacobmgevans profile image
Jacob Evans • Edited
isInRange = (a, b, c) => [...Array(c - a +1)].map((e, i) => i + a).indexOf(b) !== -1

I did this one for a challenge. It finds if a number is in a range of two other numbers so find if b is in range of a to c

Collapse
nestedsoftware profile image
Nested Software • Edited

Wouldn't you just check b >= a && b <= c ?

Collapse
jacobmgevans profile image
Jacob Evans

That was definitely a way to do it. However, I am pretty sure that only works with constraints on the range values, and the way I wanted to solve it was to be sure it could handle any range.

I could be wrong which in that case, I will certainly remember this way lol

Thread Thread
jacobmgevans profile image
Jacob Evans

Nope to me lol, you're just right and I am pretty sure that works for any size range not just that but the
Big O is significantly better ahahaha!

Collapse
daksamit profile image
Dominik Aksamit

The one I recently discovered as very useful, mostly while testing or mocking API calls:

await new Promise((resolve) => setTimeout(() => resolve(1), 2500));

Usually I use, when I have to simulate data fetching ;P

Collapse
healeycodes profile image
Andrew Healey Author

Very cool! Thanks for sharing Dominik 👍

Collapse
daksamit profile image
Dominik Aksamit

Thanks! I would recommend adding most of them to vscode snippets. It's really easy to use just like typing "sleep" + enter and I have ready one-liner in my code ;)

Collapse
korbraan profile image
Cédric Rémond

I use Set often to remove duplicates, but I didn't know it's possible to use the spread operator on a Set.

I have been using Array.from(new Set(myArray)) until now. Since Array.from take an iterable I could have guessed but...

Nice post !

Collapse
healeycodes profile image
Andrew Healey Author

Glad it helped ya!

Collapse
luckybilly profile image
齐翊 • Edited
q={};location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);q;

got a problem like this:

'?a=&b=1&c='  ----> {b: 1} 

lost key 'a' and 'c'

solution: replace the 2nd '+' by '*'

q={};location.search.replace(/([^?&=]+)=([^&]*)/g,(_,k,v)=>q[k]=v);q;
Collapse
healeycodes profile image
Andrew Healey Author • Edited

Thanks! Fixed it :)

Collapse
kelerchian profile image
Alan
const makeMockingSpongebobMeme = (someString) => (typeof someString === "string" ? someString : "Wrong input").split("").map(a => Math.random() > 0.5 ? a.toLowerCase() : a.toUpperCase()).join("")

One of the intriguing trait of functional programming is to look unreadable despite being working.

Collapse
sebastienbarre profile image
Sebastien Barre

Please don't use code in production that multiplies 86400000 (24*60*60*1000) for computing dates; date/time is way more complicated than that, you will shoot yourself in the foot. Use a library.

Collapse
qm3ster profile image
Mihail Malo • Edited
const r = {valueOf: Math.random}

Not really a one-liner, but good for when making generative art.

Collapse
caseycole589 profile image
Casey Cole • Edited

//only rounds up 15 can be changed to what ever number you want to use
roundMinutes = (mins) => { return (~(mins / 15) * 15) * -1 ; }
roundMinutes(35) -> 45
// will now round down instead of up
roundMinutes = (mins) => { return (~~(mins / 5) * 5) ; }

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
kioviensis profile image
Max Tarsis

great stuff
thanks

Collapse
flexdinesh profile image
Dinesh Pandiyan

A keyboard so real you can taste it

Love it!

Collapse
morenomdz profile image
MorenoMdz

Good stuff thanks!!

Collapse
fluffy profile image
fluffy

Note that list shuffle approach has a bunch of bias and doesn't perform very good shuffling. See beesbuzz.biz/code/6719-How-not-to-... for a detailed explanation.

Collapse
healeycodes profile image
Andrew Healey Author

Yup! 😀 The function is short but scary. Raphael linked another article that covers the same topic. I'll add a note.

Collapse
kimsean profile image
Kim Sean Pusod

google search got me here. Thank you for this article. This one's i've been looking for.

Collapse
moopet profile image
Ben Sinclair

A couple of comments!

Anything that has semicolons in it isn't a one-liner, no matter how you try to stretch the definition.

And does it matter that days aren't always 86400000 milliseconds long?

Collapse
wayne_gakuo profile image
Wayne Gakuo

This article makes JavaScript look really fun to play with. Thanks Andrew!

Collapse
healeycodes profile image
Andrew Healey Author

Yeah, this one was fun to write! 😁

Collapse
healeycodes profile image
Andrew Healey Author

I like it a lot.

Collapse
ajonp profile image
Alex Patterson

Now I need the bash (or if Apple forces me zsh) script so I can call the command sevenDays ;)