Почему две последние функции работают, а не первая?

Question

У меня есть три разные функции, которые должны выполнять одно и то же, заполнять массив разрешенными обещаниями, но в первом примере это не работает.

Вот мой код:

(async() => {
  const items = [];
  const someFn = async() => {
    const v = await Promise.resolve(10);
    items.push(Math.random());
    return Promise.resolve(v * 10);
  }
  const arr = [];
  for (let i = 0; i < 10; i++) {
    arr.push(someFn);
  }
  await Promise.all(arr);
  console.log("item 1", items);
})();

(async() => {
  const items = [];
  const someFn = async() => {
    const v = await Promise.resolve(10);
    items.push(Math.random());
    return Promise.resolve(v * 10);
  }
  const arr = [...Array(10).keys()].map(someFn)
  await Promise.all(arr);
  console.log("items 2", items);
})();

(async() => {
  const items = [];
  const someFn = async() => {
    const v = await Promise.resolve(10);
    items.push(Math.random());
    return Promise.resolve(v * 10);
  }
  for (let i = 0; i < 10; i++) {
    await someFn();
  }
  console.log("items 3", items);
})()

Это вывод:

item 1 []

items 2 [ 0.7450904427103939,
  0.37106667256699555,
  0.12035280341441346,
  0.265221052932904,
  0.7775494303685422,
  0.4872532010723445,
  0.6497680191919464,
  0.2570485072009576,
  0.5613137531648884,
  0.95109416178435 ]

items 3 [ 0.25328649499657585,
  0.5452758396760038,
  0.7274346878509064,
  0.9306670111476503,
  0.22942578229725785,
  0.32547900377461625,
  0.9722902638678983,
  0.9964743517593542,
  0.2828162584401659,
  0.7672256760378469 ]

Обратите внимание, что item 1 является пустым массивом.

Answer 1

Это потому, что в первом примере someFn никогда не выполняется:

for (let i = 0; i < 10; i++) {
    arr.push(someFn);
}
await Promise.all(arr);

Эта часть просто помещает функции в переменную arr, она не запускает их, поэтому не создает Promises иникогда не заполняет массив items.

С другой стороны, другие примеры запускают функцию someFn:

const arr = [...Array(10).keys()].map(someFn)

Это заполняет массив arr 10 выполнением someFn (map выполняет их с текущим значением (0-9), индексом (также 0-9) и самим массивом).

for (let i = 0; i < 10; i++) {
    await someFn();
}

И это, очевидно, запускает someFn вloop.

Чтобы первый пример работал, поместите результат функции в массив:

(async () => {
    const items = [];
    const someFn = async () => {
        const v = await Promise.resolve(10);
        items.push(Math.random());
        return Promise.resolve(v * 10);
    }
    const arr = [];
    for (let i = 0; i < 10; i++) {
        arr.push(someFn()); // <-- () added
    }
    await Promise.all(arr);
    console.log("item 1", items);
})();

Answer 2

вы нажимаете someFn, но вы хотите someFn().обратите внимание, что мы вызываем функцию.