Arrow function with forEach--Functional programming

Hi all - I have been able to resolve the exercise for “Implement the filter method on a prototype” with the for loop and a forEach, but i was wondering if there’s a way to make the function in forEach an arrow function. I can’t seem to figure it out .

this.forEach(function (a) {
  if (callback(a)){
     newArray.push(a);
  }
});

Is it possible to make the above function an arrow function?

As always, thanks for your guidance!

  **full code here**

// The global variable
var s = [23, 65, 98, 5];

Array.prototype.myFilter = function(callback) {
// Only change code below this line
var newArray = [];
/* START FOR LOOP
for(var i=0; i< this.length; i++){
  if(callback(this[i])){
    newArray.push(this[i]);
  }
} END FOR LOOP
*/
//START forEach
this.forEach(function (a) {
  if (callback(a)){
     newArray.push(a);
  }
});
 //END  forEach
 
// ARROW FUNCTION NOT WORKING
//this.forEach(if (callback(a)) => newArray.push(a));

// Only change code above this line
return newArray;
};

var new_s = s.myFilter(function(item) {
return item % 2 === 1;
});
console.log(new_s);
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36

Challenge: Implement the filter Method on a Prototype

Link to the challenge:

Short answer? Absolutely:

this.forEach( (a) => {
  if (callback(a)){
     newArray.push(a);
  }
});

Because the arrow function doesn’t refer to this internally, the function format will be pretty similar. Of course, if you wanted to make it really tiny and do it as a one-liner, simply to see if it’s do-able, here’s how I make it:

this.forEach( (a) => newArray = callback(a) 
    ? [...newArray, a]
    : newArray 
);

Basically, if the callback returns true, we spread the newArray and a into a new array and assign that to newArray, effectively adding the new item to that array. If it returns false, we simply assign newArray to itself, effectively doing squat.

To see this one working: https://replit.com/@TobiasParent/veronicarbulusArrowFuncQuestion#index.js

1 Like

Thank you so much. Yes, I was hoping to reduce it to a one-liner just see if possible. This is great!!! I must admit, i don’t think i would’ve cracked it […newArray, a] throws me off a bit. Is this the same as pushing “a” to newArray? I understand "…newArray’ is to copy all items in that array.

1 Like

if the condition is true, it will return an array which is basically newArray with the a element in its end.
You could even omit the arguments parentheses if they consist of one argument, which is the case, so you can do a=> //function body, if your intention is to be as concise as possible

2 Likes

[...newArray, a] is very similar to the push, yes. The difference is that push mutates The original array, while this syntax creates an entirely new one each time. It isn’t strictly necessary to use it, i just like the clean look.

[...newArray] would let us make a shallow copy of newArray, by spreading the top-level members of that array as values within the [ ]. And putting the a in there, we can end up with a functional version of push.

We could also do a functional version of unshift, by changing it a little: [a, ...newArray] - with this, the new value is placed at the start, and all of newArray is spread behind it.

2 Likes

You are the best! Thank you so much for this!!!

2 Likes

thanks a bunch for the advice. I appreciate it!

2 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.