DEV Community

JavaScript One-Liners That Make Me Excited

Andrew Healey on March 28, 2019

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

Read full post

Michael Z • Mar 29 '19

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]

d-h-e • Apr 2 '19

[...Array(3).keys()]
// [0, 1, 2]

Mihail Malo • Mar 29 '19

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

Brian • Mar 29 '19 • 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.

Mihail Malo • Mar 30 '19

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.

Alex Lohr • Mar 29 '19

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

Andrew Healey • Mar 29 '19

A clever change. Probably faster too?

Alex Lohr • Mar 29 '19

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

Rithvik Vibhu • Apr 4 '19

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

Andrew Healey • Apr 4 '19

Awesome! Close to what I expected 👍

Ben Sinclair • Mar 29 '19 • 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},{});

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}

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})()

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

Andrew Healey • Mar 29 '19

This is brilliant, Ben! 😄

Alex Lohr • Mar 29 '19

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

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

齐翊 • Apr 30 '19

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;

Raphael Schweikert • Apr 2 '19 • 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.

Andrew Healey • Apr 2 '19

What an interesting story! Thanks for sharing.

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

Stephen Chiang • Mar 29 '19

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

Michiel Hendriks • Mar 29 '19 • Edited

Why waste all those extra characters, this also works

(arr) => arr.slice().sort(() => Math.random() - 0.5)

Andrew Healey • Mar 29 '19

Nice find, thanks! Edited 👍.

Brian Jenkins • Apr 14 '19 • 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"
}

Andrew Healey • Apr 14 '19

I'll allow it! 😀

greg • Mar 29 '19

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

Alex Lohr • Mar 29 '19

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.

Ken Bellows • Mar 30 '19

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?

Dominik Aksamit • Apr 3 '20

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

Andrew Healey • Apr 4 '20

Very cool! Thanks for sharing Dominik 👍

Dominik Aksamit • Apr 4 '20

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

Alex Lohr • Mar 29 '19

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

Jacob Evans • Mar 30 '19 • 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

Nested Software • Mar 30 '19 • Edited

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

Jacob Evans • Mar 30 '19

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

Jacob Evans • Mar 30 '19

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!

Cédric Rémond • May 16 '19

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 !

Andrew Healey • May 16 '19

Glad it helped ya!

Alan • Jul 1 '19

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.

齐翊 • Apr 30 '19 • 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;

Andrew Healey • Apr 30 '19 • Edited

Thanks! Fixed it :)

Sebastien Barre • Apr 3 '19

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.

Mihail Malo • Mar 29 '19 • Edited

const r = {valueOf: Math.random}

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

Casey Cole • Mar 29 '19 • 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) ; }

Max Tarsis • May 1 '19

great stuff
thanks

Dinesh Pandiyan • Mar 29 '19

A keyboard so real you can taste it

Love it!

Comment deleted

MorenoMdz • Mar 29 '19

Good stuff thanks!!

fluffy • Apr 2 '19

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.