Is there a performance difference between ‘let’ and ‘var’ in JavaScript

by

After testing this on http://jsperf.com, I got the following results: jsperf has been down for a while; see the replacing code below.

To check this, I’ll use the following performance test based on this answer, which led me to write this function:

/**
 * Finds the performance for a given function
 * function fn the function to be executed
 * int n the amount of times to repeat
 * return array [time for n iterations, average execution frequency (executions per second)]
 */
function getPerf(fn, n) {
  var t0, t1;
  t0 = performance.now();
  for (var i = 0; i < n; i++) {
    fn(i)
  }
  t1 = performance.now();
  return [parseFloat((t1 - t0).toFixed(3)), parseFloat((repeat * 1000 / (t1 - t0)).toFixed(3))];
}

var repeat = 100000000;
var msg = '';

//-------inside a scope------------
var letperf1 = getPerf(function(i) {
  if (true) {
    let a = i;
  }
}, repeat);
msg += '<code>let</code> inside an if() takes ' + letperf1[0] + ' ms for ' + repeat + ' iterations (' + letperf1[1] + ' per sec).<br>'

var varperf1 = getPerf(function(i) {
  if (true) {
    var a = i;
  }
}, repeat);
msg += '<code>var</code> inside an if() takes ' + varperf1[0] + ' ms for ' + repeat + ' iterations (' + varperf1[1] + ' per sec).<br>'

//-------outside a scope-----------

var letperf2 = getPerf(function(i) {
  if (true) {}
  let a = i;
}, repeat);
msg += '<code>let</code> outside an if() takes ' + letperf2[0] + ' ms for ' + repeat + ' iterations (' + letperf2[1] + ' per sec).<br>'

var varperf2 = getPerf(function(i) {
  if (true) {}
  var a = i;
}, repeat);
msg += '<code>var</code> outside an if() takes ' + varperf1[0] + ' ms for ' + repeat + ' iterations (' + varperf1[1] + ' per sec).<br>'

document.getElementById('out').innerHTML = msg
<output id="out" style="font-family: monospace;white-space: pre-wrap;"></output>

After testing this in Chrome and Firefox, this shows that let is faster than var, but only when inside a different scope than the main scope of a function. In the main scope, var and let are roughly identical in performance. In IE11 and MS Edge, let and var are roughly equal in performance in both cases.

Press the big blue button to see for yourself in your favourite browser.

Currently let has support from only newer browsers, but older browsers are still being used relatively much, which would be a reason to generally not use it yet. If you want to use it somewhere where older browsers wouldn’t function otherwise, there should be no problem with it.

Edit: revamped answer since jsperf is not working (see revision history for old version).

More Related Contents:

  1. Convert JSON to array in Javascript
  2. I would like to ask how to explain this (javascript function)
  3. What’s the difference between using “let” and “var”?
  4. When to use Vanilla JavaScript vs. jQuery?
  5. Declaring multiple variables in JavaScript
  6. Assigning prototype methods *inside* the constructor function – why not?
  7. Function declarations inside if/else statements?
  8. Array vs. Object efficiency in JavaScript
  9. How do I pass the this context to a function?
  10. Should CSS always precede Javascript?
  11. Javascript when to use prototypes
  12. Does use of anonymous functions affect performance?
  13. ECMAScript 2015: const in for loops
  14. What is the difference between “let” and “var”?
  15. Access a variable outside the scope of a Handlebars.js each loop
  16. Efficient Javascript String Replacement
  17. Global JavaScript Variable Scope: Why doesn’t this work?
  18. Javascript prototype operator performance: saves memory, but is it faster?
  19. Are JavaScript Arrays actually implemented as arrays?
  20. Is “Put Scripts at the Bottom” Correct? [closed]
  21. How many concurrent setTimeouts before performance issues?
  22. Are ES6 template literals faster than string concatenation?
  23. Why does IE nuke window.ABC variables?
  24. How browser executes Javascript and renders asynchronously
  25. Why does .then() chained to Promise.resolve() allow const declaration to be reassigned?
  26. Javascript – insert an array inside another array
  27. Function not calling within an onclick event
  28. Programmatically accessing function scope using Chrome DevTools console
  29. Does using a document fragment really improve performance?
  30. value of using React.forwardRef vs custom ref prop

Leave a Comment