Javascript One-Liners

Let's explore ten simple yet powerful JavaScript one-liners that can help beginner developers look like pros by making their code more efficient and elegant.

The Big Picture

Imagine you're a chef who wants to prepare a delicious meal quickly and efficiently. Instead of using many complicated steps, you use some clever tricks to get the job done faster without sacrificing taste. Similarly, these JavaScript one-liners are like those cooking tricks that make your code more concise and effective.

Core Concepts

1. Array Manipulation: Handling arrays efficiently.
2. String Manipulation: Working with strings in a more straightforward manner.
3. Destructuring: Extracting values from arrays or objects conveniently.
4. Conditional (Ternary) Operator: Simplifying if-else statements.
5. Logical Operators: Using logical shortcuts for cleaner code.
6. Arrow Functions: Writing shorter function syntax.

Detailed Walkthrough

1. Cloning an Array:

   let clone = [...array];

   This uses the spread operator ... to copy all elements of an array into a new array.

2. Converting a String to an Array:

   let array = [...string];

   Here, the spread operator is used to split a string into an array of characters.

3. Swapping Two Variables:

   [a, b] = [b, a];

   This leverages array destructuring to swap the values of a and b in a single line.

4. Short-Circuiting Default Values:

   let value = variable || 'default';

   If variable is falsy (like null, undefined, 0, ''), value will be set to 'default'.

5. Quick Array Filtering:

   let filteredArray = array.filter(item => condition);

   This filters an array based on a condition provided in an arrow function.

6. Short-Circuiting Default Function Arguments:

   function example(arg = 'default') {
     return arg;
   }

   If arg is not provided, it defaults to 'default'.

7. Converting a Number to a String:

   let str = num + '';

   Adding an empty string to a number converts it to a string.

8. Checking for an Even Number:

   let isEven = num % 2 === 0;

   This checks if a number is even by using the modulus operator %.

9. Converting a Boolean to a Number:

   let num = +bool;

   Using the unary plus operator + converts true to 1 and false to 0.

10. Ternary Operator for Conditional Assignment:

    let result = condition ? 'yes' : 'no';

    This is a compact way to assign a value based on a condition.

Understanding Through an Example

Let's put a few of these one-liners together in a small example. Suppose you have an array of numbers, and you want to create a new array with only the even numbers, converted to strings, and provide a default value if the array is empty:

let numbers = [1, 2, 3, 4, 5];
let evenStrings = numbers.filter(num => num % 2 === 0).map(num => num + '') || ['No evens'];

In this example:

• We filter the array to get only even numbers.
• We convert these numbers to strings.
• If the resulting array is empty, we provide a default array with 'No evens'.

Conclusion and Summary

• Array Manipulation: Use the spread operator for cloning and converting.
• String Manipulation: Split strings into arrays easily.
• Destructuring: Swap variables and extract values smoothly.
• Conditional (Ternary) Operator: Simplify if-else statements.
• Logical Operators: Use short-circuiting for default values.
• Arrow Functions: Write concise functions.

Test Your Understanding

1. How would you clone an array using a one-liner?
2. What is the benefit of using the ternary operator in JavaScript?
3. Can you write a one-liner to check if a number is odd?

These one-liners make JavaScript coding more efficient and readable. For more details and examples, you can check the full article here.