20 Modern JavaScript Tricks for Cleaner Everyday Code

JavaScript Development Substack

SubscribeSign in

20 Modern JavaScript Tricks for Cleaner Everyday Code<br>Practical patterns for arrays, objects, strings, and regular expressions

JavaScript Development Space<br>Aug 09, 2026

Share

Modern JavaScript has a surprisingly large number of built-in APIs that can replace utility functions, verbose loops, and clever-looking one-liners.<br>This is the second article in my JavaScript tricks series. If you missed the first one, start here:<br>10 Modern JavaScript Tricks That Cut Boilerplate<br>The first article focused on reducing repetitive code. This time, we are going deeper into four things we work with almost every day: arrays, objects, strings, and regular expressions.<br>Some of these techniques are simple. Others are APIs you may have seen before but never found a good reason to use.<br>The goal is not to make JavaScript shorter at any cost. It is to make common transformations easier to read, harder to break, and simpler to maintain.<br>Let’s start with arrays.

Arrays

1. Use Array.from() for More Than Conversions

Most developers first meet Array.from() as a way to turn an iterable or array-like value into a real array.<br>const elements = Array.from(<br>document.querySelectorAll(".card")<br>);That is useful, but Array.from() can also generate arrays.<br>const indexes = Array.from(<br>{ length: 5 },<br>(_, index) => index<br>);

console.log(indexes);<br>// [0, 1, 2, 3, 4]You can generate more useful sequences just as easily.<br>const pageNumbers = Array.from(<br>{ length: 5 },<br>(_, index) => index + 1<br>);

console.log(pageNumbers);<br>// [1, 2, 3, 4, 5]It also accepts a mapping function, which means you can create and transform the values in one operation.<br>const squares = Array.from(<br>{ length: 5 },<br>(_, index) => index ** 2<br>);

console.log(squares);<br>// [0, 1, 4, 9, 16]You will sometimes see Array.from() used with Set for deduplication:<br>const unique = Array.from(<br>new Set([1, 2, 2, 3, 3])<br>);For that particular case, however, spread syntax is usually easier to scan:<br>const unique = [...new Set([1, 2, 2, 3, 3])];Use Array.from() when conversion and mapping naturally belong together. Do not use it merely because it makes the code look more advanced.

2. Use reduce() When You Are Actually Accumulating

reduce() is one of the most powerful array methods in JavaScript.<br>It is also one of the easiest to overuse.<br>A good use case is building an object from an array.<br>const tags = ["react", "css", "react", "javascript"];

const counts = tags.reduce((result, tag) => {<br>result[tag] = (result[tag] ?? 0) + 1;<br>return result;<br>}, {});

console.log(counts);Result:<br>react: 2,<br>css: 1,<br>javascript: 1<br>}Grouping is another reasonable use case when Object.groupBy() is not appropriate or available.<br>const users = [<br>{ name: "Alex", role: "admin" },<br>{ name: "Sam", role: "user" },<br>{ name: "Mia", role: "admin" }<br>];

const usersByRole = users.reduce((groups, user) => {<br>(groups[user.role] ??= []).push(user);<br>return groups;<br>}, {});The mistake is treating reduce() as the universal array method.<br>This:<br>const doubled = numbers.reduce((result, number) => {<br>result.push(number * 2);<br>return result;<br>}, []);works, but this communicates the intention much better:<br>const doubled = numbers.map(<br>number => number * 2<br>);Use map() for mapping, filter() for filtering, some() for testing, and reduce() when you genuinely need an accumulator.

3. Deduplicate Objects by a Property

Set is excellent for primitive values.<br>const values = [1, 2, 2, 3];

const unique = [...new Set(values)];

console.log(unique);<br>// [1, 2, 3]Objects behave differently because equality is based on references.<br>const users = [<br>{ id: 1, name: "Alex" },<br>{ id: 2, name: "Sam" },<br>{ id: 1, name: "Alexander" }<br>];If you want the last object for every id, a Map gives you a clean solution.<br>const uniqueUsers = [<br>...new Map(<br>users.map(user => [user.id, user])<br>).values()<br>];Result:<br>{ id: 1, name: "Alexander" },<br>{ id: 2, name: "Sam" }<br>]Each id becomes a key. When the same key appears again, its previous value is replaced.<br>If you want to preserve the first occurrence instead, make that rule explicit:<br>const byId = new Map();

for (const user of users) {<br>if (!byId.has(user.id)) {<br>byId.set(user.id, user);

const uniqueUsers = [...byId.values()];A few extra lines are worth it when they make the intended behavior obvious.

4. Replace map() + flat() with flatMap()

Suppose every item produces multiple values.<br>You could write:<br>const numbers = [1, 2, 3];

const result = numbers<br>.map(number => [number, number * 2])<br>.flat();

console.log(result);<br>// [1, 2, 2, 4, 3, 6]But JavaScript has a method specifically for this pattern.<br>const result = numbers.flatMap(<br>number => [number, number * 2]<br>);flatMap() maps each element and flattens the result by one level.<br>It becomes particularly useful when one input can produce zero, one, or several outputs.<br>const words = ["JavaScript", "", "React"];

const normalized = words.flatMap(word => {<br>const value = word.trim();

return value ?...