Modern JavaScript one-liners that simplify your code

Flattening Nested Arrays#

Nested arrays can be difficult to work with when you need all elements as a single-level array. The flat() method provides an elegant solution that recursively processes nested arrays to a specified depth.

const arr = [1, [2, [3, [4]], 5]];
const flattened = arr.flat(2); // [1, 2, 3, [4], 5]
const deepFlat = arr.flat(Infinity); // [1, 2, 3, 4, 5]

The flat() method takes a depth argument that determines how deep the array should be flattened. Pass Infinity to flatten all levels. This is particularly useful when working with data from APIs or when combining multiple data sources.

Filtering Unique Values#

Removing duplicate values from an array is a common requirement. By leveraging ES6's Set, this task becomes trivial and highly efficient.

const arr = [1, 2, 3, 3, 4, 5, 5];
const unique = [...new Set(arr)]; // [1, 2, 3, 4, 5]

A Set automatically eliminates duplicates, and the spread operator converts it back into an array for further use. This approach works with any data type and runs in linear time, making it suitable for performance-critical code.

Swapping Variables Without a Temporary Variable#

Swapping values between two variables usually requires a temporary variable. With destructuring, this becomes unnecessary and reads as intention.

let a = 10, b = 20;
[a, b] = [b, a];
console.log(a, b); // 20 10

Array destructuring directly swaps values in a single operation. This pattern is clean, intuitive and makes the code's purpose immediately clear to you.

Shorthand Conditional with Logical AND#

Simplify conditional expressions when one outcome is based on a single condition being true. The logical AND operator provides a compact alternative to verbose ternary operations.

const isLoggedIn = true;
const user = isLoggedIn && 'Atyantik User'; // 'Atyantik User'

If the condition is true, the value is returned. If false, undefined is returned. This pattern is readable when the condition and value have a clear relationship. Use it when only the truthy branch matters to your code.

Converting Strings to Numbers#

Convert strings to numbers quickly using the unary plus operator. This operator coerces the string into its numeric representation if it is a valid number.

const str = "1990";
const num = +str; // 1990

The plus operator is faster than parseInt() for simple conversions and more readable for numeric type coercion. Invalid strings return NaN, which you can check with Number.isNaN() if needed.

Filling an Array with Values#

Need an array pre-filled with values? Combine Array() and fill() to achieve this effortlessly.

const filledArray = Array(5).fill(1); // [1, 1, 1, 1, 1]

This creates an array of a specified length and fills it with the provided value. Useful for initializing arrays with default values or creating placeholder structures for data processing.

Generating a Random Integer in a Range#

Get a random integer between min and max using Math.random() and Math.floor(). This pattern scales the random value to your desired range.

const randomInt = Math.floor(Math.random() * (10 - 1 + 1)) + 1;
// Random integer between 1 and 10

Math.random() generates a number between 0 and 1. By scaling it with (max - min + 1) and adding min, we ensure the result falls within the desired range. This approach handles both inclusive bounds correctly.

Reversing a String#

Reversing a string in JavaScript combines split(), reverse() and join() into one expressive line.

const str = "Atyantik";
const reversed = str.split('').reverse().join(''); // 'kitnaytA'

This one-liner splits the string into an array of characters, reverses that array, and joins it back into a string. Simple, memorable and efficient for string reversal.

Extracting a Specific Property from Objects#

Using map(), you can extract a specific property from an array of objects in a single line.

const arr = [{ name: "Bob" }, { name: "John" }];
const names = arr.map(obj => obj.name); // ['Bob', 'John']

The map() method creates a new array populated with the results of calling a function on every element. Here it extracts the name property. This pattern is foundational for transforming data structures.

Checking for Palindromes#

Checking if a string is a palindrome (the same forward and backward) can be done in one line by comparing the original to its reversed version.

const str = "rotator";
const isPalindrome = str === str.split('').reverse().join(''); // true

This splits the string, reverses it, joins it back together, then checks if the result equals the original string. It is a clean demonstration of how composing built-in methods produces elegant logic.

Mastering One-Liners#

JavaScript one-liners are not about squeezing functionality into fewer lines. They are about leveraging powerful language features to write clear, efficient and elegant code. The patterns here use modern ES6 features that modern JavaScript engines optimize heavily, so you get readability and performance together.

Use one-liners judiciously and make sure your code remains readable and maintainable. A one-liner that requires explanation defeats its own purpose. Mastering these patterns helps you think more functionally and makes your coding experience much more enjoyable. The goal is code that is both concise and immediately understandable to anyone reading it, as of December 2024.

When you build production applications that need to scale, these patterns form a solid foundation. For larger codebases or teams, understanding custom software development practices and web performance optimization helps you know when one-liners serve your code best and when a different approach works better for your goals.