The map() and filter() methods in JavaScript are powerful array methods that allow you to manipulate and transform arrays in functional programming styles. Both methods return a new array based on the results of applying a callback function to each element of the original array.

1. Array map() Method

• Purpose: The map() method creates a new array by applying a provided function to each element of the original array. The callback function is called once for each element, and the result of the callback function is used to populate the new array.

• Syntax: array.map(callbackFunction(currentValue, index, array))

• Parameters:

  • currentValue: The current element being processed.
  • index (optional): The index of the current element.
  • array (optional): The array on which map() was called.

• Returns: A new array containing the results of applying the callback function to each element of the original array.

Example:

let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = numbers.map(function(number) {
    return number * number;
});

console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]

• Explanation: In this example, map() is used to create a new array where each element is the square of the corresponding element in the original numbers array. The original array is not modified.

• Arrow Function Syntax: You can also use an arrow function for a more concise syntax.

Example:

let squaredNumbers = numbers.map(number => number * number);

console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]

2. Array filter() Method

• Purpose: The filter() method creates a new array with all elements that pass the test implemented by the provided function. The callback function should return true for elements to be included in the new array and false for elements to be excluded.

• Syntax: array.filter(callbackFunction(currentValue, index, array))

• Parameters:

  • currentValue: The current element being processed.
  • index (optional): The index of the current element.
  • array (optional): The array on which filter() was called.

• Returns: A new array containing only the elements that pass the test defined in the callback function.

Example:

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
    return number % 2 === 0;
});

console.log(evenNumbers); // Output: [2, 4]

• Explanation: In this example, filter() is used to create a new array containing only the even numbers from the original numbers array. The original array is not modified.

• Arrow Function Syntax: Similar to map(), you can use an arrow function for a shorter syntax.

Example:

let evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers); // Output: [2, 4]

Differences and Use Cases:

• map():

  • Use When: You need to transform every element in an array, returning a new array of the same length as the original.
  • Example Use Cases: Converting an array of numbers to their squares, mapping an array of objects to an array of property values, converting an array of strings to uppercase.

• filter():

  • Use When: You need to filter elements based on a condition, returning a new array that may be shorter (or potentially empty) compared to the original.
  • Example Use Cases: Finding all even numbers in an array, filtering out objects that don't meet certain criteria, selecting strings that start with a particular letter.

Combined Example:

You can combine map() and filter() in a chain to first filter an array and then transform the filtered elements.

let numbers = [1, 2, 3, 4, 5];
let squaredEvenNumbers = numbers
    .filter(number => number % 2 === 0) // Filter for even numbers
    .map(number => number * number);    // Square the filtered numbers

console.log(squaredEvenNumbers); // Output: [4, 16]

• Explanation: In this example, filter() is first used to select only the even numbers, and then map() is applied to square those even numbers. The result is a new array containing the squares of the even numbers from the original array.

Summary:

• map(): Transforms each element of an array and returns a new array of the same length.
• filter(): Selects elements based on a condition and returns a new array with the elements that satisfy the condition.