Interview question

How do you chain multiple array methods together, and when should you avoid over-chaining? कई array methods को साथ में कैसे chain करें, और over-chaining से कब बचना चाहिए?

Answer

Array methods that return arrays (map, filter) can be chained fluently, but each method in a chain iterates the array separately - long chains can hurt readability and performance on large datasets.

const products = [
    { name: 'Laptop', price: 1200, category: 'electronics', inStock: true },
    { name: 'Phone', price: 800, category: 'electronics', inStock: false },
    { name: 'Desk', price: 300, category: 'furniture', inStock: true },
    { name: 'Chair', price: 150, category: 'furniture', inStock: true }
];

// Chaining filter -> map -> sort for a readable pipeline
const result = products
    .filter(p => p.inStock)                          // keep in-stock items
    .map(p => ({ ...p, priceWithTax: p.price * 1.1 })) // add computed field
    .sort((a, b) => a.priceWithTax - b.priceWithTax);  // sort ascending

console.log(result);

// Each chained method creates a NEW array and iterates fully
// For a 10,000 item array chained 5 times, that's potentially 50,000 iterations

// PERFORMANCE CONCERN with long chains on large data
const largeArray = new Array(100000).fill(0).map((_, i) => i);
const chained = largeArray
    .filter(n => n % 2 === 0)   // pass 1: 100,000 iterations
    .map(n => n * 2)             // pass 2: 50,000 iterations
    .filter(n => n > 1000);      // pass 3: 50,000 iterations

// ALTERNATIVE - combine logic into a single reduce pass for large datasets
const singlePass = largeArray.reduce((acc, n) => {
    if (n % 2 === 0) {
        const doubled = n * 2;
        if (doubled > 1000) acc.push(doubled);
    }
    return acc;
}, []);
// One iteration instead of three - better for performance-critical large datasets

// Readability guideline: chaining 2-3 methods is usually clearer than one giant reduce;
// beyond that, consider breaking into named intermediate variables for clarity
const inStockProducts = products.filter(p => p.inStock);
const withTax = inStockProducts.map(p => ({ ...p, priceWithTax: p.price * 1.1 }));
const sorted = withTax.sort((a, b) => a.priceWithTax - b.priceWithTax);

Arrays return करने वाले methods (map, filter) fluently chain हो सकते हैं, पर chain का हर method अलग से array iterate करता है - लंबी chains बड़े datasets पर readability और performance को नुकसान पहुंचा सकती हैं।

const products = [
    { name: 'Laptop', price: 1200, category: 'electronics', inStock: true },
    { name: 'Phone', price: 800, category: 'electronics', inStock: false },
    { name: 'Desk', price: 300, category: 'furniture', inStock: true }
];

// filter -> map -> sort chain करना
const result = products
    .filter(p => p.inStock)
    .map(p => ({ ...p, priceWithTax: p.price * 1.1 }))
    .sort((a, b) => a.priceWithTax - b.priceWithTax);

console.log(result);

// हर chained method नया array बनाता है और पूरा iterate करता है
// 10,000 items वाले array में 5 chains = 50,000 iterations possible

// बड़े datasets में single reduce pass बेहतर हो सकता है
const largeArray = new Array(100000).fill(0).map((_, i) => i);
const singlePass = largeArray.reduce((acc, n) => {
    if (n % 2 === 0) {
        const doubled = n * 2;
        if (doubled > 1000) acc.push(doubled);
    }
    return acc;
}, []);
// तीन के बजाय एक ही iteration

// Readability guideline: 2-3 methods chain करना अक्सर एक बड़े reduce से साफ है;
// उससे ज़्यादा हो तो named intermediate variables में तोड़ें
const inStockProducts = products.filter(p => p.inStock);
const withTax = inStockProducts.map(p => ({ ...p, priceWithTax: p.price * 1.1 }));

Was this answer clear?

Subjects

Related questions