Tips & Tricks

Problem

Writing verbose if-else statements for simple conditions makes code harder to read and maintain.

Solution

Use the ternary operator (condition ? true : false) for single-line conditional assignments.

Benefit

Reduces code length by up to 70% and improves readability for simple conditions.

Code Example

// Instead of:
if (age >= 18) {
    status = 'adult';
} else {
    status = 'minor';
}

// Use:
status = age >= 18 ? 'adult' : 'minor';

Problem

Extracting multiple values from arrays or objects requires writing repetitive assignment code.

Solution

Use destructuring syntax to extract multiple values in a single line.

Benefit

Makes code cleaner, reduces errors, and improves variable assignment efficiency.

Code Example

// Array destructuring
const [first, second, third] = [1, 2, 3];

// Object destructuring
const { name, age } = user;

Problem

Traditional for loops to transform arrays are verbose and error-prone with manual index management.

Solution

Use Array.map() to transform arrays in a functional, declarative way.

Benefit

Reduces code by 60%, eliminates off-by-one errors, and makes intent clearer.

Code Example

// Instead of:
const doubled = [];
for (let i = 0; i < numbers.length; i++) {
    doubled.push(numbers[i] * 2);
}

// Use:
const doubled = numbers.map(n => n * 2);

Problem

String concatenation with + operator is hard to read and maintain, especially with multiple variables.

Solution

Use template literals with backticks and ${} syntax for cleaner string interpolation.

Benefit

Improves readability by 80% and supports multi-line strings without manual concatenation.

Code Example

// Instead of:
const msg = 'Hello ' + name + ', you are ' + age + ' years old.';

// Use:
const msg = `Hello ${name}, you are ${age} years old.`;

Problem

Checking if an object is empty requires iterating through its properties manually.

Solution

Use Object.keys(obj).length === 0 to quickly check if an object has no properties.

Benefit

One-line solution that is faster and more reliable than manual iteration.

Code Example

// Check if object is empty
const isEmpty = Object.keys(myObj).length === 0;

// Get all object keys
const keys = Object.keys(user); // ['name', 'age', 'email']

Problem

Removing null, undefined, 0, false, NaN from arrays requires complex conditional logic.

Solution

Use Array.filter(Boolean) to remove all falsy values in one line.

Benefit

Eliminates 10+ lines of conditional logic and handles all falsy values automatically.

Code Example

const arr = [0, 1, false, 2, '', 3, null, undefined, NaN];

// Remove all falsy values
const clean = arr.filter(Boolean);
// Result: [1, 2, 3]

Problem

Functions need fallback values when parameters are not provided, requiring manual checks.

Solution

Use default parameter syntax to automatically assign fallback values in function signatures.

Benefit

Reduces defensive coding by 50% and makes function interfaces self-documenting.

Code Example

// Instead of:
function greet(name) {
    name = name || 'Guest';
    return `Hello ${name}`;
}

// Use:
function greet(name = 'Guest') {
    return `Hello ${name}`;
}

Problem

Copying arrays with traditional methods can accidentally create references instead of new arrays.

Solution

Use the spread operator [...arr] to create a shallow copy of an array.

Benefit

Prevents mutation bugs and creates independent copies in one simple syntax.

Code Example

const original = [1, 2, 3];

// Clone array
const copy = [...original];

// Merge arrays
const merged = [...arr1, ...arr2];

Problem

Checking multiple OR conditions creates long, repetitive comparison chains.

Solution

Use Array.includes() to check if a value matches any item in an array of possibilities.

Benefit

Reduces condition complexity by 70% and makes code more maintainable.

Code Example

// Instead of:
if (status === 'active' || status === 'pending' || status === 'approved') {
    // ...
}

// Use:
if (['active', 'pending', 'approved'].includes(status)) {
    // ...
}

Problem

Accessing deeply nested object properties requires multiple null/undefined checks.

Solution

Use optional chaining (?.) to safely access nested properties without explicit null checks.

Benefit

Eliminates 90% of null checking code and prevents "Cannot read property" errors.

Code Example

// Instead of:
const city = user && user.address && user.address.city;

// Use:
const city = user?.address?.city;

Problem

Using filter() to find a single item processes the entire array unnecessarily.

Solution

Use Array.find() which stops at the first match, improving performance.

Benefit

Up to 100x faster for large arrays and makes intent clearer.

Code Example

const users = [{id: 1, name: 'John'}, {id: 2, name: 'Jane'}];

// Inefficient:
const user = users.filter(u => u.id === 2)[0];

// Efficient:
const user = users.find(u => u.id === 2);

Problem

Removing duplicates from arrays requires nested loops or complex filter logic.

Solution

Convert array to Set (which only stores unique values) then back to array.

Benefit

One-line solution that is 50x faster than traditional approaches.

Code Example

const numbers = [1, 2, 2, 3, 3, 3, 4];

// Remove duplicates
const unique = [...new Set(numbers)];
// Result: [1, 2, 3, 4]

Problem

Complex array transformations require multiple passes and intermediate variables.

Solution

Use Array.reduce() to transform arrays into any shape (sum, object, grouped data).

Benefit

Single-pass solution that handles complex transformations efficiently.

Code Example

const numbers = [1, 2, 3, 4, 5];

// Sum array
const sum = numbers.reduce((acc, n) => acc + n, 0);

