Array Functios

Question 1

What are the benefits of using array methods (forEach, map, etc.) over loops?

Answer 1

• they’re more meaningful and expressive
• the code is more declarative – it means that I define what I want to reach instead of describing the way how to do it
• using loops we need to care about the number of elements, starting point, and the iteration process
• A programming language is low level when its programs require attention to the irrelevant.” — Alan Perlis

Question 2

How does .map() work?

Answer 2

1. .map is applied to an array
2. It accepts one parameter: a transformation function
3. It returns a new array containing the same number of elements as the original array but with the transformation applied
4. The original array is not modified
5. We always receive a new array, so we need to assign the result to a variable

const strings = ['42', '23', '15', '2']; 
const numbers = strings.map(s => Number(s));             // [42, 23, 15, 2] (notice the lack of quote ')

Question 3

How does .filter() work?

Answer 3

1. The filter function is applied to an array
2. It accepts one parameter: a condition function (also called a predicate or callback function)
3. It returns a new array with only the elements for which the condition is true
4. It always returns a new array, and the original array is not modified
5. Filter can be used on arrays with elements of any type

       const numbers = [4, 2, 1, 3, 5, 8];
       const evens = numbers.filter(num => num % 2 === 0);          // [4, 2, 8]

6. The following example does not assign the result, so it is not used and is ignored.
   numbers. filter(num => num % 2 === 0);

Question 4

How does .reduce() work?

Answer 4

1. reduce accepts two parameters: a reducer function and an initial value
2. It is named ‘reduce’ because it reduces a collection of elements to a single value by applying the reducer function to each element
3. The initial value is used in the first iteration, as the accumulated value
4. Iterating the array, at each step, the reducer function is called
5. The reducer function receives the accumulated value and the current element of the collection and combines them in some way
6. Any sort of collection can be reduced
7. If you don’t supply an initial value, the first element of the collection will be used
8. Reduce can return any type of data - array, boolean, string, etc.

const numbers = [2,5,7];
const sum = numbers.reduce((sum, number) => sum + number, 0);

const animals = ['cat', 'dog'];
const joined = animals.reduce((res, animal) => res + ', ' + animal));               // no initial value

const joined = animals.reduce((res, animal) => res + ‘, ‘ + animal, ‘’); // with initial value

Question 5

How can implement filter by using reduce?

Answer 5

const filter = (array = [], filterFn) => {
  const result = array.reduce((acc, el, index, arr) => {
    if (filterFn(el, index, arr)) {
      acc.push(el);
    }
    return acc;
  }, []);

return result;
};

const filtered = filter([2, 6, 5, 8, 10], (el) => el > 5); 
console.log(filtered);                                                        // [ 6, 8, 10 ]

Question 6

How can implement mapby using reduce?

Answer 6

const map = (array = [], mapFn) => {
  const result = array.reduce((acc, el, index, arr) => {
    acc.push(mapFn(el, index, arr));
    return acc;
  }, []);

return result;
};

console.log(map([1, 2, 3], (el) => el * 2)); // [ 2, 4, 6 ]