Knowing certain JavaScript one liners and snippets can save you valuable time while developing or interviewing. Here are some of my favorite “once you know, you know” snippets that I have actually used while coding. I don't think any of them are too code golfy, but I'll let you be the judge.
TL;DR: The Code
(Jump to the TS version of form fields)
Each one gets broken down further below with explanations and examples.
Wrap around a list
A lot of times in algorithm challenges you will need to wrap around a list. Meaning move a number of spaces, and if you reach the end of the list, go back to the first index. So if a list is 8 values long, but you have to move 10, you would need to land on the second index. You could use a bunch of complicated if statements, or...
The key thing to understand is the modulo. It's a handy little operator, keep it in mind when looking at “overflow” type problems like this.
Round to the nearest 10, 100, 1,000...
This one is useful in algorithms if you need to rough out numbers to various levels. Basically, what you're doing is dividing first to move the decimal up. With the “useless” numbers now decimals, you can round them off. To get the number back up to its desired size, you multiply it. The ignored numbers now become zeros. It's a neat trick for dealing with money or logarithm-like scales where after a certain point, small numbers can be rounded off.
Convert form fields to object
When you're working with forms, the FormData API is hard to beat. Especially in React, when you don't want to control the form, FormData should be your go to. 90% of use cases are just going to be shooting the form values over the wire, and here's the quick way to do it.
Also, here's the TS version to get the right type on the final object.
The currentTarget tells TS that it's a form (this is just good to know with TS in general). Then, you cast your data to unknown so you can use whatever type you want.
Numerical ID/Counter
I think I needed to dynamically create non-db temp ids for react components and squished a classic counter into one line. Each time the function is called, the counter increases, and no other function can alter its internal state. It uses a closure, an Immediately Invoked Function Expression, and the default values to keep things tight.
Bonus tip! You can stop making it an IIFE if you actually want to make the starting number dynamic:
Random letter ID
If you don't need the ids to be numeric or sequential, here's a good way to do that with letters (without bringing in the whole uuid library). Honestly, I feel like when I need unique ids for React keys, in truth, I just use Date.now(). However, that's ugly and long for printing, so this little snippet keeps things a little clearer.
Technically and obviously, this won't be nearly as collision proof as real UUIDs, but it's fine for little ui lists here and there.
Character frequency counter
If you have an array (or array from a string) and want to know how many times characters appear, there's a super slick way to do this with reduce.
Deep clone an object
This one pops up most often with testing, where performance can take a bit of a backseat. If you don't want to bring in a 3rd party "clone" function, there's structuredClone. There's also the poor man's version with JSON if that API isn't available.
Sleep
A few times I had to deal with a terrible API that was slow and didn't have a hook to say when it finished. So, we just had to wait a second to make sure it loaded. We also wanted to use promises instead of setTimeout callbacks, so using a sleep function was ideal. We could simply await for a second and then move on. No need for callbacks!
Swap two vars without a temp
Before modern JS, if you wanted to switch the values of two variables, you'd have to introduce a 3rd 'temp' value. With array destructuring and assignment, we can do it in one line:
Remove duplicates with a Set
I just wrote about Sets, and apparently this is their primary use. If you have an array and you want to remove the duplicates, you can do so with a Set.
Don't forget that spread operator!
A word on readability
Look, I'm all about readable code and I'll be the first person to say that some of these snippets aren't super straightforward. What you get in brevity you lose in readability. Personally, I don't think any of these are too wild, but others might disagree. That's why you should always make sure your code uses descriptive function and variable names. These names can be the crucial tip to help your code click for others. For example, here I just say wrap for brevity while reading on a phone, but in the codebase it should be something like getValueInArrWithWrapAround might be more helpful.
Happy coding everyone,
Mike
Join the conversation on Reddit to leave a comment!