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:

1. 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?

2. 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?

Answer 1

If we […] do not explicitly pass Error() to reject() of Promise constructor resolver function .catch() does not catch the error

Sure, because there is no Error then. But catch will catch whatever you pass to reject, which is the value 1, which does get logged correctly.

Answer 2

When trying code, for example where Promise is used, and an error is expected to be logged at .catch(), explicitly pass Error(), preferably with a relevant message as parameter, to reject() of Promise constructor or Promise.reject(); and substitute using console.error() for console.log() at .catch(), for the purpose of distinguishing the error that you are expecting to be logged as an Error() and not a resolved Promise value, where the resolved and rejected value may happen to be the same.