JavaScript Interview: Write a custom reduce function
Tags: javascript, career, webdev, programming
Published: 2021-05-20 14:42:32

## What is this series about?
Hello all! Welcome to the JavaScript interview questions series. In each post of this series, I will talk about the questions (specific to JavaScript) I faced in my recent interviews. This series will be helpful for you if you are preparing for JavaScript interviews or just started to deep dive into JavaScript and want to test your knowledge.

## Post 3: Write your own custom reduce function
In today’s modern web development, a lot of us work on pretty modern tech stacks like React or Vue, or Angular. But in web development, a lot of projects today still function on legacy code and need active work. This is why, writing custom functions or polyfills for new JavaScript features is a popular interview question. Also, writing our own version of something that we use every day makes the concept easy and quick to grasp.

In one of my interviews, the interviewer asked me to write a custom function for `Array.reduce()`. Before diving further into this post, we must understand what `Array.reduce()` does. Here is a [great post on MDN blog](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) on what reduce does.

Now that we are all set, let us dive into writing our own reduce function. 💻 ⚔️

## Question
Write a custom function like `Array.reduce()`.
```javascript
// Existing Array.reduce() function
const array = [10, 20, 30, 40];
const reducer = (accumulator, currentValue) => {
  return accumulator + currentValue;
}
const result = array.reduce(reducer);
console.log(result);
// expected output: 100


// Your code goes here
function customReduce(arr, reducer, initialValue = 0) {
  // Write Code
}

const customResult = customReduce(array, reducer, 0);
console.log(customResult);
```

*Before diving into the solution, I highly suggest that you try to solve this problem on your own. Here is a hint: Think about what reducer expects and what does it return?*

## Solution
As always, we are going to start with the least and do the obvious stuff first. So we can see that our custom function needs to return the final value.
```javascript
function customReduce(arr, reducer, initialValue = 0) {
  var value;

  return value;
}
```

Further, for each array element, our `customReducer` function needs to call the `reducer` function (passed in as a parameter). The reducer function expects following parameters:
* The return value from previous execution.
* Current array element
* Current index
* The array itself
```javascript
function customReduce(arr, reducer, initialValue = 0) {
  var value;
  for (let i = 0; i < arr.length; i++) {
    value = reducer(value, arr[i], i, arr);
  }
    
  return value;
}
```

Now you might be wondering what will happen to the `intialValue`? Well, we want `intialValue` to be the value passed to the first execution of the `reducer` function. We can do that by assigning that `intialValue` to `value`. So the final version of the `customReduce` function will look like this.

*Edit:
As rightfully pointed by @kennethlum , if the `initialValue` is not passed, we should consider first element of the array as the `initialValue`.*
```javascript
function customReduce(arr, reducer, initialValue = null) {
  if (initialValue === null) {
    initialValue = arr[0];
  }

  var value = initialValue;
  for (let i = 0; i < arr.length; i++) {
    value = reducer(value, arr[i], i, arr);
  }
    
  return value
}
```

## Conclusion
Yay!! This looks like a working solution for now. I would love to know what approaches you can come up with for this problem. Do post your suggestions in the comments. And for more interesting questions like this, keep following this series. Until then, Happy Coding!!