Why does .catch() not catch reject() within Promise constructor within loop at an async function unless Error is passed?

Question

Given

(async () => {
 const p = await new Promise((resolve, reject) => setTimeout(() => {
    reject(new Error(1))
  }, Math.floor(Math.random() * 1000))); return p})()
.then(data => console.log(data))
.catch(err => console.error(err));

the Error() is logged at .catch()

If we extend the pattern to use a loop the Error is logged at .catch()

const fn = async(res, ...props) => {
  for (let prop of props) res.push(await prop())
  return res
}

const arr = [
  () =>
    new Promise((resolve, reject) => 
      setTimeout(() =>
        reject(new Error(1))
      , Math.floor(Math.random() * 1000))
    ),
  () => 
    new Promise((resolve, reject) => 
      setTimeout(() => 
        resolve(1) 
      , Math.floor(Math.random() * 1000))
    )
  ];

fn([], ...arr)
.then(data => console.log(data))
.catch(err => console.log(err));

If we use a loop to call more than one function which returns a Promise and do not explicitly pass Error() to reject() of Promise constructor resolver function .catch() does not catch the error, and array res is not returned, only the Promise value passed to resolve() is available at

const fn = async(res, ...props) => {
  for (let prop of props) res.push(await prop())
  return res
}

const arr = [
  () =>
    new Promise((resolve, reject) => 
      setTimeout(() =>
        reject(1)
      , Math.floor(Math.random() * 1000))
    ),
  () => 
    new Promise((resolve, reject) => 
      setTimeout(() => 
        resolve(1) 
      , Math.floor(Math.random() * 1000))
    )
  ];

fn([], ...arr)
// what happened to our array `res` returned from `fn`?
.then(data => console.log(data))
// what happened to our rejected Promise?
.catch(err => console.log(err));

Questions:

Why does reject() call not propagate to .catch() when Error() is not explicitly passed to reject() within Promise constructor within a loop at an async function?
Why is only a single Promise value returned to .then() though an array is returned from the async function when one of the Promise objects iterated at a loop reject() function is called within Promise constructor resolver function?

Why does .catch() not catch reject() within Promise constructor within loop at an async function unless Error is passed?

2 Answers