Array Map Transformation
Transform array elements using the map method.
Array mapping with map() is essential for data transformation in modern JavaScript. This exercise teaches you functional programming principles and how to elegantly transform data structures.
📚 Concepts & Theory
The map() method is one of JavaScript's most powerful array methods, used to transform each element in an array. It's a cornerstone of functional programming in JavaScript.
Understanding map():
Basic Concept:
map() creates a new array by applying a function to each element of an existing array.
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
// Result: [2, 4, 6, 8]How map() Works:
- Iterates through each element in the array
- Calls the callback function with each element
- Takes the return value from the callback
- Builds a new array with those return values
- Returns the new array
// map - transforms and returns new array
const squares = numbers.map(n => n * n);
// forEach - just iterates, returns undefined
numbers.forEach(n => console.log(n * n));
Common Transformations:
1. Mathematical Operations:
[1, 2, 3].map(n => n * 2); // [2, 4, 6]
[1, 2, 3].map(n => n 2); // [1, 4, 9]2. String Transformations:
["a", "b", "c"].map(s => s.toUpperCase()); // ["A", "B", "C"]
3. Object Property Extraction:
const users = [{name: "Alice"}, {name: "Bob"}];
const names = users.map(user => user.name); // ["Alice", "Bob"]
4. Chaining Operations:**
const result = numbers
.map(n => n * 2)
.filter(n => n > 5)
.reduce((sum, n) => sum + n, 0);Map with Index and Array:
arr.map((element, index, array) => {
// element: current item
// index: current position
// array: original array
});Key Characteristics:
- Creates new array (immutability)
- Same length as original array
- Each element is transformed
- Original array unchanged
🎯 Your Challenge
Write doubleValues that doubles each element.
📝 Starter Code
function doubleValues(arr) {
// Your code here
}
console.log(doubleValues([1, 2, 3]));- Use the map() method to transform array elements
- map() takes a callback function as an argument
- The callback function is applied to each element
- Whatever the callback returns becomes the new element
- map() returns a new array of the same length
Solution
function doubleValues(arr) {
return arr.map(num => num * 2);
}
console.log(doubleValues([1, 2, 3]));Explanation
This solution uses the map() method to transform each element in the array by applying the provided callback function. map() automatically iterates through all elements, calls the function for each one, and constructs a new array from the return values. For example, if the callback doubles each number, map() creates a new array with all values doubled. The original array remains unchanged (immutability). This is more concise and expressive than a for loop. Time complexity: O(n). Space complexity: O(n) for the new array.
⚠️ Common Mistakes to Avoid
- Using map() when you don't need the returned array (use forEach instead)
- Not returning a value from the map callback
- Trying to modify the original array with map
- Confusing map() with filter() (map transforms, filter selects)
- Forgetting that map() always returns an array of the same length