Write Higher Order Arrow Functions yy

JavaScript
1

Tell us what’s happening:

please what is wrong with this code

Your code so far


const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];
const squareList = (arr) => {
  "use strict";
  // change code below this line
   const squaredIntegers = arr.filter((num) => Number.isInteger(num));
  
 const squaredIntegers = squaredIntegers.map((square) => square*square);
  // change code above this line
  return squaredIntegers;
};
// test your code
const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/65.0.3325.181 Chrome/65.0.3325.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/write-higher-order-arrow-functions

2

Well without the context i am not too sure but you are assigning multiple things to the constant squaredIntegers, which does not seem right

3

Tell us what’s happening:

i cannot still pass this lesson with this

Your code so far


const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];
const squareList = (arr) => {
  "use strict";
  // change code below this line
const squaredIntegers = arr.filter((num) => Number.isInteger(num));
  const squaredIntegers=squaredIntegers.map(square =>square*square);
  
  
  // change code above this line
  return squaredIntegers;
};
// test your code
const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/65.0.3325.181 Chrome/65.0.3325.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/write-higher-order-arrow-functions

4

Try console.log()ing your code and you might just find out your mistake.

5

You can’t reassign a new value to a constant, like you’re doing by assigning squaredIntegers.map(...) to squaredIntegers.

However you can chain filter and map calls, like arr.filter(...).map(...), and assign the whole thing to squaredIntegers

2 Likes
6

you don’t put a filter condition over there
it will ben like
return num>0 && num%1==0;

7

This will help guide you.

const squaredIntegers = arr.filter(...).map(...);
8

Two issues:

  1. You’re assigning the const “squaredIntegers” twice.

  2. The directions says to square positive integers. (Your code only accounts for integers).

9

I’m on this right now and I am really mad because I do not feel prepared for this at all. I have done all of the previous lessons and now I’m on this one and am completely stuck to the point where I don’t even know where to start. I looked at the get help and completed code and am blown away by how unprepared I am after doing all of the prior lessons. I literally am unable to complete this. Can someone explain in detail how to do this. Where is num coming from? What level of mathematics do I have to be at to understand the functions used? I’m really mad right now.

10

You don’t need mathematics here, no more that what you have needed till now at least, it is more an issue that you have never met the higher order functions before. Those methods will be explained later. In the forum there are various discussions about how bad placed this part of the curriculum is.

Methods like filter, map and reduce takes a callback. The method iterates over each element in the array passing each one, one by one, to the function
So, in the case of the filter method for example
arr.filter((e) => {/* return true or false */})
In this case e is one element from the array, the current element that is being evaluated. (it is a way to not use loops to iterate over the elements of the array)

It can also be written like this not using ES6:
arr.filter(function(e) {/* return true or false */})

Some methods have two arguments in the function, some need to return a Boolean, some can return something else but to know that you need to read the documentation, I have written that comment here because that is what the filter method needs.

The challenge uses num, I have used e (for element), it is a parameter that you can name as you prefer.

More infos:

If the callback function is made of just a return statement
Example: arr.filter((e) => {return e%5 === 0;})
You can simplify the code by making the return keyword implicit not using the parenthesis {}
Like this: arr.filter((e) => e%5 ===0)

If you have only one parameter you can omit the parenthesis around it
Like this: arr.filter(e => e%5 === 0)
(The two things can be used separately)

1 Like
11

Okay so you’re saying the num variable is declared right after the filter function is called. That would have been helpful to know. Another issues I have is that there is another arrow syntax after the first condition after && operator just before the map function call. Why is that there and what is map? is that second arrow basically like another : in the more simple syntax ex:

(conditional) ? return statement : (conditional) ? return statement

where the question mark would be the arrow syntax?

12

I still don’t fully understand. Is the initial declaration of num basically saying for num(which is just the index of the array) in array, do this?

13

When you write a function

const func = function(num) {...}

num is the parameter of the function, not a declared variable
What filter do is practically this:

for (let i = 0; i < arr.length; i++) {
  if ( func(arr[i]) === true) {
   // keep it
   } else {
      // discard
    }
}

num is the current element of the array that is being evaluated because that is what the filter method pass in the function

Other high order functions do different things, but they still evaluate each element in the array one by one and do something with it.

(conditional) ? return statement : (conditional) ? return statement

This seems to be a ternary Operator (or two nested ternary operators actually)
(evaluate this) ? (If it is true do this) : (else do this)

