Top 5 JavaScript Interview Problems (With Real-World Solutions)

Chapter 5: Array Manipulation with Map, Filter, Reduce (and Brutal Challenges)

🧠 Why This Matters

Map, filter, and reduce aren’t just array methods — they’re the backbone of clean, functional, interview-grade JavaScript.

In interviews, you’ll face questions like:

• “Rewrite this loop using .map()”
• “Use .reduce() to flatten or group data”
• “Filter out duplicates or nulls from this dataset”

These methods test:

• Your grip on immutable logic
• Your ability to chain transformations
• Your readiness for real-world frontend problems

Let’s master the syntax — then destroy some real challenges.

⚡ 1. .map() — Transforming Each Element

const nums = [1, 2, 3];

const doubled = nums.map(n => n * 2); // [2, 4, 6]

• Returns new arra
• Same length
• Pure function (no mutation)

⚡ 2. .filter() — Keep Only What You Want

const words = ["hello", "", "world", null];

const valid = words.filter(Boolean); // ["hello", "world"]

• Returns array with only truthy (or matching) values

⚡ 3. .reduce() — The Beast

const sum = [1, 2, 3].reduce((acc, val) => acc + val, 0); // 6

• Accumulator pattern
• Use it for summing, flattening, grouping, counting, etc.

🚀 Real Interview Challenge #1: Remove Duplicates from Array

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

// Output: [1, 2, 3, 4, 5]

✅ Solution using .filter():

const unique = arr.filter((val, i, self) => self.indexOf(val) === i);

🚀 Real Interview Challenge #2: Flatten Nested Array with Reduce

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

// Output: [1, 2, 3, 4, 5]

✅ Solution:

const flat = nested.reduce((acc, val) => acc.concat(val), []);

✅ Or in ES6:

const flat = nested.flat(); // simple, clean

🚀 Real Interview Challenge #3: Count Occurrences

const votes = ['yes', 'no', 'yes', 'yes', 'no'];

// Output: { yes: 3, no: 2 }

✅ Solution:

const count = votes.reduce((acc, vote) => {

  acc[vote] = (acc[vote] || 0) + 1;

  return acc;

}, {});

🚀 Real Interview Challenge #4: Group by Property

const users = [

  { name: "A", role: "admin" },

  { name: "B", role: "user" },

  { name: "C", role: "admin" }

];

// Output:

{

  admin: [{ name: "A", role: "admin" }, { name: "C", role: "admin" }],

  user: [{ name: "B", role: "user" }]

}

✅ Solution:

const grouped = users.reduce((acc, user) => {

  (acc[user.role] = acc[user.role] || []).push(user);

  return acc;

}, {});

🚀 Real Interview Challenge #5: Map + Filter Chain

const items = [

  { name: "Apple", price: 100 },

  { name: "Banana", price: 50 },

  { name: "Avocado", price: 200 }

];

// Get names of items priced above 100

// Output: ["Avocado"]

✅ Solution:

const result = items

  .filter(item => item.price > 100)

  .map(item => item.name);

💣 Hardcore Bonus: Reduce to Create a New Array Structure

Prompt: Convert this flat array to a keyed object.

const arr = [

  { id: 1, name: "JS" },

  { id: 2, name: "Python" }

];

// Output:

{

  1: { id: 1, name: "JS" },

  2: { id: 2, name: "Python" }

}

✅ Solution:

const byId = arr.reduce((acc, item) => {

  acc[item.id] = item;

  return acc;

}, {});

🔁 Loop Rewrite Challenge

Prompt: Convert this loop to .map() and .filter():

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

const result = [];

for (let i = 0; i < data.length; i++) {

  if (data[i] % 2 === 0) {

    result.push(data[i] * 2);

  }

}

✅ Rewrite:

const result = data.filter(n => n % 2 === 0).map(n => n * 2);

✅ Summary