Run results for: Looping variable vs elements

Run details:

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 14_0_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1

Browser: Mobile Safari 14

Operating system: iOS 14.0.1

Device Platform: Mobile

Date tested: 3 years ago

Test name	Executions per second
Variable	6877898.0 Ops/sec
Elements	562589.0 Ops/sec

HTML Preparation code:

<select>
    <option value="Strawberry">Strawberry</option>
    <option value="Blueberry">Blueberry</option>
    <option value="Peach">Peach</option>
    <option value="Pomegranate">Pomegranate</option>
    <option value="Grape">Grape</option>
    <option value="Banana">Banana</option>
    <option value="Cherry">Cherry</option>
    <option value="Pineapple">Pineapple</option>
    <option value="Pear">Pear</option>
    <option value="Plum">Plum</option>
    <option value="Muskmelon">Muskmelon</option>
    <option value="Avocado">Avocado</option>
    <option value="Apricot">Apricot</option>
    <option value="Mango">Mango</option>
    <option value="Apple">Apple</option>
    <option value="Papaya">Papaya</option>
    <option value="Lemon">Lemon</option>
    <option value="Coconut">Coconut</option>
    <option value="Jackfruit">Jackfruit</option>
    <option value="Nectarine">Nectarine</option>
  	<option value="Strawberry">Strawberry</option>
    <option value="Blueberry">Blueberry</option>
    <option value="Peach">Peach</option>
    <option value="Pomegranate">Pomegranate</option>
    <option value="Grape">Grape</option>
    <option value="Green Banana">Green Banana</option>
    <option value="Cherry">Cherry</option>
    <option value="Pineapple">Pineapple</option>
    <option value="Pear">Pear</option>
    <option value="Plum">Plum</option>
    <option value="Muskmelon">Muskmelon</option>
    <option value="Avocado">Avocado</option>
    <option value="Apricot">Apricot</option>
    <option value="Mango">Mango</option>
    <option value="Apple">Apple</option>
    <option value="Papaya">Papaya</option>
    <option value="Lemon">Lemon</option>
    <option value="Coconut">Coconut</option>
    <option value="Jackfruit">Jackfruit</option>
    <option value="Nectarine">Nectarine</option>
</select>

Script Preparation code:

window.options = [
  { text: 'Strawberry', value: 'Strawberry', selected: false },
  { text: 'Blueberry', value: 'Blueberry', selected: false },
  { text: 'Peach', value: 'Peach', selected: false },
  { text: 'Pomegranate', value: 'Pomegranate', selected: false },
  { text: 'Grape', value: 'Grape', selected: false },
  { text: 'Blueberry', value: 'Banana', selected: false },
  { text: 'Cherry', value: 'Cherry', selected: false },
  { text: 'Pineapple', value: 'Pineapple', selected: false },
  { text: 'Pear', value: 'Pear', selected: false },
  { text: 'Plum', value: 'Plum', selected: false },
  { text: 'Muskmelon', value: 'Muskmelon', selected: false },
  { text: 'Avocado', value: 'Avocado', selected: false },
  { text: 'Apricot', value: 'Apricot', selected: false },
  { text: 'Mango', value: 'Mango', selected: false },
  { text: 'Apple', value: 'Apple', selected: false },
  { text: 'Papaya', value: 'Papaya', selected: false },
  { text: 'Lemon', value: 'Lemon', selected: false },
  { text: 'Coconut', value: 'Coconut', selected: false },
  { text: 'Jackfruit', value: 'Jackfruit', selected: false },
  { text: 'Nectarine', value: 'Nectarine', selected: false },
  { text: 'Strawberry', value: 'Strawberry', selected: false },
  { text: 'Blueberry', value: 'Blueberry', selected: false },
  { text: 'Peach', value: 'Peach', selected: false },
  { text: 'Pomegranate', value: 'Pomegranate', selected: false },
  { text: 'Grape', value: 'Grape', selected: false },
  { text: 'Green Banana', value: 'Green Banana', selected: false },
  { text: 'Cherry', value: 'Cherry', selected: false },
  { text: 'Pineapple', value: 'Pineapple', selected: false },
  { text: 'Pear', value: 'Pear', selected: false },
  { text: 'Plum', value: 'Plum', selected: false },
  { text: 'Muskmelon', value: 'Muskmelon', selected: false },
  { text: 'Avocado', value: 'Avocado', selected: false },
  { text: 'Apricot', value: 'Apricot', selected: false },
  { text: 'Mango', value: 'Mango', selected: false },
  { text: 'Apple', value: 'Apple', selected: false },
  { text: 'Papaya', value: 'Papaya', selected: false },
  { text: 'Lemon', value: 'Lemon', selected: false },  
  { text: 'Coconut', value: 'Coconut', selected: false },
  { text: 'Jackfruit', value: 'Jackfruit', selected: false },
  { text: 'Nectarine', value: 'Nectarine', selected: false }
]

Tests:

Variable
window.options.find(o => o.value === 'Green Banana');
Elements
const selected = [...document.querySelector('select').options]; selected.find(s => s.value === 'Green Banana');

Run results for: Looping variable vs elements

Variable

Elements