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.... ? developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Taplar
– Taplar, Commented Aug 25, 2020 at 20:13
Yes, I understand, however I am implementing my own for the purposes of learning. — Greg Iven
– Greg Iven, Commented Aug 25, 2020 at 20:13
newMap(arr, plusTwo()) <= take the () off of the plusTwo — Taplar
– Taplar, Commented Aug 25, 2020 at 20:14
Does this answer your question? Why does click event handler fire immediately upon page load? — Taplar
– Taplar, Commented Aug 25, 2020 at 20:15
@Taplar, great the error went away, but now it returns a function object. I'll keep fooling around, thanks. — Greg Iven
– Greg Iven, Commented Aug 25, 2020 at 20:16

Snow · Accepted Answer · 2020-08-25 20:14:57Z

1

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));

answered Aug 25, 2020 at 20:14

Snow

4,1463 gold badges16 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Steven Tsao · Accepted Answer · 2020-08-25 20:26:08Z

0

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)

answered Aug 25, 2020 at 20:26

Steven Tsao

1001 silver badge10 bronze badges

Comments

tevemadar · Accepted Answer · 2020-08-25 20:30:42Z

0

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());

edited Aug 25, 2020 at 20:30

answered Aug 25, 2020 at 20:24

tevemadar

13.3k3 gold badges27 silver badges63 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related