How to make a callback without return value work within higher order function

Question

The code I'm posting works, but it does not follow the directions of my prompt which says

"Create a function forEach which takes an array and a callback, and runs the callback on each element of the array. forEach does not return anything. Please do not use the native forEach or map method."

-- It says it does not return anything in forEach. I was only able to get it to work with returning. Can somebody help me understand how not to use return on forEach function while maintaining the functionality?

// Challenge 1
function subtractTwo(num) {
    return num - 2;  
}

function map(array, callback) {
    var newArray = [];
  for (var i = 0; i < array.length; i++) {
    newArray.push(callback(array[i]));
  }
  return newArray;
}

console.log(map([3, 4, 5], subtractTwo));


// Challenge 2
function forEach(array, callback) {
    var newArray = []
  for (var i = 0; i < array.length; i++) {
    newArray.push(callback(array[i]));
  }
  return newArray
}

// Challenge 3
function mapWith(array, callback) {
    var newArray = [];
  return forEach(array, callback);
}
console.log(mapWith([3, 4, 5], subtractTwo));

Here is the third challenge prompt

Now let's rebuild map from challenge 1 as mapWith. This time instead of using a for loop, you're going to use the forEach function that you created in challenge 2.

Answer 1

The language of the prompt is very important here:

Create a function forEach which takes an array and a callback, and runs the callback on each element of the array. forEach does not return anything .

It's asking you to call a function on each element of the array, but it isn't asking you to return an array. Unlike map , forEach only calls the provided callback on each item, but it does not return an array.

From MDN : "The forEach() method executes a provided function once for each array element." For instance, consider this code using the native forEach:

var foo = [1, 2, 3];

function logger(item) {
  console.log(item);
}

foo.forEach(logger);

>1
>2
>3

Furthermore, if we try to log what is returned from forEach , we get the following:

console.log(foo.forEach(logger));
>1
>2
>3
>undefined // The returned value

Your implementation is close, but it looks like you may have tried to include map functionality (returning a new array) in your forEach function. You'll need to modify it so that it only calls the function for each item but does not create or return a new array.

In order to create your mapWith function, you may need an intermediate function that handles creating the new array, but that would be separate from both callback and forEach .

Answer 2

Per that prompt, you're almost there, but you're doing too much. You only need to do exactly as the prompt says, run the callback for each element, and nothing else. Don't try to use the result of the callback, and don't create a new array.

So the second challenge implementation might look like:

// Challenge 2
function forEach(array, callback) {
  // Just run the callback for each element. Do not save the results
  // anywhere, do not return anything.
  for (var i = 0; i < array.length; i++) {
    callback(array[i]);
  }
}

---

Using that forEach , you'll have to change the mapWith function a bit to work with it. In mapWith , instead of passing the callback directly to forEach , wrap it inside another function where you can capture the result from the original callback and push it into the new array.

So something like:

// Challenge 3
function mapWith(array, callback) {
    var newArray = [];

    // Recall that forEach does not return anything, so you don't
    // want your return statement here. Instead, wrap the orignal
    // callback so that you can take each result and put it into
    // your "newArray" variable.
    forEach(array, function(element) {
       // Push the result of original callback into the new array:
       newArray.push(callback(element))
    });

    // Make sure to return this mapped array.
    return newArray;
}