arr = cars; //cars = ['Bentley', 'Mustang'] arr = Date.now; arr = aFunction;
Besides primitive data types, you can also store objects, functions, even arrays inside of an Array.
Okay, before we get into the code, let me first explain to you with the help of this beautiful picture, how these methods work, and to be honest, this image explains it all.
Input: Array of Squares.
Output: Array of Circles.
Process: We are mapping or transforming the array elements into something different based on our desired output. Do notice that the length of the array remains the same. The 3 squares are transformed into 3 circles.
Input: Array of 1 Red and 2 Blue Squares.
Output: Array of Squares(with only those elements that satisfy the filtering criterion).
Process: We want all the blue squares. So, we filter out the red ones to get the two blue squares as the output. Do notice that the output is still an array.
Input: Differently-shaped elements.
Output: One element(calculated based on the reducer function).
Process: Reduces all the shapes to form one single element. All the 3 differently-shaped elements are joined, finally.
Input: Array of 1 Red, 1 Green, and 1 Blue Square.
Output: One element(that satisfies the condition).
Process: We want to find a green-colored square. Do notice that the output is a single element, in this case, a green square.
Now let's dive into the code.
const myArray = [1, 2, 3, 4]; const product = (x, y) => x * y; //Reducer Function const result = arr.reduce(product, 1); //result = 24
.reduce() method accepts a reducer function as its first parameter and an initial value as the second parameter, and it gives us a single(reduced) value in the end.
In the abovementioned example, we want to find the product of the given array by multiplying all the elements present in the array. We start with an initial value of 1, then traverse the array and keep on multiplying the next element as we see it, 1*1*2*3*4 = 24.
const myArray = [1, 2, 3, 4]; const isEven = x => x % 2 === 0; //Matcher Function const result = myArray.find(isEven); //result = 2
.find() method accepts a matcher function and returns the first element for which this matcher function returns true. Here, therefore, only the first even number found in the entire array is returned, which happens to be 2(even though there was another even number present, namely, 4).
Reduce and Find, might or might not return a scenario depending on what is stored inside the array. However, you can assume that they will return us an element in the array and not the actual array.
const myArray = [1, 2, 3, 4]; const square = x => x * x; //Mapping Function const result = myArray.map(square); //result = [1, 4, 9, 16]
.map() method accepts a mapping function and applies this function to each of the elements present in the original array. As a result, a new array(with the same length as the original array) is returned with the resultant values, in this case, the square of each element.
const myArray = [1, 2, 3, 4]; const isEven = x => x % 2 === 0; //Filter Function const result = myArray.filter(isEven); // result = [2, 4]
.filter() method accepts a filter function and creates a new array by applying the filter function to each of the element of the original array and filtering out all the elements that do not satisfy the filter function, keeping only the elements in the new array those return true for the filter function. In this case, a new array is returned with all the even numbers found in the original array, namely, 2 and 4.
Map and Filter, always return a new array, therefore, your original array will never be corrupted.