Map, Reduce and Filter operations in Arrays – Javascript

1. Map

• JavaScript’s map() function is a higher-order function that lets you iterate over each element of an array and generating a new array with the results of calling the function on each element. The original array is not modified by the map() technique. Rather, it returns a new array containing results of applying the specified function to every element.
  
  Why to use map()
  • Immutability : map() creates a new array without modifying the original one, ensuring data integrity and minimizing side effects
  • Readability : Its concise syntax and intuitive functionality make code more readable and maintainable.
  • Flexibility : With the ability to apply custom transformation functions, map() empowers developers to tailor array operations to their specific needs.
    
• Syntax :
  
  
  
• Basic uses :
  
  
  The map() method applies the function number => number * 2 to each element of the array
  
• Returning Modified Data :
  
  
  can return modified versions of the elements in any form
  
• Using Index and array :
  
  
  The map() method provides the index and the entire array as additional arguments to the callback function, which can be useful in certain cases.
  
• Difference from forEach() :
  
  map() returns a new array with the transformed values, while forEach() executes a function on each element without returning anything
  
• Handling Objects inside arrays :
  
  
  If you have an array of objects, you can use map() to access and modify specific properties.
  
• Chaining with other methods :
  
  
  

2. Reduce

• JavaScript reduce() method is a powerful tool for processing arrays and is used to “reduce” an array into a single value by iterating over each element and applying a function
  
  How it Works
  • reduce() executes the callback function on each element of the array, starting with the first or second element depending on whether an initialValue is provided.
  • The callback function takes the accumulator and current value as inputs and returns a new accumulator value.
  • This continues for every element, and the final accumulator is returned as the result of the reduce() method.
    
• Syntax :
  
  
  
  • array: The original array on which reduce() is called.callback: A function that is executed on each element of the array.
  • accumulator: The accumulated result from the previous iteration (or the initial value for the first iteration).
  • currentValue: The current element being processed.
  • index (optional): The index of the current element.
  • array (optional): The original array being processed.
  • initialValue (optional but recommended): The initial value for the accumulator, which is used in the first iteration.
    
• Summing an array:
  
  Without initial value,
  
  If no initialValue is provided, reduce() will use the first element of the array as the initial accumulator value and start processing from the second element.
  
  With initial value,
  
  Initial value of the accumulator is 0
  
• Finding maximum in an array :
  
  
  
• Flattening a Nested Array :
  
  
  The accumulator starts as an empty array, and each subarray is concatenated to it.
  
• Grouping data by property :
  
  
  
• Counting Occurrences :
  
  
  
• Initial Value Edge Case :
  
  
  If initialValue is not provided and the array is empty, reduce() will throw an error.
  
• Building a Lookup Table :
  
  
  
• Chaining With other methods :
  
  

3. Filter

• The JavaScript filter() method is a powerful tool that allows you to create a new array with all the elements from the original array that pass a certain test or condition. It’s used to filter out elements that don’t match a condition, leaving only the elements that do.
  
  How it Works
  • filter() executes the callback function on each element of the array.
  • If the callback function returns true, the element is included in the new array.
  • If it returns false, the element is excluded.
  • The original array is not modified, and a new array is returned with the elements that passed the test.
    
• Syntax :
  
  
  
  • array: The original array on which filter() is called.
  • callback: A function that is executed for each element in the array.
  • element: The current element being processed.
  • index (optional): The index of the current element.
  • array (optional): The original array being processed.
  • thisArg (optional): A value to use as this when executing the callback function.
    
• Filtering Numbers :
  
  
  Elements greater than 3 in numbers array are included in the new array
  
• Filtering strings :
  
  
  You can also use filter() to remove certain strings from an array.
  In this case, the filter() method returns an array containing only the fruits that have the letter 'h' in them.
  
• Using index parameters :
  
  
  In this example, we filter out only the numbers that are at even indices (0, 2, 4).
  
• Removing Falsy Values :
  
  
  We can use filter() to remove null, undefined, 0, false, NaN, or empty strings from an array.
  
• Filtering objects from arrays :
  
  Filtering by property,
  
  we filter the people array to only include objects where the age is more than 16.
  
• Filtering Nested Objects :
  
  You can use filter() to manage more complex data structures, like arrays of nested objects, by accessing deeper properties.
  
  
• Using thisArg:
  
  The thisArg parameter allows you to pass a value to be used as this when executing the callback function. This can be useful in some contexts, such as when working in a class or using external objects.