Do We Still Need to Compile ES6 JavaScript Code Into ES5 in 2022?

A comparison at the bytecode level

In order to be compatible with old browsers, especially the IE series, we often need to use compiling tools such as Bable to compile our ES6+ code into ES5- code.

But ES6 was released in 2015, it’s been 7 years now, do we still need to convert it into ES5? Can we use ES6 directly?

According to Can I Use, 94.06% of users’ browsers already fully support ES6.

In addition to considering browser support, we also need to consider performance. Let’s compare the original code and compiled code from the perspective of their V8 bytecode.

1. Copy an Array

From ES6, we can use the spread operator … to copy an array:

const array1 = [1, 2, 3];
let a2 = [...array1];

If it was compiled to ES5 by Babel, it would use the concat function to copy an array:

var array1 = [1, 2, 3];
var a2 = [].concat(array1);

It looks like there is not much difference between the two codes. But in fact, if we look at their corresponding V8 bytecodes, we will see the difference.

0x3c140829374e @    0 : 79 00 00 25       CreateArrayLiteral [0], [0], #37
0x3c1408293752 @    4 : c4                Star0 
0x3c1408293753 @    5 : 7a                CreateArrayFromIterable 
0x3c1408293754 @    6 : c3                Star1 
0x3c1408293755 @    7 : 0e                LdaUndefined 
0x3c1408293756 @    8 : a9                Return

The above code is the V8 bytecode corresponding to the first piece of code, and it only takes 6 instructions to complete.

And the V8 bytecode corresponding to the var a2 = [].concat(array1); requires 10 instructions:

0x3c1408293696 @    0 : 79 00 00 25       CreateArrayLiteral [0], 0x3c140829369a @    4 : c4                Star0 
0x3c140829369b @    5 : 7b 01             CreateEmptyArrayLiteral [1]…