16 Essential JavaScript Shorthand Tricks to Write Cleaner Code

JavaScript is a powerful and flexible language with rich features and syntactic sugar. Here are 16 of the most commonly used JavaScript shorthand tricks; mastering them lets us write more concise and elegant code and significantly improve development efficiency (and increase idle time).

1. Ternary Operator for Simplified Conditional Logic

// Traditional way
let result;
if (someCondition) {
    result = 'yes';
} else {
    result = 'no';
}
// Concise way
const result = someCondition ? 'yes' : 'no';

2. Nullish Coalescing Operator

3. Optional Chaining Operator

// Traditional way
const street = user && user.address && user.address.street;
// Concise way
const street = user?.address?.street;

4. Array Deduplication

5. Quick Integer Conversion

// Traditional way
const floor = Math.floor(4.9);
// Concise way
const floor = ~~4.9;

6. Object Merging

7. Short-Circuit Evaluation

// Traditional way
if (condition) {
    doSomething();
}
// Concise way
condition && doSomething();

8. Default Parameter Values

// Traditional way
function greet(name) {
    name = name || 'Guest';
    console.log(`Hello ${name}`);
}
// Concise way
const greet = (name = 'Guest') => console.log(`Hello ${name}`);

9. Destructuring Assignment

// Traditional way
const first = arr[0];
const second = arr[1];
// Concise way
const [first, second] = arr;

10. String to Number Conversion

// Traditional way
const num = parseInt('123');
// Concise way
const num = +'123';

11. Multiple Condition Checks

// Traditional way
if (value === 1 || value === 2 || value === 3) {
    // ...
}
// Concise way
if ([1, 2, 3].includes(value)) {
    // ...
}

12. Exponentiation Shortcut

// Traditional way
Math.pow(2, 3);
// Concise way
2 ** 3;

13. Object Property Shorthand

// Traditional way
const obj = { x: x, y: y };
// Concise way
const obj = { x, y };

14. Array Mapping

// Traditional way
const numbers = [1, 2, 3];
const doubled = numbers.map(function(num) {
    return num * 2;
});
// Concise way
const doubled = numbers.map(num => num * 2);

15. Swapping Variable Values

// Traditional way
let temp = a;
 a = b;
 b = temp;
// Concise way
[a, b] = [b, a];

16. Dynamic Object Property Names

// Traditional way
const obj = {};
obj[dynamic + 'name'] = value;
// Concise way
const obj = {
    [`${dynamic}name`]: value
};