Оптимизирует ли JavaScript несколько чистых фильтров / карт / и т.д.

Question

У меня есть этот код JavaScript, написанный в функциональном стиле:

someArray
  .filter((element) => element)
  .map((element) => element.property)
  .map((property) => doSomethingWithIt)

Теперь наивная реализация будет циклически повторять массив три раза - один раз для каждого filter и map - но оптимизатор долженбыть в состоянии оптимизировать его до одного цикла, выполняющего несколько операций, предполагая, что все функции чистые.

Делают ли (большинство?) механизмы JavaScript это оптимизирующим;или это нужно было бы оптимизировать вручную?

РЕДАКТИРОВАТЬ: я подумал, что оптимизированным было просто сократить его до одного цикла:

someArray.reduce((acc, element) => {
  if(!element) {
    return acc
  }

  return acc.push(doSomethingWithIt(element.property))
}, [ ])

Answer 1

оптимизатор должен иметь возможность оптимизировать его до одного цикла, выполняющего несколько операций.

Нет, не должно! Эта оптимизация может изменить поведение вашего кода.

Рассмотрим двойное map, где операции в каждом map имеют наблюдаемые побочные эффекты:

let arr = [1, 2, 3];
arr.map((x) => { console.log("foo", x); return x })
   .map((y) => { console.log("bar", y); return y });

регистрирует другую последовательность сообщений из "оптимизированной" версии:

let arr = [1, 2, 3];
arr.map((x) => {
    console.log("foo", x);
    console.log("bar", x);
    return x;
});

Answer 2

Вы не можете удалить вызов filter, если вы не хотите иметь undefined в вашем массиве - вы можете сделать два вызова map в один, используя деструктуризацию, однако:

someArray.filter(element => element).map(({ property }) => doSomething(property));