Run results for: Restoring actual data

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Browser: Chrome 122

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 8 months ago

Test name	Executions per second
forEach + find + push	18440.5 Ops/sec
Reduce + find	33678.1 Ops/sec
map + find + filter	42036.8 Ops/sec

Tests:

forEach + find + push
const responseData = new Array(100).fill(null).map((_, index) => ({ contract: `contract_${index}`, token_id: index, hash: `hash_${index}`, })); const cachedData = new Array(100).fill(null).map((_, index) => ({ contract: `contract_${index % 2}`, token_id: index, hash: `hash_${index}`, nft: index % 2 === 0 ? { data: `NFT data for ${index}` } : null, })); const readyForRender = []; const toUpdate = []; responseData.forEach(item => { const actualCachedData = cachedData.find( cache => cache.contract === item.contract && cache.token_id === item.token_id && cache.hash === item.hash ); if (actualCachedData && actualCachedData.nft) { readyForRender.push(actualCachedData); } else { toUpdate.push(item); } });
Reduce + find
const responseData = new Array(100).fill(null).map((_, index) => ({ contract: `contract_${index}`, token_id: index, hash: `hash_${index}`, })); const cachedData = new Array(100).fill(null).map((_, index) => ({ contract: `contract_${index % 2}`, token_id: index, hash: `hash_${index}`, nft: index % 2 === 0 ? { data: `NFT data for ${index}` } : null, })); const { readyForRender, toUpdate } = responseData.reduce((accumulator, item) => { const actualCachedData = cachedData.find(cache => cache.contract === item.contract && cache.token_id === item.token_id && cache.hash === item.hash ); if (actualCachedData && actualCachedData.nft) { return { ...accumulator, readyForRender: [...accumulator.readyForRender, actualCachedData], }; } else { return { ...accumulator, toUpdate: [...accumulator.toUpdate, item], }; } }, { readyForRender: [], toUpdate: [] });
map + find + filter
const responseData = new Array(100).fill(null).map((_, index) => ({ contract: `contract_${index}`, token_id: index, hash: `hash_${index}`, })); const cachedData = new Array(100).fill(null).map((_, index) => ({ contract: `contract_${index % 2}`, token_id: index, hash: `hash_${index}`, nft: index % 2 === 0 ? { data: `NFT data for ${index}` } : null, })); const loadedIndices = responseData.map((item, index) => { const actualCachedData = cachedData.find(cache => cache.contract === item.contract && cache.token_id === item.token_id && cache.hash === item.hash ); return actualCachedData && actualCachedData.nft ? index : null; }).filter(index => index !== null); const readyForRender = loadedIndices.map(index => cachedData[index]); const toUpdate = responseData.filter((_, index) => !loadedIndices.includes(index));

Run results for: Restoring actual data

forEach + find + push

Reduce + find

map + find + filter