Скачать или смотреть How to Get Excluded Elements with JavaScript's Filter

Learn how to effectively retrieve `excluded elements` when using JavaScript's filter method. This guide breaks down the process in a clear and simple manner.
---
This video is based on the question https://stackoverflow.com/q/68606172/ asked by the user 'Rewind' ( https://stackoverflow.com/u/886773/ ) and on the answer https://stackoverflow.com/a/68606238/ provided by the user 'Guerric P' ( https://stackoverflow.com/u/3738171/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to get the excluded elements when using javascript's filter

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding JavaScript's Filter Method

JavaScript offers the filter method as a powerful tool to create a new array with elements that pass a specific test defined by a function. However, many developers find themselves needing to identify the elements that do not pass this test. In this guide, we’ll explore how you can extract these excluded elements without repeating the filtering process unnecessarily.

The Challenge

When using the filter method, you retrieve an array of elements that satisfy a given condition. For example:

[[See Video to Reveal this Text or Code Snippet]]

This code will give you goodElements as an array containing falsy values ([0, false, "", []]). But how can you effectively retrieve badElements — those elements that did not pass the filter — without having to run a new filtering function all over again?

Solution Overview

Utilizing reduce() for a Two-Array Split

One efficient solution is to use the reduce() method. This allows us to iterate through the original array and construct two separate arrays: one for the elements that pass the test (goodElements) and one for those that do not (badElements).

Here's how it works:

Initialize two arrays: Start with an empty array for passing elements (truthies) and another for failing elements (falsies).

Iterate using reduce(): For each element in the original array, check if it passes the test. Depending on the result, push the element into the appropriate array.

Code Example

Here’s a complete example implementing this approach:

[[See Video to Reveal this Text or Code Snippet]]

Explanation

Initial Arrays: The code begins with two empty arrays [[], []] for storing truthy and falsy values.

Conditional Logic: For each element (cur) in arr, if fn(cur) returns true (meaning it is a falsy value), the element is added to the falsies array. If it returns false, the element goes into the truthies array.

Final Output: Once the reduction is complete, you have both goodElements and badElements neatly sorted.

Conclusion

By leveraging reduce(), you can seamlessly split your arrays based on a condition without re-filtering the data. This technique not only saves processing time but also provides a clean and efficient solution to isolate excluded elements. Whether you need to assess data quality or implement filtering logic in your applications, this method enhances your JavaScript toolkit.

So, the next time you're faced with the need to retrieve both passing and failing elements from an array, do not hesitate to utilize this approach!