• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Front-end PSA: Are You Using For Loops In Your Javascript?

Javascript · September 12, 2014

I am most certainly not a Javascript purist, I love jQuery just as much as the next developer does, but that doesn’t mean I use it for everything. One thing that really gets under my skin is when jQuery is used to unnecessarily loop through and array or object.

It’s 2014, not 2008, we no longer have to use library methods because of browser API constraints like we once did for older versions of IE. Using jQuery.each() for looping through an array or object is quite an expensive operation and poor in terms of performance, this is one of those situations where native methods and conditions which are well supported eclipse jQuery 1000:1.

This JSPerf benchmark shows in Chrome and Firefox just how much of a difference using a native for loop makes. See below for the results I got on the latest version of Chrome on a Mac. The difference is like night and day. I know that a for loop might require more typing and not look as clean, but if you care about performance, then you won’t always go for the easiest method.

javascript-native-vs-jquery-loop-performance-screenshot-in-chrome-latest-on-mac-osx

Good:

var myArray = ["apple", "banana", "orange", "grapefruit", "pear", "pawpaw"];

for (var i = 0, len = myArray.length; i < len; ++i) { 
    console.log(myArray[i]);
}

Beyond bad (avoid this kind of loop for arrays please):

var myArray = ["apple", "banana", "orange", "grapefruit", "pear", "pawpaw"];

for (var i in myArray) { }

At all costs you should avoid using a for..in loop if you can for arrays. Trust me, you don’t want to see the performance benchmarks on a for..in loop, they’re incredibly slow and the use of this kind of loop in favour of a standard for loop can almost always be avoided.

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • How To Get The Hash of A File In Node.js
  • Testing Event Listeners In Jest (Without Using A Library)
  • Which Neural DSP Archetype Plugins Should You Buy?
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • How to Fast Launch Microsoft Flight Simulator 2020 (decrease game loading time)
  • A review of the Neural DSP Quad Cortex: is this the future of amp-modelling?
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • How To Mock uuid In Jest
  • Convert A Firebase Database Snapshot/Collection To An Array In Javascript

Recent Comments

  • Thebe on How to Remove the My Sites Menu From the WordPress Admin Bar
  • Maccas worker jn the 2000s on Dear McDonald’s: bring back the Warm Cookie Sundae, you cowards
  • Anamika Singh on Testing Event Listeners In Jest (Without Using A Library)
  • Stefan on A List of WordPress Gutenberg Core Blocks
  • pandammonium on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz