FAQ: Code Challenges: Intermediate JavaScript - justCoolStuff()

Hi,
I’ve just completed this using a for loop which worked fine to return an array with common elements in. However, I was not able to move to the next challenge without using .filter.

const justCoolStuff = (firstArray, secondArray) => firstArray.filter(item => secondArray.includes(item))

This was the code given in the solution. Can someone explain this code to me - it looks so simple!
My code was quite long to achieve the same results.
Thanks
Lisa

First, let’s review predicate functions

const isPositive = x => x > 0;

The above function returns a boolean. That’s what predicate functions do. They test the argument against a set condition, in this case, is x greater than zero (which would make it positive)?

Now given an array of values,

arr = [1, -1, 2, -2, 3, -3, 4, -4]

we can filter the positive values…

console.log(arr.filter(isPositive))    //  [1, 2, 3, 4]

Syntax

array.iterator(callback)

console.log(justCoolStuff(myStuff, coolStuff))

//return: [ ‘fruit-by-the-foot’, ‘skateboards’, ‘my room’ ]

Please explain why the code filtered out these 3 items from the 2 arrays. I imagine it has something to do with the .filter() method but I am unable to wrap my head around it.

Only array items that exist in both lists are returned by the filter. The predicate illustrates that… arr2.inlcudes(x).

1 Like

I did not expect secondArray to be in the scope of “item => secondArray.includes(item)”?

const justCoolStuff = (firstArray, secondArray) => firstArray.filter(item => secondArray.includes(item))

The following code was my first attempt at the challenge that is returning an empty array. I understand that using the .includes method is a far simpler way of achieving the task, but I just cannot figure out why this code is returning an empty array. I’m clearly not understanding something fundamental. I have checked logging to the console word1 and word2 within the function so I don’t think this is an issue with scope.

const justCoolStuff = (arr1, arr2) => {
  return arr1.filter(word1 => {
    arr2.forEach(word2 => {
      if (word2 === word1) {
        return true;
      } else {
        return false;
      }
    });
  });
};
1 Like

Array.forEach() is not a predicate function, which is the intended argument of the Array.filter() method.

Thanks for your feedback, however I don’t know what a predicate function is. Are you saying that you can’t nest a built-in method into Array.filter?

Not, “can’t” as much as it is impractical and perhaps even convoluted. Consider that filter() is really just a sophisticated form of, if, only applied to a complete data set, not just a single value.

A predicate function is one which predicates some form of assertion or affirmation of a state.

[dataSet] => iterate and store only values that meet with a qualifying state

For that we write a simple conditional that will yield either true or false.

// predicate functions return a boolean
const isOdd = x => x % 2 !== 0;
const isEven = x => x % 2 === 0;

const a = Array(20).fill(1);
const b = a.map(x => Math.floor(Math.random() * 12 + x));

// using predicate functions as callbacks
const c = b.filter(isOdd)
const d = b.filter(isEven)

console.log(a)
console.log(b)
console.log(c)
console.log(d)
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ]
[ 6, 4, 7, 12, 5, 11, 12, 4, 4, 8, 8, 10, 6, 4, 3, 10, 7, 9, 2, 4 ]
[ 7, 5, 11, 3, 7, 9 ]
[ 6, 4, 12, 12, 4, 4, 8, 8, 10, 6, 4, 10, 2, 4 ]

Hi there, what mtf said is correct, you need to us the ‘return’ statement with the curly braces, otherwise, your first example is a 1-line function using the arrow notation - meaning that the first one is correct and the 2nd one can also be correct, if you write ‘return’ in the body function. I wrote mine this way and it passed (proud to say, figured it without hints):

// Write your code here:

// This function uses the filter() method on the first array to extrac the similar items from the second array

const justCoolStuff = (arr1, arr2) => {

return arr1.filter(item => arr2.includes(item));

}

// These two arrays are being used as arguments for the justCoolStuff function to have their similar items extracted

const coolStuff = [‘gameboys’, ‘skateboards’, ‘backwards hats’, ‘fruit-by-the-foot’, ‘pogs’, ‘my room’, ‘temporary tattoos’];

const myStuff = [ ‘rules’, ‘fruit-by-the-foot’, ‘wedgies’, ‘sweaters’, ‘skateboards’, ‘family-night’, ‘my room’, ‘braces’, ‘the information superhighway’];

// This print statement passes on the two arrays as arguments to the justCoolStuff function’s parameters and uses the function call to print the similar items from the two arrays

console.log(justCoolStuff(myStuff, coolStuff))

// Should print [ ‘fruit-by-the-foot’, ‘skateboards’, ‘my room’ ]

When I write my code with arrow functions, the code returns with no errors.
When I use non ES6 syntax, my console shows no erros, just as an empty array ----> [ ]

const justCoolStuff = function (arr1, arr2) {
return arr1.filter(function(data){
arr2.includes(data)
});
};

Can anyone explain why I recieve an empty array return?

Because there is no return in the callback function.

1 Like

Thank you, I saw an earlier post that you had answered the same question for too :slight_smile:

1 Like

Does the essentially mean undefined then?

No. It means an empty array. An array is defined by its structure, which is a type of object. It’s contents are undefined, though.

Been taking the course and every time I have trouble all I need to do is find your explanations. You’re awesome, thank you very much!

1 Like

A post was split to a new topic: How does item fit in exactly in the code