What is the purpose of the `map()` function for arrays?

Imagine you have an array of user objects fetched from an API, and you need to render a list of just their full names in a React component. How would you use map to transform this data, and what happens if one of the user objects is missing a first or last name?

I often see developers use map when they actually want to loop through an array and update a database or trigger an alert. Why is using map for side effects like that considered a bad practice, and what should you use instead?

We have a bug in our legacy codebase where a developer used map to update a list of products, but the original product list in our state store is also changing unexpectedly. What do you think is happening under the hood, and how would you fix it to ensure immutability?

You're building a search autocomplete feature. You need to take an array of raw API results, filter out inactive items, and then format the remaining items for the UI. A teammate suggests chaining .filter().map(). What are the performance and readability tradeoffs of this approach, especially if the dataset grows?

We are processing a stream of telemetry data in a Node.js microservice. The array can contain up to 100,000 items per batch. If we use standard array methods like map and filter chained together, we run into memory spikes. How would you optimize this transformation pipeline to avoid creating multiple intermediate arrays?

In a large React application, we have a highly dynamic dashboard where a parent component maps over a large array of configuration objects to render child widgets. We're seeing frame drops on re-renders. How would you diagnose if the map operation itself or the resulting component re-renders are the bottleneck, and how would you optimize it?

Our engineering org is migrating a massive legacy codebase from lodash-heavy utility patterns to native ES6+ array methods. Some teams are concerned about performance regressions on older mobile devices, while others worry about browser compatibility and polyfill bloat. How would you design the migration strategy and establish linting/architectural guidelines around array transformations?

We are designing a core shared-state library for our company's micro-frontend architecture. We need to expose data transformation utilities to consumer teams that guarantee immutability without sacrificing rendering performance across different framework wrappers. How would you architect this, and where do native array methods like map fit into your reactivity model?