1.22.j — Practice Problems

// Task 1: Passed
const passed = students.filter(s => s.marks >= 60);
console.log(passed);
// [Alice(92), Carol(78), Dave(88), Frank(96), Grace(62)]

// Task 2: A grade
const aGrade = students.filter(s => s.marks >= 90);
console.log(aGrade);
// [Alice(92), Frank(96)]

// Task 3: Names of failed students
const failedNames = students
  .filter(s => s.marks < 60)
  .map(s => s.name);
console.log(failedNames);
// ["Bob", "Eve"]

Explanation: filter selects elements by condition. Chaining filter then map is the standard pattern: narrow the set, then transform.

// Task 1: Full names
const fullNames = users.map(u => `${u.firstName} ${u.lastName}`);
console.log(fullNames);
// ["Alice Smith", "Bob Jones", "Carol White", "Dave Brown"]

// Task 2: Display strings
const display = users.map(u => `${u.firstName} ${u.lastName} (${u.age})`);
console.log(display);
// ["Alice Smith (28)", "Bob Jones (34)", "Carol White (22)", "Dave Brown (45)"]

// Task 3: New objects
const transformed = users.map(u => ({
  fullName: `${u.firstName} ${u.lastName}`,
  isAdult: u.age >= 18,
}));
console.log(transformed);
// [
//   { fullName: "Alice Smith", isAdult: true },
//   { fullName: "Bob Jones", isAdult: true },
//   ...
// ]

Explanation: map is the go-to for transforming each element. Note the ({ }) wrapping for returning objects from arrow functions.

// Task 1: Total cost
const totalCost = cart.reduce((sum, item) => sum + item.price * item.qty, 0);
console.log(totalCost.toFixed(2)); // "1489.92"

// Task 2: Most expensive line item
const lineTotals = cart.map(item => ({
  name: item.name,
  total: item.price * item.qty,
}));
const mostExpensive = lineTotals.reduce(
  (max, item) => item.total > max.total ? item : max,
  lineTotals[0]
);
console.log(mostExpensive);
// { name: "Laptop", total: 999.99 }

// Task 3: Items with line total > $100
const expensiveItems = cart
  .map(item => ({ ...item, total: item.price * item.qty }))
  .filter(item => item.total > 100)
  .map(item => `${item.name}: $${item.total.toFixed(2)}`);
console.log(expensiveItems);
// ["Laptop: $999.99", "Monitor: $699.98"]

Explanation: reduce is the natural choice for summing. For finding the max, reduce with a comparison works well. The chain in Task 3 shows the typical map→filter→map pattern.

// Task 1: Group by category
const grouped = products.reduce((groups, product) => {
  const key = product.category;
  if (!groups[key]) groups[key] = [];
  groups[key].push(product);
  return groups;
}, {});
console.log(grouped);

// Task 2: Count per category
const counts = products.reduce((acc, product) => {
  acc[product.category] = (acc[product.category] || 0) + 1;
  return acc;
}, {});
console.log(counts);
// { electronics: 3, clothing: 3, books: 2 }

// Task 3: Total price per category
const totals = products.reduce((acc, product) => {
  acc[product.category] = (acc[product.category] || 0) + product.price;
  return acc;
}, {});
console.log(totals);
// { electronics: 2197, clothing: 97, books: 27 }

Explanation: reduce to an object is the standard grouping pattern. The (acc[key] || 0) + value idiom handles the case where the key does not exist yet.

// Task 1: Count votes
const voteCounts = votes.reduce((acc, name) => {
  acc[name] = (acc[name] || 0) + 1;
  return acc;
}, {});
console.log(voteCounts);
// { Alice: 4, Bob: 4, Carol: 2 }

// Task 2: Find winner
const winner = Object.entries(voteCounts).reduce(
  (max, [name, count]) => count > max.count ? { name, count } : max,
  { name: "", count: 0 }
);
console.log(winner);
// { name: "Alice", count: 4 }
// (Alice and Bob are tied — Alice appears first due to iteration order)

// Task 3: Sort by votes descending
const ranked = Object.entries(voteCounts)
  .sort(([, a], [, b]) => b - a)
  .map(([name, count]) => `${name}: ${count} votes`);
console.log(ranked);
// ["Alice: 4 votes", "Bob: 4 votes", "Carol: 2 votes"]

Explanation: The frequency counter pattern (reduce to object) is one of the most important patterns in JavaScript. Object.entries() converts the object to [key, value] pairs that can be sorted.

// Task 1: Active employees sorted by salary, formatted
const roster = employees
  .filter(e => e.active)
  .sort((a, b) => b.salary - a.salary)
  .map(e => `${e.name} (${e.department}) — $${e.salary.toLocaleString()}`);
console.log(roster);
// [
//   "Carol (Engineering) — $105,000",
//   "Alice (Engineering) — $95,000",
//   "Frank (Engineering) — $92,000",
//   "Dave (Engineering) — $88,000",
//   "Grace (HR) — $78,000",
//   "Eve (Marketing) — $72,000",
// ]