// Group by property
const grouped = items.reduce((acc, item) => {
    acc[item.category] = acc[item.category] || [];
    acc[item.category].push(item);
    return acc;
}, {});

Problem

Debugging arrays of objects with console.log() makes data hard to read and compare.

Solution

Use console.table() to display arrays and objects in a formatted table.

Benefit

Makes debugging 10x faster with clear, sortable table visualization.

Code Example

const users = [
    {id: 1, name: 'John', age: 30},
    {id: 2, name: 'Jane', age: 25}
];

// Display as table
console.table(users);

Problem

Using || for defaults treats 0 and false as falsy, causing unexpected behavior.

Solution

Use ?? (nullish coalescing) which only triggers for null/undefined, not 0/false.

Benefit

Prevents bugs when working with 0, false, or empty strings as valid values.

Code Example

const count = 0;

// Wrong: count becomes 10 (unexpected)
const value1 = count || 10;

// Correct: count stays 0
const value2 = count ?? 10;

Problem

Traditional function syntax in callbacks adds unnecessary verbosity.

Solution

Use arrow functions (=>) for concise callback syntax with implicit returns.

Benefit

Reduces callback code by 40% and automatically binds this context.

Code Example

// Traditional
numbers.map(function(n) {
    return n * 2;
});

// Arrow function
numbers.map(n => n * 2);

Problem

Assigning objects creates references, causing accidental mutations.

Solution

Use Object.assign({}, obj) or spread {...obj} to create shallow copies.

Benefit

Prevents mutation bugs and allows safe object manipulation.

Code Example

const original = {name: 'John', age: 30};

// Clone object
const copy1 = Object.assign({}, original);
const copy2 = {...original};

// Merge objects
const merged = {...obj1, ...obj2};

Problem

Checking if any/all items meet a condition requires manual loops with break statements.

Solution

Use Array.some() to check if any item matches, Array.every() for all items.

Benefit

More readable and stops execution early for better performance.

Code Example

const numbers = [1, 2, 3, 4, 5];

// Check if any number > 3
const hasLarge = numbers.some(n => n > 3); // true

// Check if all numbers > 0
const allPositive = numbers.every(n => n > 0); // true

Problem

Flattening nested arrays requires recursive functions or complex reduce logic.

Solution

Use Array.flat(depth) to flatten arrays to specified depth in one line.

Benefit

Eliminates 20+ lines of recursive flattening code.

Code Example

const nested = [1, [2, 3], [4, [5, 6]]];

// Flatten one level
const flat1 = nested.flat(); // [1, 2, 3, 4, [5, 6]]

// Flatten all levels
const flat2 = nested.flat(Infinity); // [1, 2, 3, 4, 5, 6]

Problem

Sequential await calls waste time when operations could run in parallel.

Solution

Use Promise.all() to execute multiple async operations simultaneously.

Benefit

Can reduce execution time by 70% for independent async operations.

Code Example

// Sequential (slow): 3 seconds total
const user = await fetchUser();
const posts = await fetchPosts();
const comments = await fetchComments();

// Parallel (fast): 1 second total
const [user, posts, comments] = await Promise.all([
    fetchUser(),
    fetchPosts(),
    fetchComments()
]);

Problem

Converting NodeLists, Sets, or strings to arrays requires complex manual conversion.

Solution

Use Array.from() to convert any iterable into an array with optional mapping.

Benefit

Universal conversion solution that works with all iterable types.

Code Example

// Convert NodeList to Array
const divs = Array.from(document.querySelectorAll('div'));

// Create array from string
const chars = Array.from('hello'); // ['h','e','l','l','o']

// Create array with mapping
const squares = Array.from({length: 5}, (_, i) => i * i);
// [0, 1, 4, 9, 16]

Problem

Conditional execution often requires verbose if statements for simple cases.

Solution

Use && for conditional execution and || for fallback values in one line.

Benefit

Reduces simple conditionals from 5 lines to 1 line.

Code Example

// Execute if condition is true
isLoggedIn && redirectToDashboard();

// Use fallback value
const name = userName || 'Guest';

// Chain conditions
user && user.isAdmin && showAdminPanel();

Problem

Parsing JSON with dates or special types requires manual post-processing.

Solution

Use the reviver parameter in JSON.parse() to transform values during parsing.

Benefit

Automates type conversion and eliminates separate transformation loops.

Code Example

const json = '{"date":"2024-01-01T00:00:00.000Z","count":"42"}';

const data = JSON.parse(json, (key, value) => {
    // Convert date strings to Date objects
    if (key === 'date') return new Date(value);
    // Convert numeric strings to numbers
    if (key === 'count') return parseInt(value);
    return value;
});

Problem

Creating objects from variables requires repetitive key-value pairs.

Solution

Use ES6 shorthand to omit the value when key and variable name are the same.

Benefit

Reduces object creation code by 50% and improves readability.

Code Example

const name = 'John';
const age = 30;
const city = 'NYC';

// Instead of:
const user1 = {name: name, age: age, city: city};

// Use:
const user2 = {name, age, city};

Problem

Measuring code execution time requires manual Date.now() calculations.

Solution

Use console.time() and console.timeEnd() to measure execution time easily.

Benefit

Simple, accurate performance measurement without manual timestamp math.

Code Example

console.time('Array processing');

const result = largeArray.map(item => {
    // Complex processing
    return processItem(item);
});

console.timeEnd('Array processing');
// Output: Array processing: 234.56ms