Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
for in vs reduce vs pick
(version: 0)
Comparing performance of:
for in vs reduce vs pick
Created:
6 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
Tests:
for in
const TEXT_PROPS_TO_BLOCK = [ 'display', 'textColor', 'verticalAlign', 'className', 'style', ]; const propsToTest = { "aria-label": "ordered list", "data-test": "something", "textColor": "foo", "className": "bar" } let allowedProps = {}; for (let p in propsToTest) { if (!TEXT_PROPS_TO_BLOCK.includes(p)) { allowedProps = {[p]: propsToTest[p], ...allowedProps}; } }
reduce
const TEXT_PROPS_TO_BLOCK = [ 'display', 'textColor', 'verticalAlign', 'className', 'style', ]; const propsToTest = { "aria-label": "ordered list", "data-test": "something", "textColor": "foo", "className": "bar" } const newList = Object.keys(propsToTest).reduce((newObj, key) => { if (!TEXT_PROPS_TO_BLOCK.includes(key)) { newObj[key] = propsToTest[key]; } return newObj; }, {});
pick
const TEXT_PROPS_TO_BLOCK = [ 'display', 'textColor', 'verticalAlign', 'className', 'style', ]; const propsToTest = { "aria-label": "ordered list", "data-test": "something", "textColor": "foo", "className": "bar" } _.pick( propsToTest, Object.keys(propsToTest).filter(prop => !TEXT_PROPS_TO_BLOCK.includes(prop)) );
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
for in
reduce
pick
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36
Browser/OS:
Chrome 138 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=613086" width="100%" height="500px"></iframe>
reduce
13.2M/s
for in
4.9M/s
pick
999K/s
View exact numbers
Test name
Executions per second
✓
reduce
13,232,784 Ops/sec
for in
4,935,054 Ops/sec
pick
998,863 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
The provided JSON represents a benchmark for testing three different approaches to filtering an object's properties: `for in`, `reduce`, and `pick`. Let's break down each approach, their pros and cons, and the library used: **1. For-in Loop** The first test case uses a traditional `for-in` loop to iterate over the properties of the `propsToTest` object. The loop iterates over all properties, including those not in the `TEXT_PROPS_TO_BLOCK` array. Pros: - Simple and easy to understand - Works with any JavaScript object Cons: - May execute slower due to iterating over all properties - Not optimized for performance **2. Reduce Method** The second test case uses the `reduce()` method, which applies a function to each element in an array (or object) and reduces it to a single value. Pros: - More efficient than `for-in` loop for large objects - Can be used with arrays or objects - More concise code Cons: - May have higher overhead due to creating an intermediate array - Not suitable for all data types (e.g., non-array, non-object) **3. Pick Function** The third test case uses the `pick()` function from the Lodash library, which returns a new object with only the properties specified in the first argument. Pros: - Optimized for performance and concise code - Easy to use and understand Cons: - Requires an additional dependency (Lodash) - May have higher overhead due to creating an intermediate object **Additional Considerations** * The `TEXT_PROPS_TO_BLOCK` array is used to filter out properties that should not be included in the resulting object. * The `propsToTest` object has a mix of string and non-string values, which may affect performance. * The benchmark is run on a Desktop platform with Chrome 106, which may impact results. **Other Alternatives** If you're interested in exploring alternative approaches, here are a few options: * Using `Object.fromEntries()` or `Object.assign()` to create a new object with filtered properties * Utilizing libraries like `lodash` for more complex filtering operations * Implementing custom filtering functions using arrow functions or other methods Keep in mind that the choice of approach depends on your specific use case and performance requirements.
Related benchmarks
lodash vs es6 in reduce method
Lodash reduce vs native
Lodash reduce vs native (testing)
_.merge vs _.assign vs _.reduce vs JS reduce vs Js assign
Comments
Confirm delete:
Do you really want to delete benchmark?