// Task 2: Average salary of active engineers
const activeEngineers = employees.filter(
  e => e.active && e.department === "Engineering"
);
const avgSalary = activeEngineers.reduce((sum, e) => sum + e.salary, 0)
  / activeEngineers.length;
console.log(avgSalary); // 95000

// Task 3: Department summary
const summary = employees
  .filter(e => e.active)
  .reduce((acc, e) => {
    if (!acc[e.department]) {
      acc[e.department] = { count: 0, totalSalary: 0 };
    }
    acc[e.department].count++;
    acc[e.department].totalSalary += e.salary;
    return acc;
  }, {});
console.log(summary);
// {
//   Engineering: { count: 4, totalSalary: 380000 },
//   Marketing: { count: 1, totalSalary: 72000 },
//   HR: { count: 1, totalSalary: 78000 },
// }

Explanation: Task 1 demonstrates the classic filter→sort→map pipeline. Task 2 shows how to compute an average using reduce and length. Task 3 demonstrates a reduce-to-object pattern for aggregation.

// Task 1: Flatten
const allTags = tagGroups.flat();
console.log(allTags);
// ["javascript", "react", "node", "python", "django", "react", ...]

// Task 2: Unique tags
const uniqueTags = [...new Set(allTags)];
console.log(uniqueTags);
// ["javascript", "react", "node", "python", "django", "vue", "flask", "next"]

// Task 3: Frequency sorted
const tagFrequency = allTags
  .reduce((acc, tag) => {
    acc[tag] = (acc[tag] || 0) + 1;
    return acc;
  }, {});

const sortedTags = Object.entries(tagFrequency)
  .sort(([, a], [, b]) => b - a)
  .map(([tag, count]) => `${tag}: ${count}`);

console.log(sortedTags);
// ["javascript: 3", "react: 3", "node: 2", "python: 2", "django: 1", "vue: 1", "flask: 1", "next: 1"]

Explanation: flat() handles the flattening. new Set is the most efficient way to deduplicate. The frequency counter + sort pattern combines reduce and sort.

// Task 1: Search by name
function searchProducts(query) {
  const lower = query.toLowerCase();
  return products.filter(p => p.name.toLowerCase().includes(lower));
}
console.log(searchProducts("book"));
// [JavaScript Book, Python Book]

// Task 2: Multi-filter
function filterProducts({ category, minPrice, maxPrice, minRating } = {}) {
  return products.filter(p => {
    if (category && p.category !== category) return false;
    if (minPrice !== undefined && p.price < minPrice) return false;
    if (maxPrice !== undefined && p.price > maxPrice) return false;
    if (minRating !== undefined && p.rating < minRating) return false;
    return true;
  });
}
console.log(filterProducts({ category: "electronics", maxPrice: 50 }));
// [Wireless Mouse, USB Keyboard]

// Task 3: Combined pipeline
function findProducts(query, filters = {}, sortBy = "rating") {
  const lower = query.toLowerCase();
  return products
    .filter(p => p.name.toLowerCase().includes(lower))
    .filter(p => {
      if (filters.category && p.category !== filters.category) return false;
      if (filters.minPrice !== undefined && p.price < filters.minPrice) return false;
      if (filters.maxPrice !== undefined && p.price > filters.maxPrice) return false;
      if (filters.minRating !== undefined && p.rating < filters.minRating) return false;
      return true;
    })
    .sort((a, b) => b[sortBy] - a[sortBy])
    .map(p => `${p.name} — $${p.price} (${p.rating} stars)`);
}

console.log(findProducts("", { minRating: 4.2 }));
// [
//   "Running Shoes — $89.99 (4.8 stars)",
//   "JavaScript Book — $39.99 (4.7 stars)",
//   "Wireless Mouse — $29.99 (4.5 stars)",
//   "Python Book — $34.99 (4.3 stars)",
//   "USB Keyboard — $49.99 (4.2 stars)",
// ]

Explanation: Separate filter calls make each concern clear. The combined pipeline shows a real-world pattern for search + filter + sort in a UI.

// Custom map
function myMap(arr, callback) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    result.push(callback(arr[i], i, arr));
  }
  return result;
}

// Custom filter
function myFilter(arr, callback) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    if (callback(arr[i], i, arr)) {
      result.push(arr[i]);
    }
  }
  return result;
}

// Custom reduce
function myReduce(arr, callback, initialValue) {
  let accumulator;
  let startIndex;
  if (initialValue !== undefined) {
    accumulator = initialValue;
    startIndex = 0;
  } else {
    if (arr.length === 0) throw new TypeError("Reduce of empty array with no initial value");
    accumulator = arr[0];
    startIndex = 1;
  }
  for (let i = startIndex; i < arr.length; i++) {
    accumulator = callback(accumulator, arr[i], i, arr);
  }
  return accumulator;
}

// Test
console.log(myMap([1, 2, 3], n => n * 2));        // [2, 4, 6]
console.log(myFilter([1, 2, 3, 4], n => n > 2));  // [3, 4]
console.log(myReduce([1, 2, 3], (a, b) => a + b, 0)); // 6

Explanation: Understanding the internals helps you reason about edge cases and performance. Note how reduce handles the initialValue parameter.