🗿 Подводные камни при переходе с ES5 на ES6

Недавно мы с командой, наконец-то перешли с ES5 на ES6.

Всё прошло достаточно плавно, нам пришлось исправить всего несколько ошибок в рантайме. Почти все ошибки были в очень старых файлах, где были отключены проверки typescript с помощью @ts-nocheck.

Ошибка 1️⃣ — Action is not a constructor

Ошибка возникла в нескольких местах, где мы использовали стрелочную функцию в качестве конструктора. Раньше она не возникала, потому что стрелочная функция компилировалась в обычную function.

 
const Action = () => {}; // ES6
const action = new Action(); // Action is not a constructor
 
var Action = function () {} // ES5
var action = new Action(); // Всё ОК

Ошибка 2️⃣ — Функции, объявленные через let, больше не попадают в window

 
let openAction = function () {}
window.openAction() // window.openAction is not a function
 
// Раньше let заменялся на var и всё работало
var openAction = function () {}
window.openAction() // всё ок

Дело в том, что когда переменная объявляется глобально через var, она автоматически становится свойством глобального объекта window. Подробнее тут.

Ошибка 3️⃣ — Cannot access variable before initialization

Одна из ошибок случалась, когда мы пытались получить доступ к переменной promise до её инициализации.

 
class Queue {
  executing;
 
  run(thenable) {
    const promise = new Promise(async (resolve, reject) => {
      // пытаемся получить значние promise
      while (this.executing != promise) {
        // ...
      }
      // ...
    });
  }
}
 
// Cannot access 'promise' before initialization
new Queue().run(Promise.resolve())

Раньше, const превращался в var и ошибки не было. Это связано с понятием временной мертвой зоны TDZ, которая не возникает у переменных, объявленных через var.

Были и другие ошибки, но они по сути вариации или комбинации тех ошибок, что я привел выше.

👉 Кстатии, размер бандлов уменьшился процентов на 20.