How to filter an array with another array

[ksirgey]

I have done a bit of research on this topic, but I am still confused about the best way to filter an array with another array. There are two scenarios I would like to understand better. (1) The second array remains intact after filtering the first array.

For example:
Input:
array1 = [a, b, c, d, e]
array2 = [b, d, f]

Output:
array1 = [a, c, e]
array2 = [b, d, f]

(2) The second array loses the elements that it used to filter the first array.

For example:
Input:
array1 = [a, b, c, d, e]
array2 = [b, d, f]

Output:
array1 = [a, c, e]
array2 = [f]

Thank you for the help.

[Swoodend]

I dont want to give you a full solution but for #2 part one you can do something like this

function blah(){
  return array1.filter((char) => {
    return array2.indexOf(char) === -1;
  });
});

Array.indexOf() will return the index of the item in the array if it is present. If it is not it will return -1.

Also make sure you understand what filter is doing… Array.filter() returns a new array containing all the items that evaluate to “true” based on some criteria (ie whatever your callback function specifies). So in my example the code “says” Filter array1 down to only contain the values that are not in array2 etc.

[ksirgey]

In the second solution you gave for example two, does false trigger filter to remove 'b' and 'd' from array2?

[ksirgey]

@rmdawson71

Actually, because !array1.includes(item) evaluates to true in the filter, ‘b’, and ‘d’ are removed from array2. (The first example of solution #2 does the same thing). This statement is basically asking Is item NOT in array1? Because item is representative of array2’s elements, ‘f’ is the only element of array1 not in array2, so ‘f’ is the only thing assigned to array2 in the item in this example array2.
The second example of the second solution appears more complicated until you understand how:

tenary operators work
how filter works
how splice works

For now, think of this 2nd example as a more advanced solution that you will learn to understand as you master how to use these above concepts/functions.

Let me make sure I understand the code (approximately). I have yet to acquire the proper lingo for discussing it.

var array1 = ['a', 'b', 'c', 'd', 'e'];
var array2 = ['b', 'd', 'f'];

array2 = array2.filter(function(item) {
  return !array1.includes(item) ? true : array1.splice(array1.indexOf(item),1) && false;
});

console.log(array1); // [ 'a', 'c', 'e' ]
console.log(array2); // [ 'f' ]

is given the following conditions:

1. If the item in array2 is not already in array1, the function should return ‘true’ and array2 is left unmodified.
2. If the item in array2 is already in array1, the function should return ‘false’ and the index of the item in array1 should be located and the item removed.

In this case, two of the items in array2 (‘b’ and ‘d’) are already in array1, so for them ‘false’ is returned and the accompanying action is carried out (‘b’ and ‘d’ are spliced out of array1). Item ‘f’ is not already in array1, so ‘true’ is returned and no action is carried out.

[ksirgey]

I am playing around with the function to understand how ternary operators work. Can you correct me where I am wrong?

Example 1:

var array1 = ['a', 'b', 'c', 'd', 'e'];
var array2 = ['b', 'd', 'f'];

array2 = array2.filter(function(item) {
  return !array1.includes(item) ? true : false;
});

console.log(array1); // [ 'a', 'b', 'c', 'd', 'e' ]
console.log(array2); // [ 'f' ]

Conditions:

1. If array1 does not include an item from array2, the function returns true, and a new array containing the item is created. This new array is assigned to array2. In the example above, when we call array2, we now get [ 'f' ] and not ['b', 'd', 'f'].
2. If array1 already includes an item from array2, the function returns false. In this case, there is no accompanying action to be carried out.

Example 2:

var array1 = ['a', 'b', 'c', 'd', 'e'];
var array2 = ['b', 'd', 'f'];

array2 = array2.filter(function(item) {
  return array1.includes(item) ? true : false;
});

console.log(array1); // [ 'a', 'b', 'c', 'd', 'e' ]
console.log(array2); // [ 'b', 'd' ]

Conditions:

1. If array1 includes an item from array2, the function returns true, and a new array containing the item is created. This new array is assigned to array2. In the example above, when we call array2, we now get [ 'b', 'd' ] instead of ['b', 'd', 'f'].
2. If array1 does not include an item from array2, the function returns false. In this example, no accompanying action is carried out. Aha!

[ksirgey]

I just read your last message. Let me modify the last examples I gave.

[ksirgey]

@rmdawson71

var array1 = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];
var array2 = [‘b’, ‘d’, ‘f’];

array2 = array2.filter(function(item) {
if (!array1.includes(item)) {
return true; // this part is creating [‘f’] which will be re-assigned to array2 when finished
}
else {
array1.splice(array1.indexOf(item),1); // this part is modifying array1 to be [‘a’,‘c’,‘e’]
return false;
}
});

console.log(array1); // [ ‘a’, ‘c’, ‘e’ ]
console.log(array2); // [ ‘f’ ]

Okay.

  if (!array1.includes(item)) {
    return true; // this part is creating ['f'] which will be re-assigned to array2 when finished
  }

Got it.

  else {
    array1.splice(array1.indexOf(item),1); // this part is modifying array1 to be ['a','c','e']
    return false;

Got it.
It makes more sense now.

[camperextraordinaire]

Would you mind marking this thread Solved?