returning object from for loop

JavaScript performance comparison

Test case created by Josh

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div id="the-products">

        <ul class="small-list">
               
                <li class="product buy" data-catalog-id="1025513">
                        <a href="#">
                                <span class="image"><img src="http://placehold.it/40x40/EEE" alt="Product Name"></span>
                                <span class="price">---</span>
                                <span class="store-name">---</span>
                        </a>
                </li>
               
                <li class="product" data-catalog-id="884286">
                        <a href="#">
                                <span class="image"><img src="http://placehold.it/40x40/EEE" alt="Product Name"></span>
                                <span class="price">---</span>
                                <span class="store-name">---</span>
                        </a>
                </li>
               
                <li class="product buy" data-catalog-id="870448">
                        <a href="#">
                                <span class="image"><img src="http://placehold.it/40x40/EEE" alt="Product Name"></span>
                                <span class="price">---</span>
                                <span class="store-name">---</span>
                        </a>
                </li>
               
                <li class="product" data-catalog-id="23452345">
                        <a href="#">
                                <span class="image"><img src="http://placehold.it/40x40/EEE" alt="Product Name"></span>
                                <span class="price">---</span>
                                <span class="store-name">---</span>
                        </a>
                </li>
               
                <li class="product buy" data-catalog-id="1025153">
                        <a href="#">
                                <span class="image"><img src="http://placehold.it/40x40/EEE" alt="Product Name"></span>
                                <span class="price">---</span>
                                <span class="store-name">---</span>
                        </a>
                </li>
               
                <li class="product" data-catalog-id="20958023">
                        <a href="#">
                                <span class="image"><img src="http://placehold.it/40x40/EEE" alt="Product Name"></span>
                                <span class="price">---</span>
                                <span class="store-name">---</span>
                        </a>
                </li>
               
                <li class="product buy" data-catalog-id="5342234">
                        <a href="#">
                                <span class="image"><img src="http://placehold.it/40x40/EEE" alt="Product Name"></span>
                                <span class="price">---</span>
                                <span class="store-name">---</span>
                        </a>
                </li>
               
                <li class="product" data-catalog-id="23452343">
                        <a href="#">
                                <span class="image"><img src="http://placehold.it/40x40/EEE" alt="Product Name"></span>
                                <span class="price">---</span>
                                <span class="store-name">---</span>
                        </a>
                </li>
       
        </ul>

</div>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
without cached loop vars
var products = $('[data-catalog-id]');
var ids = sortedIDs(products);

function sortedIDs(products) {

  // Count the products passed in
  //var count = products.length;

  // Define iterator for loop
  //var i = 0;

  // Array for sell product ids
  var sell = [];

  // Array for buy product ids
  var buy = [];

  // Loop through products
  for (var i = 0; i < products.length; i += 1) {

    // Cache single product to var (perf)    
    var product = $(products[i]);

    // Define var for buy check
    var buyProduct = product.hasClass('buy');

    // Define var for single id
    var id = product.attr('data-catalog-id');

    // If buylist product and ID isn't empty
    if (buyProduct && id !== '') {

      buy.push(id); // Push buy product id to buy array        

      // If sell product and ID isn't empty    
    } else if (!buyProduct && id !== '') {

      sell.push(id); // Push sell product id to buy array

    }

  }

  // Return an object with buy and sell arrays
  return {
    sell: sell,
    buy: buy
  };

}
pending…
with cached loop vars
var products = $('[data-catalog-id]');
var ids = sortedIDs(products);

function sortedIDs(products) {

  // Count the products passed in
  var count = products.length;

  // Define iterator for loop
  var i = 0;

  // Array for sell product ids
  var sell = [];

  // Array for buy product ids
  var buy = [];

  // Loop through products
  for (i; i < count; i += 1) {

    // Cache single product to var (perf)    
    var product = $(products[i]);

    // Define var for buy check
    var buyProduct = product.hasClass('buy');

    // Define var for single id
    var id = product.attr('data-catalog-id');

    // If buylist product and ID isn't empty
    if (buyProduct && id !== '') {

      buy.push(id); // Push buy product id to buy array        

      // If sell product and ID isn't empty    
    } else if (!buyProduct && id !== '') {

      sell.push(id); // Push sell product id to buy array

    }

  }

  // Return an object with buy and sell arrays
  return {
    sell: sell,
    buy: buy
  };

}
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment