Guide Through JavaScript Array Methods - 01
Tags: javascript, array
Published: 2021-02-14 18:26:43

### 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.

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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`.

```javascript
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.

```javascript
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.

```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)

Main image [credit](https://www.pexels.com/photo/view-of-rice-terraces-1447092/)