One of my favorite JavaScript one-liners: .filter(Boolean) Filtering out falsy values from an array meant chaining conditions and hoping I hadn't missed an edge case. When you pass Boolean as a callback to .filter(), JavaScript calls Boolean(item) on every element. Anything falsy - null, undefined, 0, "", false, NaN - gets removed. What you're left with is a clean array of only meaningful values. It's not just about writing less code. It's about communicating intent clearly. This pattern shines especially in real-world scenarios: cleaning up API responses, processing user input, or combining .map() and .filter() to transform and sanitize data in a single chain. #JavaScript #WebDevelopment #SoftwareEngineering #CleanCode #Frontend #Programming #JS #CodeQuality #TechTips #Developer --- I post about web engineering, front-end and soft skills in development. Follow me here: Irene Tomaini
It is best practice to filter before mapping to avoid unnecessary processing
Nice tip! Just be careful because the first filter is not equivalent to the second. The first one only checks if “item” is not null while the second filter will remove all falsy values; this includes null but also false, undefined, 0, and others.
And what do we have in the end? An array of boolean values with the name prices? Actualy your way of filter is correct but it not always best practis cause the first way is more readable for many other developers who will use the code.
Map + filter is antipattern. Use reduce.
I, personally, prefer to use reduce instead of map+filter. const updatedProducts = products.reduce((buffer, product) => { if (!product.inStock) { return buffer; } return [...buffer, { ...product, price: product.price * 0.9, }]; }, []);
And when you use Array methods like reduce, filter, etc don't forget that they are 25-80 times slower than good old "for / while" loops. These built-in Array methods are applicable only for very small arrays.
Use reduce, and just do not add to accumulator value that does to meat the condition
please dont use obscure language features
products.filter(p => p.inStock).map(p => p.price * 0.9)
I would strongly discourage people from using this. As stated by Doug already, code functionality is not the same. And this alone should be enough to not use it. As Mohamed already mentioned, it's better to filter before, not after. The readability of the "After" is questionable. In the "Before" it is very clear what is a condition of the filtering. It is also much easier to add any other condition in the future. The decision to return null in map callback is also questionable. You basically doing that only to use it in a filter method that comes next. And if you would need to get rid of this filter method in the future, you would need to refactor mapping as well. Or suffer bugs if you forget to do it. And finally, it is not a one-liner. For true one liner you would need to use .flatMap() like so: const prices = products.flatMap((inStock, price) => inStock ? [price * .9] : []); Also you could use reduce, as Mykhailo suggested. It would be better then what you're promoting.