Run results for: ForEach vs ForOf vs For

Run details:

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

Browser: Chrome 118

Operating system: Windows

Device Platform: Desktop

Date tested: 6 months ago

Test name	Executions per second
forEach	6.0 Ops/sec
for...of	4.8 Ops/sec
for	5.1 Ops/sec

HTML Preparation code:


<div id=''></div>

Script Preparation code:

function generateTestArray() {
  const courses = Array.from({ length: 1000 }).map((_, i) => ({
    id: `course-${i+1}`, 
    contents: Array.from({ length: 1000 }).map((_, i) => ({id: `content-${i+1}`, title: `Lorem ${i+1}`})) 
  }))
  return courses
}

Tests:

forEach
const testArray = generateTestArray() const choosedNumber = 998 testArray.forEach(c => { const contents = c.contents const findedContent = contents.findIndex(content => content.id === `content-${choosedNumber}`) if (findedContent !== -1) { console.log(`finded content: ${contents[findedContent].title}`) } })
for...of
const testArray = generateTestArray() const choosedNumber = 998 for (const c of testArray) { const contents = c.contents const findedContent = contents.findIndex(content => content.id === `content-${choosedNumber}`) if (findedContent !== -1) { console.log(`finded content: ${contents[findedContent].title}`) } }
for
const testArray = generateTestArray() const choosedNumber = 998 for (let i = 0; i < testArray.length; i++) { const contents = testArray[i].contents const findedContent = contents.findIndex(content => content.id === `content-${choosedNumber}`) if (findedContent !== -1) { console.log(`finded content: ${contents[findedContent].title}`) } }

Run results for: ForEach vs ForOf vs For

forEach

for...of

for