JavaScript - implementing map function with reduce, error when passing function as argument

Question

I am trying to implement a map function in javascript using reduce.

function newMap(inputArr, fn) {
    return inputArr.reduce((mapItem, elem) => 
        mapItem = (fn(elem)), [])
}

function plusTwo(num) {
    return num + 2;
}

newMap(arr, plusTwo())

console.log(newMap)

The error output is: "TypeError: fn is not a function"

So my question is -- what am I doing wrong that the reduce function signature or the function being passed is throwing an error?

P.S. -- still learning javascript, if someone could help edit the title for more clarity, that'd be much appreciated.

Thanks

There is already a `map()` function.... ? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map — Taplar, Aug 25 '20 at 20:13
Yes, I understand, however I am implementing my own for the purposes of learning. — Greg Iven, Aug 25 '20 at 20:13
`newMap(arr, plusTwo())` <= take the () off of the `plusTwo` — Taplar, Aug 25 '20 at 20:14
Does this answer your question? [Why does click event handler fire immediately upon page load?](https://stackoverflow.com/questions/7102413/why-does-click-event-handler-fire-immediately-upon-page-load) — Taplar, Aug 25 '20 at 20:15
@Taplar, great the error went away, but now it returns a function object. I'll keep fooling around, thanks. — Greg Iven, Aug 25 '20 at 20:16
Your reduce logic should be pushing the result to the to the mapItem array, not assigning the single result to it. — Taplar, Aug 25 '20 at 20:17

score 1 · Accepted Answer · answered Aug 25 '20 at 20:14

You're calling plusTwo when passing it, but you need to only call plusTwo inside the reduce callback. Inside the reduce callback, add the call of fn(elem) onto the accumulator array.

function newMap(inputArr, fn) {
    return inputArr.reduce((accum, item) => [...accum, fn(item)], []);
}

function plusTwo(num) {
    return num + 2;
}

const arr = [1, 2, 3];
console.log(newMap(arr, plusTwo));

tevemadar · Answer 2 · 2020-08-25T20:30:42.070

The callback you pass to reduce is expected to return something. Plus what others commented, you want to pass plusTwo, not plusTwo(), which is a NaN (the result of undefined+2):

function newMap(inputArr, fn) {
    return inputArr.reduce((accum, item) => {
        accum.push(fn(item));
        return accum;
    }, []);
}

function plusTwo(num) {
    return num + 2;
}

const arr = [1, 2, 3];
console.log(newMap(arr, plusTwo));

console.log("plusTwo:", plusTwo);
console.log("plusTwo():", plusTwo());

score 0 · Answer 3 · answered Aug 25 '20 at 20:26

mapItem is the reference to the resulting array. You need to push the resulting value to it instead of reassigning it in every iteration, ie mapItem.push(fn(elem))
Pass in plusTwo as a function instead of invoking it plusTwo(), this is why you were getting the fn is not a function error
Print the result of newMap instead of newMap itself

function newMap(inputArr, fn) {
  return inputArr.reduce((mapItem, elem) => {
      mapItem.push(fn(elem))
      return mapItem;
  }, [])
}

function plusTwo(num) {
    return num + 2;
}

let result = newMap([1,2,3], plusTwo)

console.log(result)

JavaScript - implementing map function with reduce, error when passing function as argument

3 Answers3