132

Following the question Extending String.prototype performance I am really intrigued, because just adding "use strict" to a String.prototype method improved performance 10 times. The explanation by bergi is short and does not explain it to me. Why there is such a dramatic difference between two almost identical methods, that only differ in "use strict" at the top? Can you explain in more detail and with the theory behind this?

String.prototype.count = function(char) {
  var n = 0;
  for (var i = 0; i < this.length; i++)
    if (this[i] == char) n++;
  return n;
};

String.prototype.count_strict = function(char) {
  "use strict";
  var n = 0;
  for (var i = 0; i < this.length; i++)
    if (this[i] == char) n++;
  return n;
};
// Here is how I measued speed, using Node.js 6.1.0

var STR = '0110101110010110100111010011101010101111110001010110010101011101101010101010111111000';
var REP = 1e4;

console.time('proto');
for (var i = 0; i < REP; i++) STR.count('1');
console.timeEnd('proto');

console.time('proto-strict');
for (var i = 0; i < REP; i++) STR.count_strict('1');
console.timeEnd('proto-strict');

Result:

proto: 101 ms
proto-strict: 7.5 ms
7
  • 1
    Can you do a test with this[i] === char and see if you get the same difference? Jul 16, 2016 at 13:12
  • 1
    I tested with this[i] === char in a DOM environment and the result is the same Jul 16, 2016 at 13:28
  • 2
    bergi's explanation says that when you call the count function, the this parameter has to be cast to a string object instead of a string literal whereas in strict mode it does not have to in order to operate correctly. Why this is the case is beyond me, I'm very interested in the answer. Jul 16, 2016 at 13:28
  • 3
    @NickLarsen: It's just how the language was spec'd. Traditionally JS would make sure you always had an object as this, but in strict mode it skips that step, so you get the primitive string, or whatever was provided for this.
    – user1106925
    Jul 16, 2016 at 13:33
  • 6
    It's time to put "use strict"; everywhere boys! Goooold
    – Jonathan
    Jul 16, 2016 at 13:36

1 Answer 1

163

In strict mode, the this context is not forced to be an object. If you call a function on a non-object, this will just be that non-object.

In contrast, in non-strict mode, the this context is always first wrapped in an object if it's not already an object. For example, (42).toString() first wraps 42 in a Number object and then calls Number.prototype.toString with the Number object as this context. In strict mode, the this context is left untouched and just calls Number.prototype.toString with 42 as this context.

(function() {
  console.log(typeof this);
}).call(42); // 'object'

(function() {
  'use strict';
  console.log(typeof this);
}).call(42); // 'number'

In your case, the non-strict mode version spends a lot of time wrapping and unwrapping primitive strings into String object wrappers and back. The strict mode version on the other hand directly works on the primitive string, which improves performance.

9
  • 1
    And the removal of with also helps a bit for every variable lookup iirc.
    – zzzzBov
    Jul 16, 2016 at 13:41
  • 2
    @zzzzBov incorrect. Removal of with helps immensely as it allows the browser to reason which variable expression refers to which variable. Jul 16, 2016 at 18:21
  • 3
    Seems unintuitive to me that non-object this is "stricter" than always-object this.
    – IS4
    Jul 17, 2016 at 10:33
  • 2
    @IllidanS4: This is mostly about cases where this is null or undefined, which would be the global object in sloppy mode.
    – Bergi
    Jul 17, 2016 at 10:57
  • 7
    @IllidanS4: Think of it as "actual this" vs. "wrapper this" if you like. Object wrappers are a kludge that should never have existed, so it makes sense that strict mode would avoid them more when possible.
    – Ry-
    Jul 18, 2016 at 5:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.