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
Jump 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:
10 months 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>
Test name
Executions per second
for in
4935054.5 Ops/sec
reduce
13232784.0 Ops/sec
pick
998863.4 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
reduce native vs lodash
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?