Guide Through JavaScript Array Methods - 01

Array.map() method.

The map method will take a callback function as an argument and called for every element in the given array. The map function will return a new array by the result of the calling function. The map function will not modify the original array. Hence it is an immutable function.

Let’s start with a simple example to illustrate all the above points.

const fruits = ["apple", "Avocado", "Banana", "Mango", "Pineapple", "Orange"];

const result = fruits.map((fruit) => {
  return `I have a ${fruit} now.`;
});

console.log(result);
/* [
  'I have a apple now.',
  'I have a Avocado now.',
  'I have a Banana now.',
  'I have a Mango now.',
  'I have a Pineapple now.',
  'I have a Orange now.'
]*/

console.log(fruits);
//  [ 'apple', 'Avocado', 'Banana', 'Mango', 'Pineapple', 'Orange' ]

Now we clear that callback function takes the current processed value as the first argument and processed it and return the new value. Then it will push to the new array.

Take a min and imagine what if we didn’t pass any parameter to map function? fruits.map(()=> {})

There are few optional parameters in the callback function. I want to mention that it takes the 2nd argument in the callback function is the index of the current called value from the array.

const fruits = ["apple", "Avocado", "Banana", "Mango", "Pineapple", "Orange"];
const result = fruits.map((fruit, index) => {
  const fruitObj = {};
  fruitObj[index] = fruit;
  return fruitObj;
});
console.log(result);
// Output
/*[
  { '0': 'apple' },
  { '1': 'Avocado' },
  { '2': 'Banana' },
  { '3': 'Mango' },
  { '4': 'Pineapple' },
  { '5': 'Orange' }
]
*/

---

Array.reduce() method

As the method name spoke, this method will reduce to one value. More specifically this reduce method will execute the reducer function that we provide as the callback function and call on each element. Finally, reduce function will return a single value.

This reducer function needs 2 parameters. Within the reducer function we need to return the value to use as the accumulator in the next iteration (Unless it will return the undefined). The first time, array’s first element is the accumulator and 2nd element is the current value. (This will only happen at the first time execution of the reducer function and if didn’t provide a initialValue)

Let’s see it from an example.

const marks = [23, 65, 12, 87, 34];

const reducer = (acc, val) => {
  console.log(`current acc: ${acc}`);
  console.log(`current val: ${val}`);
  return val;
};

const result = marks.reduce(reducer);

// const result = fruits.reduce(reducer);

console.log(result);

/*
current acc: 23
current val: 65
current acc: 65
current val: 12
current acc: 12
current val: 87
current acc: 87
current val: 34
34
*/
// because finally it return the last value of the array

We saw how it works. Let’s see a meaningful example. If we want to get the summation of this array we can change the reducer function as below.

const reducer = (acc, val) => {
  return val + acc;
};

But it is good to know that there are 2 other optional parameters accept by the reducer function. Those are currentIndex and the array.

The reduce function takes 2nd argument that reducer function and initialValue.

const marks = [23, 65, 12, 87, 34];
const reducer = (acc, val) => {
  console.log(`current acc: ${acc}`);
  console.log(`current val: ${val}`);
  return val + acc;
};

// array.reduce(reducerFunction, initialValue)
const result = marks.reduce(reducer, 30);
console.log(result);
// result
/*current acc: 30
current val: 23
current acc: 53
current val: 65
current acc: 118
current val: 12
current acc: 130
current val: 87
current acc: 217
current val: 34
251
*/

Special Scenarios:

Scenario 01:

The array has only one value.

No initial value in reduce function.

Result: solo value in the array will return.

const marks = [30];
const result = marks.reduce((acc, val) => {});
console.log(result);
// 30

Scenario 02:

The array doesn’t have any value.

There is an initial value for reduce function

Result: Initial value will return.

const marks = [];

const result = marks.reduce((acc, val) => {}, 30);

console.log(result);
// 30

Above both scenarios, the callback function will not be called.

If both not provided(array with values and initial value) and then we get a TypeError.

---

I will wrap-up this article from here. If you have anything to ask regarding this please leave a comment here. Also, I wrote this according to my understanding. So if any point is wrong, don’t hesitate to correct me. I really appreciate you.

That’s for today friends. See you soon. Thank you.

Reference:

MDN JavaScript Array

Main image credit