Run results for: map vs findIndex & slice

Run details:

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

Browser: Chrome 112

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
map	65266.6 Ops/sec
findIndex & spread	533814.1 Ops/sec
findIndex & slice	556591.3 Ops/sec

Tests:

map
function updateTodo(update, list) { console.log('LIST', list); const updatedAt = new Date().toISOString(); return list.map((item) => item.id === update.id ? { ...item, ...update, updatedAt } : item ); } const update = {id: 5, done: true} const list = [{id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 5, done: false}] const other = updateTodo(update, list)
findIndex & spread
function updateTodo(update, list) { const updatedAt = new Date().toISOString(); const indexToUpdate = list.findIndex((item) => item.id === update.id); const newList = [...list]; newList[indexToUpdate] = { ...newList[indexToUpdate], ...update, updatedAt }; return newList; } const update = {id: 5, done: true} const list = [{id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 5, done: false}] const other = updateTodo(update, list)
findIndex & slice
function updateTodo(update, list) { const updatedAt = new Date().toISOString(); const indexToUpdate = list.findIndex((item) => item.id === update.id); const newList = list.slice(); newList[indexToUpdate] = { ...newList[indexToUpdate], ...update, updatedAt }; return newList; } const update = {id: 5, done: true} const list = [{id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 5, done: false}] const other = updateTodo(update, list)

Run results for: map vs findIndex & slice

map

findIndex & spread

findIndex & slice