It is like writing

if (evaluate this)  {
  //   if it is true do this
 } else {
 // else do this 
}
14

Hello Frank,

Getting frustrated is the life of a programmer. I program all the time and I still find moments where I want to beat my head against a wall. Sometimes is best to just walk away for a little bit and then come back.

As for your questions, let me try to clarify some things for you.

Arrow functions and ternary statements are two completely different things. Let me explain:

function addThree(num){
     return num + 3;
}
const addThree = (num) => num + 3;
const addThree = (num) => { num + 3; };

All three of these above are the same thing.

[2, 4, 6, 8].filter(function(num){
    return num > 5;
});
[2, 4, 6, 8].filter((num => num > 5));

Both of these above are the same thing.

if (a > b){
    answer = "a is greater than b";
}
else {
    answer = "b is greater than a";
}
answer = (a > b) ? "a is greater than b" : "b is greater than a";

both of the above are the same thing.

Now to explain what map / filter is.

you may have seen
var arr = [2, 4.4, 5, 1.2, -3];
arr.filter((num) => Number.isInteger(num));

Let’s simplify this to make it easier to read.
[2, 4.4, 5, 1.2, -3].filter((num) => Number.isInteger(num));

All i did was replaced arr with the actual array.

.filter() returns a new array, and the values that go into that new array must result to true. If that value is false, then it is ignored.

So with: [2, 4.4, 5, 1.2, -3].filter((num) => Number.isInteger(num));

the first thing that happens is

num = 2; (first element in array). then num = 4.4 (second element in array) then num = 5 and so on… until all the elements have been used once.

the => functions as described before would look like this with es5
[2, 4.4, 5, 1.2, -3].filter(function(num){ return Number.isInteger(num); });

So what is happening here is filter is returning Number.isInteger(2); // on first iteration. Which is true.
since it is true that number is returned into a new array.

With the 2nd number (4.4) the return of Number.isInteger(4.4) is false, so that value is ignored.

so with var integerOnly = [2, 4.4, 5, 1.2, -3].filter((num) => Number.isInteger(num)); // integerOnly now becomes [2, 5, -3];

Map works similar to filter,. except that it doesn’t care if the return value is true or false. It just builds a new array based on what you return.

var plusOne = [1, 3, 5, 7].map((num) => num + 1));
this returns a new array with values [2, 4, 6, 8];

Hope this helps!

15

Okay so the arrow notation is basically saying return then? The num in the completed code is a parameter of the function and not a variable thats declared. As for the logic of finding an even integer I don’t know. I thought you could find an even integer by taking the integer modulus 2 and if it = 0 then its even.

  const squaredIntegers = arr.filter( (num) => num % 2 == 0);

But then how do you call another function on the same line after it finds the even integers. It won’t allow another arrow to Math.pow the number after it finds an even integer.

16

filter() will not make you change the elements of the array, as it expects just a true or false from the function.

So arr.filter(…) is now an array that have only positive integers

You can chain a map() method

For example

let a = [2,1,3,9].map(num => Math.pow(num, 2)
console.log(a) // [4,1,9,81]

The map() method takes each element in the array, changes it, and returns an array of the results

The good thing with methods is that you can chain them! So you can write arr.filter(...).map(...) and the map method will be applied to the filtered array!

17

If you need a more complex function as callback of the method you need to write (for example for map)

arr.map(e => { /* your function here */})

In this case though your function will need to return something (as in, you need a return statement inside it)

[1,3,6,2,9].map(num => {
   if (num % 3 === 0) { num = num/3 }
   if (num % 2 === 0) { num = num/2 }
   return num;
})

This function is too complex to just write without the {} parenthesis

18

I don’t think I understand what you’re trying to tell me here. I finished the line of code to complete the lesson but I still don’t understand why I needed 2 arrows. One initially for the filter method, then one for the map method.

  const squaredIntegers = arr.filter( (num) => num % 2 == 0 && num > 0 ).map( (num) => Math.pow(num, 2) );
19

The arrow is substituting the function keyword

Written in ES5
arr.filter(function(num) {return num % 2 == 0 && num > 0}).map(function(num) {return Math.pow(num, 2)})

You need two different functions, because each method needs its own callback function.

The arrow is an other syntax to write that, and as such, an arrow for each function

20

Well I think you just showed me that I don’t understand callback functions. rip