The Javascript filter method and the includes method

The filter method is a built-in JavaScript function that is available for arrays. It allows you to create a new array with elements that pass a certain condition specified by a callback function.

It iterates through each element of the array and executes the callback function on each element.

• If the callback function returns true for a particular element, that element will be included in the new filtered array.

• If the callback function returns false, the element will be excluded from the new array.

const listNumber1 = [1, 2, 3, 4, 5, 6, 7, 8];

Now, we have the filter method being applied to the array listNumber1. The callback function being used is as follows:

(i) => {
  return i > 5;
}

This callback function takes one argument i, which represents each element of the array listNumber1 during the iteration. The function returns true if the element i is greater than 5, and false otherwise.

The filter method is now applied to the array listNumber1 using the provided callback function:

listNumber1.filter((i) => {
  return i > 5;
});

The filter method will iterate through each element of the array listNumber1, and for each element, it will call the callback function with that element.
After iterating through all elements, the filter method returns a new array containing the elements that passed the condition specified by the callback function.

In this case, the resulting filtered array will be: [6, 7, 8]

The filter method was used on the array listNumber1 with a callback function that checks if each element is greater than 5. The result is a new array [6, 7, 8], containing only the elements that satisfy the condition (elements greater than 5).

Understanding the includes function

The includes function is another built-in JavaScript method that is available for arrays. It allows you to check whether an array includes a specific value or not. The function returns true if the value is found in the array and false otherwise.

Let's remind ourselves of the provided array:

const listNumber1 = [1, 2, 3, 4, 5, 6, 7, 8];

Now, let's apply the includes function to the array listNumber1 to check if it includes the value 3:

console.log( listNumber1.includes(3) );

The includes function will search for the value 3 in the array listNumber1.

The function starts at the first element of the array, which is 1. It compares 1 with the value we are looking for, which is 3. Since 1 is not equal to 3, the function moves to the next element. It compares 2 with 3, and again, they are not equal, so it continues to the next element.

It compares 3 with 3, and this time they are equal! So the function immediately returns true because the array includes the value 3. The output of the first console.log statement will be: true

Let's apply the includes function to the array listNumber1 to check if it includes the value 10:

console.log( listNumber1.includes(10) );

The includes function will search for the value 10 in the array listNumber1.

The output of the second console.log statement will be: false

To summarize, the includes function is used to check whether a value exists in an array. It returns true if the value is found and false if it is not found. In the case of the provided array listNumber1, the output of console.log( listNumber1.includes(3) ); will be true, and the output of console.log( listNumber1.includes(10) ); will be false.

Understanding filter method used in conjunction with the includes function

Let's explain the filter method used in conjunction with the includes function to find the intersection of two arrays, represented by listNumber1 and listNumber2. Figure of the intersection of part A and part B

We've already covered the filter method and the includes function in previous explanations, but let's recap:

The filter method creates a new array with elements that pass a certain condition specified by a callback function. The includes function checks whether a specific value exists in an array and returns true if the value is found, and false otherwise.

Let's take a look at the provided arrays:

const listNumber1 = [1, 2, 3, 4, 5, 6, 7, 8];
const listNumber2 = [5, 6, 7, 8, 9, 10];

Now, the filter method is used on the array listNumber1 with the provided callback function:

listNumber1.filter( (i) => {
  return listNumber2.includes( i );
} );

The filter method will iterate through each element of the array listNumber1, and for each element, it will call the callback function with that element.

After iterating through all elements, the filter method returns a new array containing the elements that exist in both listNumber1 and listNumber2, which is the intersection of the two arrays.

The resulting filtered array will be:

[1, 5, 6, 7, 8]

To conclude, the filter method, when used with the includes function as shown, is an effective way to find the intersection of two arrays (elements that exist in both arrays). In this case, the resulting filtered array [1, 5, 6, 7, 8] represents the intersection of listNumber1 and listNumber2.

Difference

Figure of the difference of part A and part B

he filter method used with the includes function to find the difference between two arrays, represented by listNumber1 and listNumber2.

const listNumber1 = [1, 2, 3, 4, 5, 6, 7, 8];
const listNumber2 = [5, 6, 7, 8, 9, 10];

listNumber1.filter( (i) => {
  return !listNumber2.includes( i );
} );

The resulting filtered array will be: [1, 2, 3, 4]

The only difference is the use of the logical NOT (!) operator before the listNumber2.includes(i) condition in the callback function for finding the difference.
This small change inverts the logic, making it return true for elements that are not present in listNumber2 (i.e., unique to listNumber1).

So, while the code structures are almost identical, the ! in the second approach completely changes the meaning of the condition. This shows how a simple modification can make a significant difference in the outcome when working with array operations like finding intersections and differences.