[Aetae]

for(let n in arr){
    retArr.push(await procData(arr[n],n));
  }
 
  Promise.all(retArr).then((ret)=>{console.log(ret)});

Это излишне.
Достаточно либо:

for(let n in arr){
    retArr.push(procData(arr[n],n));
  }
 
  Promise.all(retArr).then((ret)=>{console.log(ret)});

наполняем массив промисами, затем ждём выпонениния всех.
Либо:

for(let n in arr){
    retArr.push(await procData(arr[n],n));
  }
 
  console.log(retArr)

наполняем массив ожидая выполнения каждого промиса по очереди.

Оно работает, но я по прежнему не понимаю, почему все работает внутри безымянной функции с пометкой async, которая ещё и сразу вызывается, после объявления.

Потому что await работает только внутри async функции, и в простом коде ничего await нельзя. Как я сказал выше - это лишь обёртка над промисами, в сам язык вписанная, имхо, не слишком красиво.

Почему нельзя поставить async перед функцией внутри которой создается промис, почему нельзя поставить await перед самим промисом?

Можно. Только если вызывать async функцию не поставив перед самим вызовом await, то ждать её вырлнения код не будет, и, хотя сам асинронный код в функции выполнится, но отдельно, не возвращая результата и не откладывая выполнения остального кода.

Но при этом с калбеками вроде более менее разобрался и ужасную лапшу из них строить могу А вот промисы и async/await не даются.

С коллбэков переходите на промисы. Самый постой вариант понять, как это работает - написать свой класс Promise, что абсолютно реализуемо классическими методами. (Если не получается - погуглить "промис полифил" и разобраться что да как)