jsperf.com | jsperf | Performance Testing library

You can use a simple set to group them by tag as follows:

(V8 developer here.)

The key point is that the implementation of Array.prototype.flat that you found is not at all optimized. As you observe, it follows the spec almost to the letter -- that's how you get an implementation that's correct but slow. (Actually the verdict on performance is not that simple: there are advantages to this implementation technique, like reliable performance from the first invocation, regardless of type feedback.)

Optimizing means adding additional fast paths that take various shortcuts when possible. That work hasn't been done yet for .flat(). It has been done for .concat(), for which V8 has a highly complex, super optimized implementation, which is why that approach is so stunningly fast.

The two handwritten methods you provided get to make assumptions that the generic .flat() has to check for (they know that they're iterating over arrays, they know that all elements are present, they know that the depth is 1), so they need to perform significantly fewer checks. Being JavaScript, they also (eventually) benefit from V8's optimizing compiler. (The fact that they get optimized after some time is part of the explanation why their performance appears somewhat variable at first; in a more robust test you could actually observe that effect quite clearly.)

All that said, in most real applications you probably won't notice a difference in practice: most applications don't spend their time flattening arrays with millions of elements, and for small arrays (tens, hundreds, or thousands of elements) the differences are below the noise level.

It depends.

To give an absolute answer, we would have to compile every piece of code / watch the interpreter on every possible browser / architecture combination. Then we could give an absolute answer which operation takes fewer processor cycles, everything else is pure speculation. And that's what I'm doing now:

The naive approach

Let's assume that engines do not perform any optimizations. That they just perform every step as defined in the specification. Then for every testcase the following happens:

typeof x === 'boolean'

(1) The type of x gets looked up. As the engine probably represents a generic "JavaScript Value" as a structure with a pointer to the actual data and an enum for the type of the value, getting a string describing the type is probably a lookup in a type -> type string map.

(2) Now we have two string values, that we have to compare ('boolean' === 'boolean'). First of all, it has to be checked that the types equal. That is probably done by comparing the type field of both values, and a bitwise equality (meaning: one processor op).

(3) Finally the value has to be compared for equality. For strings this means iterating over both strings and comparing the characters to each other.

x === true || x === false

(1) First of all, the types of x and true and x ad false have to be compared as described above.

(2) Secondly the values have to be compared, for booleans that's bitwise quality (meaning: one processor op).

(3) The last step is the or expression. Given two values, they first have to be checked for truthiness (which is quite easy for booleans, but still we have to check again that these are really booleans), then the or operation can be done (bitwise or, meaning: one processor op).

So which one is faster? If I had to guess, the second approach, as the first one has to do string equality, which probably takes a few iterations more.

The optimal approach

A very clever compiler might realize that typeof x === 'boolean' is only true if the type of x is boolean. SO it could be optimized to (C++ pseudocode):

I believe what's happening in the Chrome and Firefox case is that it's inlining the mathAdd function. Because it's a simple function with no side effects that is both created and called within the function, the compiler replaces the call site with the internal code of the function.

The resulting code will look like this: