Benchmark: for in vs reduce vs pick vs filter

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/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)) );
filter and fromPairs
const TEXT_PROPS_TO_BLOCK = [ 'display', 'textColor', 'verticalAlign', 'className', 'style', ]; const propsToTest = { "aria-label": "ordered list", "data-test": "something", "textColor": "foo", "className": "bar" } _.fromPairs(Object.entries(propsToTest).filter(([prop, value]) => !TEXT_PROPS_TO_BLOCK.includes(prop)))

Rendered benchmark preparation results:

Previous results

ⓘ Get performance results from real users on your website with Request Metrics.

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Windows

for in vs reduce vs pick vs filter (version: 0)