Run results for: Lodash Pick vs compiled pick fn

Run details:

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/113.0

Browser: Firefox 113

Operating system: Ubuntu

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Lodash	2.9 Ops/sec
compiled pick function	36.8 Ops/sec

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

AخA
 
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

Script Preparation code:

var arr = [];
var object = { 
	type: 'aaa',
    subtype: 'bbb',
    card_last4:'bbb',
    card_type:'bbb',
    card_exp_month:'bbb',
    card_exp_year:'bbb',
    card_country:'bbb',
    foo: 'bar'
};
for (var i = 0; i <= 100000; i++) { arr.push(object); }

 
var arr = [];var object = {     type: 'aaa',    subtype: 'bbb',    card_last4:'bbb',    card_type:'bbb',    card_exp_month:'bbb',    card_exp_year:'bbb',    card_country:'bbb',    foo: 'bar'};for (var i = 0; i <= 100000; i++) { arr.push(object); }

Tests:

Lodash

arr.map(function (element) {
	return _.pick(
      	element,
      	'type',
        'subtype',
        'card_last4',
        'card_type',
        'card_exp_month',
        'card_exp_year',
        'card_country',
        'something'
    );
});

 
arr.map(function (element) {    return _.pick(        element,        'type',        'subtype',        'card_last4',        'card_type',        'card_exp_month',        'card_exp_year',        'card_country',        'something'    );});

compiled pick function

const props = [
      "type",
      "subtype",
      "card_last4",
      "card_type",
      "card_exp_month",
      "card_exp_year",
      "card_country",
      "something"
];

function pickBuilder(props) {
  	const obj = props.map((prop) => `if (has.call(el, '${prop}')) res.${prop} = el.${prop}`).join(';');
	return new Function('el', `const has = Object.prototype.hasOwnProperty; const res = {}; ${obj}; return res;`);
}

const pick = pickBuilder(props)

arr.map((element) => pick(element));

​x
 
const props = [      "type",      "subtype",      "card_last4",      "card_type",      "card_exp_month",      "card_exp_year",      "card_country",      "something"];​function pickBuilder(props) {    const obj = props.map((prop) => `if (has.call(el, '${prop}')) res.${prop} = el.${prop}`).join(';');    return new Function('el', `const has = Object.prototype.hasOwnProperty; const res = {}; ${obj}; return res;`);}​const pick = pickBuilder(props)​arr.map((element) => pick(element));